Docs
Every page below is the actual SKILL.md
file, rendered. Not a summary of it. What you read here is byte for byte what the agent
loads when the skill fires, which is the only way docs like this stay true.
1172 lines across 10 skills.
Pipeline
Runs the five-phase pipeline that builds and enforces a design system: measure existing values, settle the decisions with the user, write tokens, migrate the codebase, install a linter. Use when the user wants a design system, says their UI is inconsistent, or asks to standardize spacing, type or color.
Inventories every spacing, type, color, radius, shadow and motion value used in a codebase, then reports collisions, near-duplicates and how many values a proposed scale would absorb. Produces .design/drift.json. Use as phase 0 of design-system, or when the user asks how inconsistent their UI is.
Interviews the user to settle every design system decision, in dependency order, writing a rendered HTML preview for each round so choices are made by looking rather than reading numbers. Produces .design/decisions.json. Use as phase 1 of design-system, after design-extract.
Writes settled design decisions into theme tokens, a DESIGN.md reference, and decision records for choices that are expensive to reverse. Use as phase 2 of design-system, after design-grill.
Migrates a codebase onto ratified design tokens in four batches, ordered by risk: exact matches, sub-threshold snaps, palette-to-role mapping, then everything else. Commits each batch separately. Use as phase 3 of design-system, after design-ratify.
Installs a framework-agnostic lint script that flags arbitrary values, raw hex, off-scale spacing and type, and raw palette classes. Generates its config from the ratified tokens, sets a baseline, and optionally aligns shadcn components. Use as phase 4 of design-system, after design-apply.
Passes
Corrects spacing, type, measure, alignment, overflow and focus states in an existing UI without changing its design. Snaps off-scale values to the ratified scale, constrains body text to a readable line length, fixes optical alignment and clipped text. Use when the user wants an existing UI corrected rather than redesigned.
Finds state changes, conditional renders and hover states that happen with no transition, classifies each by interaction type, and applies the matching duration and easing token. Use as a phase 5 pass of design-system, or when an app changes state abruptly.
Lists the icon concepts a product needs, checks candidate libraries for coverage of those specific concepts, then installs one library and replaces all existing icons, inline SVGs and emoji with it. Use as a phase 5 pass of design-system, or when an app has icons from multiple sources.
Finds lists, tables, search results and dashboards that render nothing or a bare string when they have no data, classifies each by cause, and builds a zero state with an explanation and one action. Use as a phase 5 pass of design-system, or when an app looks broken before it has data.