dev-skills

Appearance

Dev Skills ​

A collection of agent skills for Claude Code, GitHub Copilot, Antigravity CLI, and Pi. They encode patterns and workflows for AI-assisted software development.

See Installing Dev Skills for setup.

Agent Instructions ​

  • Fewer Approvals: Strategies for minimizing approval prompts by using built-in tools over shell commands and npm scripts. Use when the user says there are too many approvals.
  • Follow Instructions: Force the agent to re-read instruction files, identify violations, and correct its approach. Use when the user says the agent isn't following instructions.
  • Interview Me: Structured, one-question-at-a-time interview process that minimizes user effort. Use when the user asks to be interviewed about a topic.
  • No Hallucination: Force the agent to verify claims via web search and cite authoritative sources. Use when the user says the agent is hallucinating or making things up.
  • Prevent Mistake: Guide the agent to diagnose an error and propose an instruction edit to prevent recurrence. Use when the user points out the agent made a mistake.
  • Recap Current Work: Brief summary of goals, progress, current status, and next steps. Use when the user asks for a recap or summary of the session.
  • Research: Concise, factual web search findings from authoritative sources. Use when the user asks the agent to research something online.

Agent Skills ​

  • Create Skill: Full workflow for creating a new skill, from naming through frontmatter, single vs multi-file structure, and content patterns. Use when authoring a new skill.
  • Installing Dev Skills: Symlink-based installation for Claude Code, GitHub Copilot, Antigravity CLI, Pi, and Claude.ai zip upload. Use when installing or uninstalling the dev-skills library.
  • Skills Library Maintenance: Validation and fix workflow for frontmatter, categories, index coverage, and consistency. Use when auditing or repairing the skills library.
  • Use dev-skills in a repo: Install the private package in a consumer repo, run its tools, reference local skills, and wire updates. Use when onboarding a repository onto @chriscalo/dev-skills.

Apple Development ​

  • XcodeBuildMCP Setup: Install and configure the MCP server that connects Claude Code to Xcode. Use when setting up a new Apple development environment or adding Xcode automation to an existing project.
  • SwiftUI Project Setup: Create a new Xcode project optimized for AI-assisted development with SwiftUI, SPM, and the right file boundaries. Use when starting a new app for any Apple platform.
  • The Development Loop: The core build-run-screenshot-fix cycle that Claude Code uses to iterate on features autonomously. Use when writing or modifying SwiftUI views, debugging layout issues, or verifying user flows.
  • SwiftUI Architecture: Data layer, navigation, and state management patterns for personal apps. Use when deciding how to structure a new SwiftUI app or choosing between SwiftData, UserDefaults, and other persistence options.
  • TestFlight Distribution: Share apps with a small group via TestFlight internal testing or Ad Hoc distribution. Use when distributing an app to 2–3 people without the App Store.
  • Troubleshooting: Common pitfalls and fixes for Xcode builds, simulator issues, signing errors, and SwiftUI type-checker problems. Use when a build fails or the simulator misbehaves.

Code Design ​

  • Intention-Revealing Code: Names that reveal intent at the call site and contents that reveal intent at the read site — code should read as prose, not syntax. Use when naming or restructuring functions, or reviewing low-level code.

Code Style ​

  • Adding a New Lint Rule: Add a rule to the code-style linter, from capturing good and bad examples as fixtures to wiring up the rule implementation. Use when codifying a new formatting convention.
  • Bash Style: Bash script formatting including clean multiline strings with strip_indent. Use when writing or modifying bash scripts.
  • Code Style: Language-agnostic formatting rules — indentation, line length, braces, trailing commas, and comments. Use when writing or modifying any code file.
  • CSS Style: CSS formatting rules including one property per line. Use when writing or modifying CSS.
  • HTML Style: HTML formatting rules including boolean attributes. Use when writing or modifying HTML.
  • JavaScript Style: JavaScript formatting rules — double quotes, trailing commas, and consistent syntax. Use when writing or modifying JavaScript.
  • Markdown Style: Markdown formatting rules — backticks for code, reference-style links, and line length. Use when writing or modifying markdown.

