component-docs

component-docs writes one component's documentation entry from its code, its stories and two real uses in your product, with usage rules right next to the examples. Gaps are marked, not filled, and it publishes nothing.

Use to write one component's documentation entry from its code, stories and real call sites, such as "document the button", "write docs for Select", "what states does Toast have", or usage rules for a new or changed component. Not for foundations or pages that span components, which no skill here writes, nor for changing the component, which is build-design-system.

1. Pastes the nine headings of the doc format into an empty draft.
2. Reads the component's code, props type, styles and stories, and records each as a source.
3. Finds two real uses by searching call sites.
4. Traces which source gave each example, variant, prop, state and token, and lists every disagreement between sources.
5. Fills each section from sourced facts, copying token names and example code character for character.
6. Writes the usage rules last. Each has an id, a condition, an action, a reason, its evidence, and a "Don't" line with real code that breaks it. A rule it cannot break with a snippet is cut.

The entry saved to docs/system/<name>.md with a draft comment on line 1, then its sources, conflicts, what it guessed at, and up to three questions with defaults.

• Write a variant, prop, token, example or use that has no source.
• Invent a state to make a section look complete.
• Edit the component it documents.

component-docs installs with the other five design.how skills, for Claude Code, Cursor, Codex and any agent that reads Agent Skills. The install command and the .zip are on Skills, free after an email signup.

• design-system-boss: Say what is wrong with your UI in plain words; it picks a playbook and runs the other design.how skills in order.
• build-design-system: Builds a design system from the UI your app already ships: tokens, components, docs and checks, proved on one flow.
• migrate-design-system: Moves every screen of an app onto an existing design system with many agents, each screen checked against its before screenshot.
• token-mapping: Reports how the hardcoded colors and sizes in your code map onto your design tokens, by purpose. It never edits.
• ui-review: Reviews a screen, flow or running build, accessibility included, and ranks what is broken with evidence.