Docs
Each page below is a skill's SKILL.md
file, exactly as your agent reads it. There's no separate summary, so the docs can't fall
out of date with what the skill actually does.
Start with design-system, which runs the five pipeline phases in order. The four passes at the bottom are optional clean-ups you run afterwards.
1174 lines across 10 skills.
Pipeline
Builds a design system for a codebase and keeps it enforced, by running five phases in order: measure the spacing, type and color values in use, settle the design decisions with the user, write them as tokens, update the code to use the tokens, and install a linter. Use when the user wants a design system, says their UI is inconsistent, or asks to standardize spacing, type or color.
Lists every spacing, type, color, radius, shadow and motion value a codebase uses and how often, finds near-duplicates and one-off values, and counts how many existing values each candidate scale would fit. Produces .design/drift.json. Use as phase 1 of design-system, or when the user asks how inconsistent their UI is.
Interviews the user to settle every design system decision, asking in dependency order and writing an HTML preview for each round so the user chooses by looking instead of reading numbers. Produces .design/decisions.json. Use as phase 2 of design-system, after design-extract.
Turns settled design decisions into Tailwind theme tokens, a DESIGN.md file that states the rules for future agents, and short written notes for the decisions that are expensive to reverse. Use as phase 3 of design-system, after design-grill.
Updates a codebase to use the design tokens from design-ratify, in four batches ordered from safest to riskiest: exact matches, near matches, Tailwind colors to named roles, then everything else. Commits each batch separately. Use as phase 4 of design-system, after design-ratify.
Installs a lint script that works in any framework and flags one-off bracket values, hex codes, off-scale spacing and font sizes, and Tailwind colors used instead of named roles. Builds its config from the project's own tokens, records a baseline so CI only fails when things get worse, and can check shadcn/ui components. Use as phase 5 of design-system, after design-apply.
Passes
Fixes small mistakes in an existing UI without changing its design: spacing and font sizes that are off the scale in DESIGN.md, lines of text that are too long, icons that look off-center, text that clips or overflows, small tap targets and missing focus styles. Use when the user wants an existing UI cleaned up rather than redesigned.
Finds modals, dropdowns, hover states and other UI changes that happen instantly with no animation, sorts each by the kind of interaction, and applies the matching duration and easing from DESIGN.md. Use after the design-system pipeline, or when an app feels abrupt when things open, close or change.
Lists the icons a product needs, checks which icon libraries actually have them, then installs one library and replaces every existing icon, inline SVG and emoji with it. Use after the design-system pipeline, or when an app mixes icons from several sources.
Finds lists, tables, search results and dashboards that show nothing, or just a bare line of text, when there's no data. Works out why each one would be empty, then builds an empty state with a short explanation and one action. Use after the design-system pipeline, or when an app looks broken before it has any data.