Coding Agents ​

  • Agent Instructions: Keep standing agent instructions in a single AGENTS.md at the repo root, with CLAUDE.md a one-line pointer to it. Use when setting up or organizing per-repo agent instructions.
  • Claude Code Done Marker: Mark Claude Code sessions as done with a slash command so tooling can spot completed sessions by scanning JSONL transcripts. Use when automating session-completion tracking.
  • Claude Code Permissions: Configure Claude Code tool permissions (allow, ask, deny). Use when setting up permissions or syncing the recommended permission lists to the current machine.
  • Claude Code Remote Workflows: Monitor, continue, or start Claude Code sessions remotely from the Claude app on your phone while work runs on your Mac. Use when driving sessions away from your desk.
  • Claude Code Settings: Configure and sync Claude Code settings (default model). Use when setting up Claude Code or syncing recommended settings to the current machine.
  • Claude Code Status Line: Customize the Claude Code status bar with a script showing context usage, model, working directory, and repository branch. Use when tailoring the status line.
  • LLM Environment Tools: CLI tools that improve LLM coding agent tools: ripgrep, fd, fzf, DuckDB, git-delta, xh, watchexec, just, and semgrep. Use when setting up an AI-friendly development environment.
  • Pi Coding Agent: Setup, CLI commands, extensions, and workflows for Pi, the open-source minimal terminal coding agent. Use when working with Pi or comparing it to other coding agents.
  • Pi Permissions: Gate dangerous Pi tool calls via the pi-guardrails extension and a guardrails.json config. Use when adding permission prompts to Pi, which allows all tool calls by default.
  • Update AI Agent CLIs: Update Claude, Codex, Copilot, Antigravity, and Pi CLIs via Volta. Use when updating AI coding tools.

Design ​

  • Goals–Signals–Metrics Process: Choose product metrics top-down — goals first, then observable signals, then concrete metrics — instead of measuring whatever is easy. Use when defining what to track for a product or feature.
  • HEART Metrics: Google's HEART framework (Happiness, Engagement, Adoption, Retention, Task success) for measuring user experience at scale. Use when picking UX metrics for a large user base; pairs with the Goals–Signals–Metrics process.
  • Structured design decision process: Make design tractable by enumerating decisions, generating a few good options each, and evaluating candidates against believable scenarios. Use when a design problem feels like open-ended guessing.
  • Visual Language Through Style Tiles: Guide a conversation from intended user response to visual attributes to candidate directions, then compare style tiles side-by-side. Use before building UI to commit to a visual language.

Dev Tasks ​

  • Address FIXMEs: Find and resolve FIXME, TODO, and REFACTOR comments in specified files, prioritized by severity. Use when the user wants to clean up code annotations.
  • Dev Serve: Start a dev server on a safe port with worktree-aware ownership, automatic port allocation, and race-condition handling. Use when starting a dev server or hitting "port already in use" / EADDRINUSE errors.
  • Diagnose Root Cause: Hypothesis-driven debugging that identifies the root cause without applying fixes. Use when the user wants to understand why something is broken.
  • macOS Source Code Volume: Create a case-sensitive APFS volume at /Volumes/src for source code. Use when setting up a macOS development environment.

Dev Workflow ​

  • Plan: Turn an issue into a plan with a living end-to-end execution checklist across the whole lifecycle (plan, build, PR-ready, ship, deploy, cleanup), with proof-of-work evidence and human-review gates. Use when starting work on an issue and you want a scoped, watchable checklist before building.
  • Living E2E Checklist: Keep one live task list the human can watch start to finish, spanning the whole lifecycle (plan, build, PR-ready, ship, deploy, cleanup), not just coding. Write it early, work from it, keep it current.
  • Proof of Work: Emit concrete, checkable evidence (screenshots, captured command output, the rendered diff) so a human can verify each "it works" step fast, on top of tests. Use for any step whose point is confirming it works, especially UI work.
  • Work Tracking: Track a workstream with a committed WORK.md per worktree (purpose, done-when, status, session log) so any agent session can resume it or hand it off. Use for multi-session or parallel-worktree work.

