dotfiles

Build a throwaway single-file tool for a specific use case — runs on file://, persists to localStorage, no build step. Stack scales from static HTML to React-via-CDN based on interaction complexity.

Use when the user asks to create an interactive HTML explainer, visual walkthrough, or "making of" page for a codebase, feature, protocol, spec, architecture, commit history, board design, or technical documentation. Triggered by requests like "explain this code visually", "create an explainer", "make an interactive walkthrough", "explain this protocol", "visualize the architecture". Produces a long-form, top-to-bottom scrolling page in which interactive diagrams carry the explanation and prose threads them together.

Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.

Scrape a documentation website and convert it to .epub and .azw3 for Kindle. Use when the user asks to turn docs, guides, or a documentation site into an ebook for Kindle or EPUB readers.

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

Use when creating interactive scrollytelling pages, playable essays, model-driven explanations, or explorable explanations for concepts, phenomena, societal issues, geopolitical situations, scientific research, or public-interest themes. Triggered by "make an explorable explanation", "build a playable essay", "explain this interactively", "scrollytelling piece for X", or references to authors and projects in the lineage — Bartosz Ciechanowski, Nicky Case, Vi Hart, Bret Victor, Parable of the Polygons, Distill, Mathigon, explorabl.es.

Reference guide for Frederik's preferred web development stack. Use when starting new projects, scaffolding apps, or when asked about preferred conventions for Cloudflare, Hono, React, or full-stack TypeScript projects.

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.

Interview the user in depth to create a detailed spec. Use when the user wants requirements discovery, product or technical specification writing, UX exploration, or a structured design interview before implementation.

Use when the user asks to create or update a self-contained landing page, single-page website, conference site, event page, portfolio page, or any static single-HTML-file site. Triggered by "make a landing page", "create a website for...", "build a one-page site", or when the user points to a directory containing an index.html they want to modify.

Fetch the latest changes from origin and merge main into the current branch, resolving conflicts. Use when the user asks to merge main, update a branch from main, or resolve merge conflicts after pulling main.

Build a throwaway prototype to flush out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".

Perform a refactor pass focused on simplicity after recent changes. Use when the user asks for a refactor/cleanup pass, simplification, or dead-code removal and expects build/tests to verify behavior.

Best practices for Remotion video creation in React. Use when working with Remotion compositions, animation, captions, audio/video assets, FFmpeg, sequencing, rendering, or React-based video generation.

Use when creating or editing shell scripts, Bash files, deployment scripts, build scripts, or writing shell commands into files; emphasizes strict mode, portability, safety, and maintainability.

Commit pending changes, push to remote, and create a pull request when appropriate. Use when the user asks to ship, publish, commit and push, or open a PR for local work.

Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.

Upgrade npm dependencies and GitHub Actions safely, testing between each change