Skill Catalog
This page is auto-generated by bin/generate-skill-docs.mjs from every skill under skills/*/SKILL.md. Do not edit by hand — regenerate with node bin/generate-skill-docs.mjs.
52 skills available.
| Skill | What it's for | Use case | Install | Deep dive |
|---|---|---|---|---|
| agent-browser | Provides a fast CLI for browser automation over Chrome/Chromium via CDP, using accessibility-tree snapshots and compact element references to navigate pages, click, fill forms, take screenshots, and… | navigating or interacting with web pages in the browser — opening URLs, clicking elements, filling forms, taking screenshots, scraping data, or automating any browser task | skills add -g catesandrew/skills --skill skills/agent-browser | Read more |
| ai-governance | Tracks AI coding session metrics and adds standardized attribution trailers to commits and pull requests, generating a session report for auditability, cost estimation, and ROI measurement across any… | committing AI-assisted code or opening a pull request to add standardized AI attribution trailers, track session metrics, and generate a PR session report | skills add -g catesandrew/skills --skill skills/ai-governance | Read more |
| audit-a11y-code | Performs a static, source-code accessibility review of a component or template, checking semantic structure, ARIA usage, keyboard access, forms, tables, and contrast against WCAG 2.1 AA criteria. | you need a static accessibility review of a component, template, or markup file — checks semantic structure, ARIA usage, keyboard access, forms, tables, and contrast against WCAG 2.1 AA | skills add -g catesandrew/skills --skill skills/audit-a11y-code | Read more |
| audit-react-component | Reviews a React component for hooks correctness, render performance, memoization, controlled vs. uncontrolled inputs, props stability, and React 18/19 compatibility, producing actionable fixes and… | you need a thorough review of a React component for hooks correctness, render performance, memoization, controlled vs uncontrolled inputs, and React 19 compatibility | skills add -g catesandrew/skills --skill skills/audit-react-component | Read more |
| chrome-audit-bundles | Uses Chrome DevTools MCP to collect and sort resource timing data for a page, identifying oversized JavaScript/CSS bundles, missing cache headers, and protocol inefficiencies. | you need to identify oversized JavaScript/CSS bundles and caching issues via Chrome DevTools MCP — surfaces heavy assets, missing cache headers, and protocol inefficiencies | skills add -g catesandrew/skills --skill skills/chrome-audit-bundles | Read more |
| chrome-audit-console | Instruments a page's console via Chrome DevTools MCP, runs a reproduction flow, and collects and summarizes runtime errors and warnings such as React warnings, failed network calls, and unhandled… | you need to capture and categorize console warnings and errors during a reproduction window via Chrome DevTools MCP — useful for diagnosing runtime errors, React warnings, and failed network calls | skills add -g catesandrew/skills --skill skills/chrome-audit-console | Read more |
| chrome-audit-css | Uses Chrome DevTools MCP to compare computed styles against authored CSS rules for a target element, revealing cascade winners, specificity conflicts, and dead or overridden declarations. | you need to audit CSS cascade for a specific element via Chrome DevTools MCP — reveals computed styles, matching rules, specificity conflicts, and overridden/dead declarations | skills add -g catesandrew/skills --skill skills/chrome-audit-css | Read more |
| chrome-audit-network | Captures and summarizes network activity for a page or user flow via Chrome DevTools MCP, identifying slow requests, large payloads, and API call patterns grouped by initiator type. | you need to capture and summarize network activity for a page or user flow via Chrome DevTools MCP — identifies slow requests, large payloads, and API call patterns | skills add -g catesandrew/skills --skill skills/chrome-audit-network | Read more |
| chrome-audit-performance | Uses the Performance API via Chrome DevTools MCP to snapshot navigation timing, Core Web Vitals (FCP, LCP), and the largest resource contributors for a page, as a fast baseline alternative to a full… | you need client-side performance metrics from a running page via Chrome DevTools MCP — captures navigation timing, Core Web Vitals (FCP, LCP), and largest resource contributors | skills add -g catesandrew/skills --skill skills/chrome-audit-performance | Read more |
| chrome-debug-screenshot | Systematically diagnoses failing Chrome DevTools MCP screenshot calls by trying multiple path, uid, frame, and clip parameter combinations in order and reporting which one works. | Chrome DevTools MCP screenshot calls are failing or producing unexpected results — systematically diagnoses path, uid, frame, and clip parameter issues | skills add -g catesandrew/skills --skill skills/chrome-debug-screenshot | Read more |
| chrome-diff-screenshot | Captures a targeted element or full-page screenshot via Chrome DevTools MCP and compares it against a saved baseline for visual regression testing, reporting a pixel mismatch percentage or pass/fail… | you need to capture a screenshot for visual regression comparison via Chrome DevTools MCP — saves current state alongside a baseline for diffing with pixelmatch or similar tools | skills add -g catesandrew/skills --skill skills/chrome-diff-screenshot | Read more |
| chrome-dump-storage | Reads and summarizes browser storage state (localStorage, sessionStorage, and optionally cookie names) via Chrome DevTools MCP, automatically redacting sensitive values for debugging authentication… | you need to inspect browser storage state (localStorage, sessionStorage, cookies) after running a flow via Chrome DevTools MCP — useful for debugging authentication, feature flags, and persisted state | skills add -g catesandrew/skills --skill skills/chrome-dump-storage | Read more |
| chrome-inspect-a11y | Produces a live accessibility report for a running page or specific element via Chrome DevTools MCP, checking ARIA roles, names, relationships, keyboard focus, and approximate contrast against WCAG… | you need a live accessibility snapshot of a running page or specific element via Chrome DevTools MCP — checks roles, names, relationships, keyboard focus, and contrast | skills add -g catesandrew/skills --skill skills/chrome-inspect-a11y | Read more |
| chrome-inspect-element | Deeply inspects a single DOM element via Chrome DevTools MCP, retrieving computed styles, layout box, accessibility properties, and outerHTML, and saving a screenshot for diagnosing layout or CSS… | you need to deeply inspect a single DOM element via Chrome DevTools MCP — retrieve computed styles, layout box, accessibility properties, outerHTML, and save a screenshot | skills add -g catesandrew/skills --skill skills/chrome-inspect-element | Read more |
| chrome-run-flow | Executes an ordered sequence of user interactions such as clicks, typing, selecting, and checking via Chrome DevTools MCP, then captures a screenshot of the resulting UI state to quickly validate a… | you need to execute a sequence of user interactions (click, type, select, check) and capture the resulting UI state via Chrome DevTools MCP — useful for validating micro-flows and capturing end states | skills add -g catesandrew/skills --skill skills/chrome-run-flow | Read more |
| commit-message | Generates a conventional commit message from the staged diff and relevant recent session context, then uses that exact message to create the git commit while preserving explicit testing status and… | Generate a conventional commit message from staged git changes and recent Codex session context, then commit with that exact message. Use when the user wants the staged changes committed with a… | skills add -g catesandrew/skills --skill skills/commit-message | Read more |
| data-table-builder | Guides building React/Next.js data tables on a layered, type-safe architecture that separates URL state (via nuqs) from table state (via useDataTable), keeps column definitions declarative through… | Build React/Next.js data tables following the typed URL-state architecture with nuqs, useDataTable, column factories, and external cell components. Use when the user wants to create a new data table,… | skills add -g catesandrew/skills --skill skills/data-table-builder | Read more |
| design-critique-loop | Runs an iterative screenshot self-critique loop that renders a frontend build with a headless browser, reviews the screenshots with vision like an adversarial design director, fixes what it finds,… | a frontend build needs to be iteratively judged on how it actually looks rendered, not just whether the code compiles or lints clean — a single page/component, or many built in parallel, each needing genuine visual polish rather than "plausible AI output." Covers the screenshot self-critique loop: a small headless-browser harness renders the real page at multiple viewports and scroll depths, the agent reads its own screenshots with vision and critiques them like a hostile design director, fixes what it finds, then adds one deliberate complexity upgrade so iteration converges on distinctive rather than bland-safe | skills add -g catesandrew/skills --skill skills/design-critique-loop | Read more |
| dithered-motif-site | Provides the full pipeline for building an animated, pointer-reactive, Bayer-dithered dot-field background from a described subject, covering Higgsfield image and video prompt authoring, ffmpeg frame… | building a "dithered particle-field" animated hero/background — a still or video subject made of many small discrete elements (sparks, falling ash, a rose window, a flock, crowds, falling particles, repeated architecture) rendered as an animated Bayer-dithered dot field on a canvas, with pointer-reactive warp, used as a full-bleed page background | skills add -g catesandrew/skills --skill skills/dithered-motif-site | Read more |
| excel-like-table-navigation | Implements Excel-like keyboard navigation for React tables using a roving tabindex, a cell-registration system, arrow/Tab/Enter/Escape handling, and a two-layer core-hook plus adapter design that… | Excel-like keyboard navigation for React tables — roving tabindex, a cell-registration system, arrow/Tab/Enter/Esc handling, and a two-layer core-hook + adapter design. Use when adding keyboard… | skills add -g catesandrew/skills --skill skills/excel-like-table-navigation | Read more |
| frontend-quality-loop | Auto-detects a frontend project's stack from package.json and iteratively raises code quality by running accessibility, performance, type-safety, and patterns/correctness review lenses, applying… | you want to iteratively raise the quality of frontend code to a satisfactory bar — auto-detects the stack from package.json, runs accessibility, performance, type-safety, and patterns/correctness lenses, applies fixes, and loops until the code is clean and verified | skills add -g catesandrew/skills --skill skills/frontend-quality-loop | Read more |
| frontend-scaffold | Generates or wires frontend plumbing — feature flags, environment variables, API endpoint clients, or logging — into an existing project by first detecting and matching its existing conventions,… | you need to generate or wire frontend plumbing — feature flags, environment variables, API endpoint clients, or logging setup — into an existing project, following the project's detected conventions rather than judging code quality | skills add -g catesandrew/skills --skill skills/frontend-scaffold | Read more |
| generate-angular-storybook | Generates an Angular component's Storybook integration — a harness component, a CSF3 stories file, and MDX documentation — deriving file paths, names, and selectors automatically from a single… | you need to generate Angular Storybook harness component, CSF3 stories file, and MDX documentation for an Angular component — auto-derives paths and names from a single component file path | skills add -g catesandrew/skills --skill skills/generate-angular-storybook | Read more |
| graph-react-deps | Builds a directed Mermaid component dependency graph for a Next.js or React page by recursively tracing JSX usage, render props, and compound components from a page entry point, prioritizing coverage… | you need a Mermaid component dependency graph for a Next.js or React page — traces JSX usage, render props, and compound components recursively from a page entry point | skills add -g catesandrew/skills --skill skills/graph-react-deps | Read more |
| graph-react-render-tree | Builds a readable Mermaid render tree for a Next.js or React page, grouping components by folder boundary, deduplicating nodes, annotating render-prop and compound-component edges, and identifying… | you need an optimized, readable Mermaid render tree for a Next.js or React page — groups by folder, deduplicates nodes, annotates render-prop and compound-component edges, and identifies leaf nodes to mock in tests | skills add -g catesandrew/skills --skill skills/graph-react-render-tree | Read more |
| jira-estimate | Estimates how long a Jira ticket would take for AI to implement, expressed as story points and AI time, by fetching ticket details, analyzing the codebase, and scoring complexity across five weighted… | the user wants to estimate how long a Jira ticket would take for AI to implement, expressed as story points and AI time, based on codebase analysis and complexity scoring | skills add -g catesandrew/skills --skill skills/jira-estimate | Read more |
| microservice-docs | Generates and maintains comprehensive, production-grade microservice documentation purely from static code analysis, covering READMEs, C4 architecture diagrams, API contracts, OpenAPI specs, data… | creating a new service, updating APIs, changing configs, modifying deployments, or when documentation is missing or outdated and needs comprehensive microservice documentation generated from static code analysis | skills add -g catesandrew/skills --skill skills/microservice-docs | Read more |
| nextjs-react-query-cache-coordination | Coordinates Next.js App Router caching layers with React Query to guarantee read-your-own-writes, covering Router Cache versus Data Cache, updateTag versus revalidateTag, hydration timestamp races,… | Coordinate Next.js App Router caching layers with React Query to guarantee read-your-own-writes — covers Router Cache vs Data Cache, updateTag vs revalidateTag, hydration timestamp races, initialData… | skills add -g catesandrew/skills --skill skills/nextjs-react-query-cache-coordination | Read more |
| nuqs-url-state | Guides implementation of type-safe, shareable URL state management in Next.js applications using nuqs, covering parser registries, client and server usage, serializers, and migration from useState. | Implement type-safe URL state management with nuqs for Next.js applications. Use when adding shareable/bookmarkable state to components, managing filters/search/pagination in URLs, or replacing… | skills add -g catesandrew/skills --skill skills/nuqs-url-state | Read more |
| point-cloud-assembly-scene | Builds WebGL/Three.js scenes composed entirely of parametrically sampled points that drift as loose dust and assemble into shape on scroll or interaction, covering arc-length-accurate shape… | building a WebGL/Three.js scene where forms are made entirely of points sampled from parametric math (no imported geometry, no scans) that drift as loose dust and assemble into shape on scroll or interaction, then exhale back apart | skills add -g catesandrew/skills --skill skills/point-cloud-assembly-scene | Read more |
| pr-ado-code-review | Performs a systematic, file-by-file review of an Azure DevOps pull request and posts inline thread comments plus a vote directly to the PR via the Azure CLI and REST API, prioritizing correctness,… | the user wants a thorough code review on an Azure DevOps pull request, with inline thread comments posted directly to the PR via the Azure CLI and ADO REST API | skills add -g catesandrew/skills --skill skills/pr-ado-code-review | Read more |
| pr-ado-open | Pushes the active branch and opens an Azure DevOps pull request with a structured description, linked work items, reviewers, and optional auto-complete policy in a single pass. | the user says "open a PR", "create a pull request", or "submit a PR" against an Azure DevOps repository and needs the branch pushed and PR created with a structured description, linked work items, reviewers, and auto-complete policy | skills add -g catesandrew/skills --skill skills/pr-ado-open | Read more |
| pr-gh-code-review | Performs a systematic, file-by-file review of a GitHub pull request and posts inline comments plus a verdict directly to the PR via the GitHub CLI and API, prioritizing correctness, security,… | the user wants a thorough code review on a GitHub pull request, with inline comments posted directly to the PR via the GitHub CLI and API | skills add -g catesandrew/skills --skill skills/pr-gh-code-review | Read more |
| pr-gh-open | Pushes the active branch and opens a GitHub pull request with a structured description, linked ticket, reviewers, and labels in a single pass. | the user says "open a PR", "create a pull request", or "submit a PR" against a GitHub repository and needs the branch pushed and PR created with a structured description, linked ticket, reviewers, and labels | skills add -g catesandrew/skills --skill skills/pr-gh-open | Read more |
| procfile-manager | Manages multi-process local development stacks defined in a Procfile by discovering the Procfile, parsing its processes, selecting the best available runner (Overmind, hivemind, or foreman), and… | Manage multi-process dev stacks via Procfile. Detects Procfile in the project, parses process names, and routes start/stop/restart/logs through the appropriate runner (Overmind, foreman, hivemind).… | skills add -g catesandrew/skills --skill skills/procfile-manager | Read more |
| react-component-patterns | Guides the design of better React component APIs and structure, favoring early returns over inline conditional rendering for mutually exclusive states and discriminated unions over boolean prop flags… | Guide for designing better React component APIs and structure. Use when writing or reviewing React components — especially for conditional rendering of multiple states, boolean prop flags, component… | skills add -g catesandrew/skills --skill skills/react-component-patterns | Read more |
| react-hooks-closures | Guides writing correct React hooks code that avoids stale closures, covering dependency array discipline, React.memo comparison pitfalls, the latest ref pattern, and the experimental useEffectEvent… | Guide for writing correct React hooks code that avoids stale closures. Use when writing or reviewing useEffect, useMemo, useCallback, or React.memo code — especially when dealing with dependency… | skills add -g catesandrew/skills --skill skills/react-hooks-closures | Read more |
| react-query-cache-determinism | Provides patterns for deterministic React Query cache updates on CRUD mutations, covering cancel-in-flight requests, updating all related caches, correct merge semantics for patch versus create,… | Deterministic React Query cache updates for CRUD mutations — cancel-in-flight, update all related caches, correct merge semantics (deep-merge for patch, replace for create), optimistic status for… | skills add -g catesandrew/skills --skill skills/react-query-cache-determinism | Read more |
| react-query-patterns | Guides writing correct, performant TanStack React Query v5 code, covering query key design, mutation and cache invalidation patterns, render optimizations, TypeScript type safety, and the mental… | Guide for writing correct, performant TanStack React Query (v5) code. Use when writing or reviewing React Query code — covering query key design, mutations and cache invalidation, render… | skills add -g catesandrew/skills --skill skills/react-query-patterns | Read more |
| react-ref-callbacks | Guides using callback refs instead of useRef plus useEffect for DOM node interactions such as focusing, scrolling, measuring, or observing nodes, including React 19 ref cleanup functions and… | Guide for using callback refs instead of useRef + useEffect for DOM node interactions. Use when writing code that needs to focus, scroll, measure, or observe DOM nodes after render — especially with… | skills add -g catesandrew/skills --skill skills/react-ref-callbacks | Read more |
| react-use-state | Guides correct useState and useReducer usage in React, covering avoiding derived state, syncing props to state via keys instead of effects, functional updaters, lazy initializers, and choosing… | Guide for correct useState and useReducer usage in React. Use when writing or reviewing state management code — especially for derived state, initializing state from props, functional updaters,… | skills add -g catesandrew/skills --skill skills/react-use-state | Read more |
| reflect-instructions | Provides an evidence-based workflow for analyzing an AI agent instruction file such as AGENTS.md or CLAUDE.md against observed conversation failures and proposing minimal, approved improvements. | you need to analyze and improve an AI agent instruction file (AGENTS.md, CLAUDE.md, GEMINI.md, or similar) based on observed failure patterns, misunderstandings, or gaps in the current conversation | skills add -g catesandrew/skills --skill skills/reflect-instructions | Read more |
| scroll-video-site | Builds a full-bleed, scroll-scrubbed video landing page where scroll position maps to a video's currentTime, covering a damped-playhead seek-coalescing engine, Lenis smooth scrolling wired through… | building a full-bleed, scroll-scrubbed video landing page — a single cinematic video file (an 8-40s continuous camera-move clip) sits fixed behind the page and scroll position maps directly to the video's currentTime, with synchronized chapter content, GSAP ScrollTrigger, Lenis smooth scrolling, and an optional autoplay "tour" control for hands-off viewing | skills add -g catesandrew/skills --skill skills/scroll-video-site | Read more |
| session-wrap | Wraps up a working session into a durable dossier containing a resume pointer, summary, lessons learned, architecture notes, ADRs, follow-ups, and a sanitized public blog post, reconstructed from git… | Wrap up a working session into a durable dossier — a resume pointer for picking the work back up in a fresh session, a summary of what was done, lessons learned, architecture notes, ADRs for… | skills add -g catesandrew/skills --skill skills/session-wrap | Read more |
| spec-kit-skill | Integrates the GitHub Spec-Kit CLI's seven-phase constitution-driven workflow for feature development, covering constitution, specify, clarify, plan, tasks, analyze, and implement phases within the… | GitHub Spec-Kit integration for constitution-based spec-driven development. 7-phase workflow (constitution, specify, clarify, plan, tasks, analyze, implement). Use when working with spec-kit CLI,… | skills add -g catesandrew/skills --skill skills/spec-kit-skill | Read more |
| swagger | Adds inline Swagger/OpenAPI JSDoc to Next.js App Router API route handlers, matching the real HTTP contract without changing runtime behavior, with an optional combined mode that also adds TSDoc to… | the user wants Swagger/OpenAPI JSDoc added or updated on Next.js App Router route handlers, or wants combined Swagger and TSDoc on the same route file | skills add -g catesandrew/skills --skill skills/swagger | Read more |
| tanstack-table-patterns | Guides building production-grade tables with TanStack Table v8 in React, covering the meta object pattern, editable tables, dynamic column schemas, row validation, server-side row model ordering,… | Guide for building production-grade tables with TanStack Table (v8) in React. Use when creating or reviewing data tables — covering the meta object pattern, editable tables, dynamic column schemas,… | skills add -g catesandrew/skills --skill skills/tanstack-table-patterns | Read more |
| tsdoc | Adds inline TSDoc to staged TypeScript code with deeper documentation for exported APIs, concise comments for non-trivial internal helpers, and no intended runtime behavior changes. | Add expert-level inline TSDoc to staged TypeScript code. Use when the user wants exported APIs documented thoroughly, internal helpers documented concisely, and TSDoc blocks inserted directly into… | skills add -g catesandrew/skills --skill skills/tsdoc | Read more |
| typescript-type-safety | Guides writing safer TypeScript using compiler flags and type patterns, covering optional versus required-but-undefined semantics, safe index access, exhaustive discriminated union matching,… | Guide for writing safer TypeScript using compiler flags, type patterns, and anti-pattern avoidance. Use when writing or reviewing TypeScript code — especially for index signatures, Record types,… | skills add -g catesandrew/skills --skill skills/typescript-type-safety | Read more |
| ui-engineer | Provides an expert UI engineering persona for implementing production-ready frontend solutions with TypeScript and modern frameworks, covering component architecture, state management, accessibility,… | you need expert UI engineering assistance — implements production-ready frontend solutions with TypeScript, modern frameworks (React/Vue/Angular), accessibility, and performance best practices | skills add -g catesandrew/skills --skill skills/ui-engineer | Read more |
| zod-repair | Refactors staged Zod schemas conservatively while preserving public contracts, and adds regression tests covering initialization cycles, map/record behavior, union drift, and parse breakage. | the user wants staged Zod schemas refactored safely, wants regression tests for init cycles, map/record behavior, union drift, or parse breakage, or wants schema cleanup without changing public contracts | skills add -g catesandrew/skills --skill skills/zod-repair | Read more |
| zustand-patterns | Guides writing well-structured Zustand stores in React, covering atomic selector hooks, separating actions from state, event-based action design, and using React Context to scope reusable stores… | Guide for writing well-structured Zustand stores in React. Use when creating or reviewing Zustand stores — covering store organization, selectors, action patterns, combining stores with React Query… | skills add -g catesandrew/skills --skill skills/zustand-patterns | Read more |