Development Methods ​

  • Code vs. Scripts vs. Docs: Choose the right medium for a rule or procedure: code runs automatically, scripts run when invoked, docs only get read. Use when deciding where an invariant belongs so it actually holds.
  • Phased Migrations: Phased migrations for databases, secrets, and certificates that maintain backward compatibility at every stage. Use when changing stateful systems where a single-step change risks downtime or data corruption.
  • Refactoring: Restructure code in small verified steps — establish a verification mechanism, make one change, verify, commit or revert.
  • Test-Driven Development: One failing test, implement to pass, repeat.
  • Diagnose Root Cause: Hypothesis-driven debugging: form hypotheses, add targeted logging, analyze evidence, confirm.

Node.js ​

  • Auto Port Selection: Find an available port when the default is occupied. Use when running dev servers that may conflict on a fixed port.
  • Child Process Cleanup: Reliable termination of child process trees with pipe cleanup and exit handlers. Use when spawning long-lived processes that must not outlive the parent.
  • CJS Utilities in ESM: One-call bridge that gives ESM modules require, __filename, and __dirname. Use when ESM code needs CJS utilities or must load a CJS-only package.
  • CLI Subcommands: Directory-mirrored CLI architecture using Commander.js executableFile with co-located resources for nested CLI tools.
  • Database Migrations: Versioned, reversible SQL schema changes with a runner you own — each migration is plain SQL, applied state is tracked in the database, driven by CLI subcommands. Use when you want migrations without a framework like Knex or Umzug.
  • Dotpath Template Tag: Tagged template literal for constructing file paths with interpolation. Use when building paths from dynamic segments more cleanly than path.join() calls.
  • EJS with Includes and require(): Enhanced EJS rendering with require() support in templates, recursive includes, and linting. Use when server-side rendering HTML, SQL, or other structured text in Node.js.
  • Express Utility Handlers: Reusable middleware for blocking requests until async startup completes and sending 404 responses. Use when gating routes behind preconditions.
  • Express.js Core Patterns: App creation, settings, middleware pipelines, and route mounting. Use when starting or structuring an Express server.
  • file() Utility: Synchronous file reading that resolves paths relative to the calling module, not the working directory. Use when loading SQL queries, templates, or config files at module init time.
  • File Path Resolver: Single resolve() function that handles absolute, relative, and module paths from the caller's location. Use when you need flexible path resolution beyond path.join().
  • File-System Auto-Routing: Map directory structure to URL routes automatically, with [param] directory conventions. Use when you want Next.js-style file routing in plain Express.
  • Fix npm Vulnerabilities: Minimal, controlled fixes for npm audit vulnerabilities via package.json edits and overrides. Use when resolving npm security warnings.
  • Fractal Express Pattern: Use full Express instances — not Routers — as composable modules. Use when structuring a server with multiple independently testable concerns.
  • HTTP Error Classes: Class hierarchy for HTTP errors with automatic status codes and attachable details. Use when throwing structured errors that map to HTTP status codes.
  • Named SQL Parameters: Replace positional ? placeholders with readable :param names in SQL queries. Use when writing queries that accept input values.
  • Node.js child_process Functions: Guide to spawn, exec, execFile, and fork — choosing the right function based on synchronicity and shell usage. Use when running external commands from Node.js.
  • Node.js Module Patterns: ESM-first package.json setup, subpath exports, and private import aliases. Use when configuring module systems for a Node.js project.
  • npm Workspaces: Multi-package repository management with npm's built-in workspace support. Use when a repo contains multiple packages that share code.
  • Pretty Error Formatting: Turn dense stack traces into readable, color-highlighted output. Use in CLI tools or dev scripts where default Node.js errors are hard to read.
  • Promisified Server Startup: Wrap server.listen() in a promise returning url, port, and listener. Use when starting an HTTP server with await.
  • Proxy Middleware with Fallthrough: Proxy that falls through to the next handler on 404. Use when composing multiple backend servers behind a single entry point.
  • Publish to GitHub Packages: GitHub Actions workflow that publishes npm packages on version tags. Use when automating package publishing to GitHub Packages.
  • Versioning a skills package: SemVer rubric and release automation for skill/tool libraries. Use when choosing release levels.
  • Query Objects and Resource Classes: Namespace SQL queries into objects and wrap CRUD operations in static Resource class methods. Use when building a data access layer.
  • Request Logging Middleware: One structured log entry per request using canonical log lines. Use when replacing scattered console.log() calls with queryable structured logs.
  • Shell Command Tag: Tagged template literal that builds shell commands with automatic escaping to prevent injection. Use when executing shell commands with dynamic values from Node.js.
  • Simple RPC: Lightweight RPC layer using an ES6 Proxy client and Express middleware — call server methods as if local, no schemas required. Use when building internal APIs between browser and Node.js.
  • SQL Queries in Separate Files: Store SQL in .sql files for editor syntax highlighting and linting support. Use when queries are complex enough to benefit from dedicated files.
  • Watch Mode: Automatic rebuilds and retests on file changes using npm script watchers. Use when developing locally and you want continuous feedback on changes.
  • WHATWG Request/Response Adapter: Adapt Express to standard WHATWG Request/Response objects. Use when writing handlers portable across Node.js, Deno, and Cloudflare Workers.

