robertpenner

name	advisor
description	Consult a stronger advisor model before committing to an approach on a substantive task.
disable-model-invocation	true

Advisor

You are the executor. A stronger advisor is available through the Agent tool. It is higher-intelligence but slower and costlier, so spend it on judgment, not labor: it only reads, reasons, and recommends, while you do every edit, write, and command yourself.

farzaa

name	wiki
description	Compile personal data (journals, notes, messages, whatever) into a personal knowledge wiki. Ingest any data format, absorb entries into wiki articles, query, cleanup, and expand.
argument-hint	ingest | absorb [date-range] | query <question> | cleanup | breakdown | status

Personal Knowledge Wiki

You are a writer compiling a personal knowledge wiki from someone's personal data. Not a filing clerk. A writer. Your job is to read entries, understand what they mean, and write articles that capture understanding. The wiki is a map of a mind.

drewcsillag

Feature Implementation Workflow

Task: $ARGUMENTS

---

Setup

1. Derive a kebab-case slug from the task description (e.g., "rename an SD" → rename-sd)
2. Create and checkout git branch: {slug}

jezell

Overview

In Rive, feathering is a technique used to produce smooth antialiasing and soft edges (or “feathered” edges) for both strokes and fills. Rather than doing a direct edge-based AA, Rive precomputes a Gaussian-like function (stored in @featherTexture) and uses that to blend edges more smoothly.

The code you shared shows how Rive encodes “feather” coverage in the vertex shader, then interprets that coverage in the fragment shader to decide how much a given fragment should be faded out toward the shape’s edges. Below is a step-by-step explanation of how it all comes together.

---

1. Coverage Encoding and Classification

gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

bryanmylee

const path = require('path');
const postcss = require('postcss');
const preprocess = require('svelte-preprocess');

const replaceFileExtension = (filePath, newExtension) => {
  const { name, root, dir } = path.parse(filePath);
    return path.format({
      name,
      root,
      dir,

rmcfadzean

import { createMachine } from 'xstate';

interface Booking {
  id: string;
  flight: Flight;
  paid: boolean;
}

interface Passenger {
  name: string;

ef4

Webpack 5 Node Polyfills Upgrade Cheatsheet

Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.

So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.

List of polyfill packages that were used in webpack 4

For each automatically-polyfilled node package name on the left, this shows the name of the NPM package that was used to polyfill it on the right. Under webpack 5 you can manually install these packages and use them via resolve.fallback.

patrickmatte

$easeLinear: cubic-bezier(0, 0, 1, 1);
$easeSineInOut: cubic-bezier(0.37, 0, 0.63, 1);
$easeSineIn: cubic-bezier(0.12, 0, 0.39, 0);
$easeSineOut: cubic-bezier(0.61, 1, 0.88, 1);
$easeQuadraticInOut: cubic-bezier(0.45, 0, 0.55, 1);
$easeQuadraticIn: cubic-bezier(0.11, 0, 0.5, 0);
$easeQuadraticOut: cubic-bezier(0.5, 1, 0.89, 1);
$easeCubicInOut: cubic-bezier(0.65, 0, 0.35, 1);
$easeCubicIn: cubic-bezier(0.32, 0, 0.67, 0);
$easeCubicOut: cubic-bezier(0.33, 1, 0.68, 1);

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()