Git ​

  • Commit: Two-command workflow for committing only the changes from the current session or specified files. Use when committing work.
  • Conflict Resolution: Strategies for resolving merge conflicts — simple merge, patch replay, and commit replay — while preserving the intent of all commits. Use when facing merge conflicts.
  • Git Fundamentals: Core git patterns for everyday development — status, diff, log, branching, tagging, stashing, and reset. Use as a reference during any git operation.
  • Uncommitted Changes: Detect uncommitted changes and derive path-safe branch names. Use in deployment scripts or CI pipelines that depend on repository state.
  • Worktrees: Separate working directories per branch sharing one repository. Use when you need multiple branches checked out simultaneously.

GitHub ​

  • Begin Work: Craft a self-contained prompt that gives an agent everything it needs to start or continue work on a GitHub issue in an isolated worktree. Use when delegating issue work to an agent.
  • CI Browser Tests: GitHub Actions workflow for running Playwright browser tests with headless Chromium. Use when adding browser test CI to a project.
  • GitHub CLI and Repository Patterns: Core patterns for the gh CLI — authentication, repository setup, and common operations. Use when setting up or interacting with GitHub repos from the command line.
  • GitHub Issue Editing: Safe editing of issue bodies and comments via temp files to avoid escaping corruption. Use when modifying GitHub issue content programmatically.
  • GitHub Issues: List open issues with their associated PRs, branches, and merge status. Use when deciding what to work on next.
  • GitHub Workflow: Four-phase development process — plan, implement, review, merge. Use when following a structured feature development workflow.
  • PR Review Comments: Fetch every review thread on a pull request via GraphQL so no comments are missed — including general and threaded review comments the REST endpoint omits. Use when responding to PR feedback.
  • Publish to GitHub Pages: GitHub Actions workflow that builds and deploys static sites. Use when automating deployment to GitHub Pages.
  • Pull Request Workflow: Full PR lifecycle — creation, review comment resolution, and GraphQL review threads. Use when creating or responding to pull requests.
  • Version on merge: Merge-triggered release automation that computes SemVer from surface diffs and publishes inline. Use when maintaining package release pipelines.

Google Cloud ​

  • App Engine Deployment: Safe deployment script that validates git state, derives version names, and tags deployments. Use when deploying a Node.js app to App Engine.
  • Cloud SQL Proxy Lifecycle: Manage Cloud SQL Proxy startup, socket/port coordination, and process cleanup for local development. Use when connecting a Node.js app to Cloud SQL locally.
  • Google Cloud General Patterns: gcloud CLI usage, project setup, service accounts, and credential management. Use when configuring Google Cloud authentication or project settings.

JavaScript ​

  • Async JavaScript Patterns: Promise combinators like allSettled, race timeouts, retries with backoff, and concurrency-limited mapping for async control flow.
  • Async Pipe: Compose async functions into a sequential pipeline where each step receives the previous output. Use when chaining multiple async transformations.
  • Deferred Promise: A promise whose resolve/reject are accessible from outside the executor. Use when the creator and settler of a promise are in different scopes.
  • Delay and Interval Utilities: Promise-based delays, random stagger for animations, and frame-synced intervals. Use when you need timing utilities in async code.
  • Non-Concurrent Operations: Lock class and nonConcurrent wrapper that serialize async operations. Use when only one instance of an operation should run at a time.
  • Progress Tracking: EventEmitter-based progress reporting for batch async operations and upload/API/parallel-task feedback.
  • Resolve All Promises: Prevent event loop hangs from unresolved promises in background async work. Use when running fire-and-forget async functions, background loops, or async iterator consumers.
  • Timer Patterns: Cancellable, awaitable timers with explicit state management and elapsed-time measurement. Use when scheduling one-shot actions or measuring durations.
  • Async Iterators with Repeater: Repeater library fundamentals: push/stop, backpressure, SlidingBuffer, merge, and latest combinators for building async iterables.
  • Chunking Async Iterables: Fixed-size batching for arrays and async streams. Use when processing data in bulk.
  • Debouncing Async Iterables: Collapse rapid async events into single values after a quiet period. Use when coalescing bursts from event sources.
  • Event to Async Iterator: Convert EventEmitter or EventTarget sources into async iterables with automatic cleanup. Use when bridging events to for await...of.
  • Multicasting Async Iterables: Fan out values from one async iterable to multiple subscribers. Use when multiple consumers need the same stream.
  • Dot-Path Property Access: Tagged template literal that safely traverses deeply nested properties like user.profile.address.city. Use when reading nested object paths known at definition time.
  • Filter Object: Create a new object containing only allow-listed keys. Use when sanitizing user input or stripping unexpected properties.
  • Options with Defaults: Merge user options and default options using spread or nullish coalescing. Use when a function accepts optional configuration.
  • Index File Re-exports: Barrel files that re-export directory modules through a single entry point, converting defaults to named exports. Use when organizing module imports into clean paths.
  • Automatic Resource Management: Create-use-dispose lifecycle that guarantees resource cleanup even when errors occur. Use when managing temp dirs, connections, or file handles.
  • Composable Schema Validation: Chainable validators with message overrides, nesting, and value coercion. Use when validating user input, form fields, or API payloads.
  • Enum Classes: Sealed, frozen enum instances with identity semantics and iteration. Use when you need a fixed set of named values that prevent invalid states.
  • Layered Dispatch: First-match routing that dispatches items to handlers based on predicate tests, like Express middleware. Use when processing heterogeneous collections where each item needs different treatment.
  • Readable Regular Expressions: Tagged template literals that build regex from named, composable pieces. Use when a regex is too complex to read as a single literal.
  • RelativeURL: URL subclass that works with relative paths without requiring an origin. Use in SPAs or server-side route generation where the origin is irrelevant.
  • Result Type: Frozen Result class with ok/err factories and a try() wrapper for explicit, non-throwing error handling in parsing, validation, and I/O paths.
  • Class-Based State Machines: EventEmitter-based state machine with lifecycle hooks and defined transitions for explicit workflows.
  • Random Utilities: Helper functions for random floats in a range, random integers, Fisher-Yates shuffle, and picking random elements. Use when you need randomness utilities beyond raw Math.random().
  • Unit-of-Work Telemetry: Accumulate context throughout a unit of work and emit one rich log entry when it completes. Extends to function-level tracing with automatic parent–child spans via AsyncLocalStorage. Use when implementing structured logging or tracing.
  • Custom Logger: Pino-based logger factory with auto-detected module names, Google Cloud severity mapping, and child loggers. Use when setting up structured logging for an application.
  • Browser Log Forwarding: Forward browser-side log entries and uncaught errors to a server endpoint so client and server logs appear in one stream. Use when building full-stack apps.

Personas ​

  • Full-Stack Software Engineer: Expert persona spanning system architecture, frontend/backend development, testing, performance, and DevOps. Use when you need an engineering perspective on architecture, trade-offs, or technical decisions.
  • Product Designer: Expert persona combining design psychology, visual design, interaction patterns, and UX research. Use when you need a design perspective on usability, layout, or interaction choices.
  • Product Manager: Expert persona bridging product strategy, requirements analysis, data-driven prioritization, and market intelligence. Use when you need a product perspective on scope, priorities, or user value.

Prompt Engineering ​

  • Adaptive Goal Decomposition: Extend the target convergence prompt with on-demand subgoals so agents decide dynamically whether to work directly or decompose. Use when writing prompts for complex tasks that benefit from incremental decomposition.
  • Prompt Structure: A structural template and core principles for writing prompts, drawn from Anthropic's prompting guidance. Use when drafting or revising any prompt.
  • Session Continuity Protocol: A file-based protocol giving agents continuity across independent sessions via three artifacts and a strict session loop. Use when work spans multiple sessions that each start with no memory.
  • Structured Prompt Template: A six-section template that gives every prompt a predictable shape, so agents know what to read, fill in, and produce. Use when you want reusable prompts with clear input and output contracts.
  • Target Convergence Prompt: Prompt pattern that defines acceptance criteria and a convergence loop so agents iterate until the end state is met. Use when writing prompts for tasks that need self-correcting iteration.
  • Task List: Structured task files with ordered steps, verification checks, and execution notes for multi-session continuity. Use when organizing agent work into trackable, resumable units.
  • Test Plan as Spec: Write the test plan first as the authoritative spec — each acceptance criterion holds the exact test code that must pass, so spec and tests can't drift. Use when specifying a feature you'll verify with tests.
  • Test-Driven Development: One-test-per-task workflow where agents write a failing test first, then implement the minimum code to pass. Use when guiding agents through feature work with built-in verification.

Retrospective ​

  • Retrospective: Structured retrospective on a chunk of agent work, filed as a GitHub issue — mistakes root-caused and fixes routed to durable homes (global config, hooks, skills, per-repo ADRs, prompt templates) to change future agent behavior. Use when the user asks for a retro, post-mortem, or lessons learned.

Security ​

  • Collect Secrets: Get a secret value from a human into a destination (a GitHub repo secret, a Cloudflare Worker secret, or a gitignored .dev.vars file) without leaking it, via a collocated tool. Use when collecting a secret instead of hand-rolling a paste script.
  • HTTPS: Serve HTTPS and keep it served — decide who terminates TLS (a platform may already, in which case you build nothing), pick the right ACME challenge, and install the renewal scheduler before issuing so the first run proves the renewal path. Use when a service needs HTTPS on a host you operate.

Testing ​

  • Evals: Test whether an agent produces correct outputs and takes the right actions across single- or multi-turn conversations, with eval files (*.eval.md) living beside the code. Use when checking agent behavior, not just code.
  • In-Browser Testing: Lightweight in-browser test runner with HTML fixtures and method stubs, plus a Playwright CI bridge. Use when tests should live in the same file as the code being tested.
  • JavaScript Testing: Testing patterns using the Node.js test runner and node:assert/strict — test exports, signatures, and observable behaviors. Use when writing or running tests in Node.js.
  • LLM-Judged Specs: Codify persistent assertions about a codebase that an LLM judge checks by reading — doc freshness, convention adherence, cross-reference accuracy — with spec files (*.spec.md) beside what they describe. Use for properties code can't easily check.
  • Playwright Browser Testing: End-to-end browser testing with Playwright and Chromium, including GitHub Actions CI setup. Use when tests need a real browser for navigation, clicks, or screenshots.
  • Playwright Mouse Cursor: Inject a visible mouse cursor overlay into Playwright pages. Use when screenshots, recordings, or demos need to show cursor position.
  • Playwright Screenshots: Retina-quality screenshots with custom viewports, cursor overlays, and tooltip capture. Use when capturing polished screenshots for documentation or design review.
  • Screenshot Diff Testing: Visual regression testing that commits screenshots to git and uses git diff for pass/fail. Use when verifying visual output changes with human approval.

Web ​

HTML, CSS, JavaScript, browser APIs, and the full web platform — including web components, animations, modals, URL state, accessibility, prototyping, browser HTTP, Playwright browser automation, Vue, Vite, and VitePress.

  • Roving Tabindex: Accessibility pattern with one tab stop, arrow-key item movement, and Tab-to-exit behavior for composite widgets.
  • Animate Overlay from Trigger: Use the View Transitions API to morph overlays from their trigger element for spatial continuity.
  • Animated SVGs: CSS keyframe animations inside SVG with custom properties for parametric control.
  • Animated Collection Updates: View Transitions API for animating sorted/filtered collection elements.
  • Multi-Page App Layout Stability: Prevent UI flicker during MPA navigation with view-transition-name.
  • Chrome DevTools MCP: Install Chrome DevTools for agents 1.0 as a Claude Code plugin, connect to a running browser session via auto-connect or remote debugging port, and run Lighthouse audits and Core Web Vitals analysis. Use when setting up or using Chrome DevTools MCP.
  • Playwright CLI: One-shot browser commands for screenshots, PDFs, and codegen.
  • Persistent Browser: Long-lived Chromium session for observe-then-act workflows.
  • Site Interaction: Discover and drive a site's backend API by inspecting its frontend network calls.
  • Authentication: Playwright session persistence and secure credential storage.
  • Binary File Handling: Upload and download files across the Node-to-browser boundary in Playwright.
  • Content Diffing: Detect what changed before pushing content to a remote destination.
  • Browser HTTP: Thin fetch wrapper and pre-configured Axios client with error handling and connection-status interceptors.
  • Local Dev No Cache: Hostname-based localhost detection that bypasses the browser cache during development.
  • Encapsulation: Light DOM vs shadow DOM — when to encapsulate component styles.
  • Extension Patterns: CSS-first patterns for shipping custom elements with sensible defaults and clean override surfaces.
  • Async Component Loading: Fetch component HTML files on demand.
  • Document Bootstrap: Clone a <template>, discover bindings, and return a reactive render function powered by Vue's effect().
  • HTML Includes: Runtime HTML composition via <html-include> elements.
  • Reactive DOM Binding: Plugin-based binding system with seven binding types and TreeWalker traversal.
  • Publishing Web Components: Publish web components as standard ES modules — unbundled, unminified, not transpiled to CommonJS — so consumers handle bundling. Use when packaging custom elements for distribution.
  • Single-File Component Authoring: Authoring rules for a self-contained custom element in one HTML file (a <template> plus a <script>, no build step) that stays readable and collision-free. Use when hand-authoring a drop-in custom element.
  • CSS Centering: Modern centering methods for block containers, grid, flexbox, absolute positioning, anchor positioning, and text.
  • Focus Styling: Global :focus-visible outline with a --color-focus token.
  • CSS Color Scales: Perceptually uniform color palettes from a seed color using LCH, chroma easing, and gamma correction.
  • Dynamic Styles: Runtime style changes via CSS custom properties or CSS-in-JS template literals.
  • Text Highlighting: CSS Custom Highlight API for painting text ranges without modifying DOM structure.
  • Clipboard Copy with Universal Fallback: Copy text with a three-tier fallback so it works outside secure contexts — on http://, file://, or when permission is denied. Use in self-contained artifacts.
  • Better DOM API: Convenience wrappers for querying, traversal, and event handling across Document, DocumentFragment, and Element.
  • Declarative Element Behavior: Bind JavaScript behavior to DOM elements via CSS selectors and HTML attributes.
  • DOM Factory: Helpers for creating elements, text nodes, fragments, and parsed HTML in single expressions.
  • Semantic Selectors: ARIA and semantic attribute selectors for styling, behavior, and testing.
  • Semantic DOM Snapshot: Strip non-semantic noise from a page and extract a minimal semantic representation.
  • Keyboard Shortcut Listener: Declarative, element-scoped keyboard shortcut binding.
  • Visual DOM Snapshots: Clone live DOM with inlined CSS into a self-contained HTML string.
  • CSS Anchor Positioning: Native browser positioning for tooltips, dropdowns, and popovers that stay in viewport.
  • Button Layout Stability with Dynamic Content: CSS grid stacking for stable button layouts when text changes between states.
  • Clickable Container with Child Controls: Full-area click targets that also contain independently clickable child controls.
  • Popover API for Overlays: Use the native Popover API for transient floating surfaces (popups, panels, toasts) instead of hand-rolling z-index and global listeners. Use for overlays that dismiss on outside click or Escape.
  • Inert Controller: Reference-counted inert attribute management for nested overlays.
  • Reference Counting Lock: Shared lock that stays active until every caller releases it.
  • Scroll Lock: Prevent page scrolling behind modals with iOS Safari workarounds.
  • Reactive Page URL: EventTarget wrapper around the Navigation API with reactive URL param composables.
  • Hot Reload for Local HTML Files: A dependency-free poller you embed in a self-contained HTML artifact so the reviewer never refreshes by hand; it reloads on change but only on localhost, staying inert as file://. Use when iterating on a single HTML file.
  • Browser Module System: Promise-based registry for sharing code between <script> blocks without a bundler.
  • CDN Icons with SVG Sprites: Fetch an SVG sprite sheet from a CDN and render icons via a <ui-icon> web component.
  • Load Packages from CDN: Load npm packages directly from CDN without npm install.
  • Deploy a Small Stateful Web App: Deploy a Cloudflare Worker + D1 app via Cloudflare MCP, with persistent data, optional password gate, and no build step. Use when an agent should ship full-stack state.
  • Single-File HTML App: Self-contained HTML with embedded styles, scripts, and CDN dependencies.
  • Transmogrifier: Rapidly explore a complex design space and converge on a final design.
  • Vite Configuration: MPA mode, HTML entry-point discovery, path aliases. Use when starting or configuring a Vite project.
  • Vite HTML Includes Plugin: Build-time HTML composition via <link rel="include"> fragments.
  • Vue Multi-Page Application: Architecture where each page is a standalone Vue app.
  • VitePress Auto Nav: Auto-generate nav and sidebar config from the file system.
  • VitePress Breadcrumbs: Render a breadcrumb trail above each page title, derived from ancestor directories, each crumb linking to a section page or heading anchor. Use when nested docs benefit from showing where a page sits.
  • VitePress Linked Assets: Make relative links to non-markdown files resolve on the docs site.
  • VitePress Copy Buttons: Add copy-link and copy-markdown buttons to every page.
  • VitePress File a Bug Button: Open the GitHub issue form with the current page URL pre-filled.
  • VitePress Homepage Hero: Style a landing page with hero section, action buttons, and feature cards.
  • VitePress Search: Tune VitePress local search for code-heavy docs: every term must match, partial identifiers resolve, camelCase splits, each page appears once, and results show excerpts. Use when default results are noisy.
  • Vue Input Component: Styled text input with floating label and v-model support.
  • Vue Select Component: Custom-styled select dropdown backed by a native <select> for full accessibility.
  • Vue ValidationErrors Component: Styled error box that renders only when errors are present.
  • Vue useDataLoader Composable: Reactive wrapper for async data fetching with loading, loaded, and error states.
  • Vue useForm Composable: Form state management with validation, submission, and automatic re-validation.
  • Vue useProgress Composable: Reactive progress tracker for batch async operations.
  • Vue useInert Composable: Composable wrapper around InertController for making background content non-interactive.
  • Vue useScrollLock Composable: Composable wrapper around ScrollLock with automatic cleanup on unmount.
  • Vue useShowHide Composable: Reactive toggle for overlay visibility with an optional associated value.
  • Vue Watcher Class: Stateful wrapper around Vue's watch() with explicit start/stop lifecycle control.
  • Vue Autofocus Directive: Custom directive that focuses the first focusable element on mount.

Writing Style ​

  • Clear Writing: Techniques for knowing what matters, building a hierarchy of points, and cutting noise. Use when writing or modifying prose.
  • Dashes and Hyphens: Rules for hyphens, en dashes, and em dashes with keyboard shortcuts. Use when writing or modifying prose.
  • What Before Why or How: Lead every document and section with the main idea before explaining context. Use when writing or modifying prose.
  • Writing Style: Core writing standards — active voice, conciseness, parallel structure, sentence-case headings, and formatting rules. Use when writing or modifying prose.