Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/universal-design-system:component-docsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill when the user needs **component documentation**, **Storybook stories**, or **usage guidelines** for the Universal Design System components. UDS has a canonical component database and APG pattern links; use them to generate consistent docs, props tables, and MDX.
Use this skill when the user needs component documentation, Storybook stories, or usage guidelines for the Universal Design System components. UDS has a canonical component database and APG pattern links; use them to generate consistent docs, props tables, and MDX.
src/data/components.csv — canonical list. Columns include: id, name, slug, category, variants, sizes, states, props, accessibility, use_when, dont_use_when, css_class, lifecycle_stage. Use slug as stable key (e.g. button, modal, input).src/data/apg-patterns.csv — maps component_slug to WAI-ARIA Authoring Practices: apg_pattern, apg_url, keyboard_interactions, required_aria, focus_management, live_region. Link to apg_url in docs for accessibility reference.docs/COMPONENT-ROADMAP.md — component count by layer (React, Vue, Svelte), categories, and peer comparison. Use for high-level doc structure.For each component, include:
name and a short summary (e.g. from use_when).variants and sizes (e.g. primary;secondary;ghost and sm;md;lg).states (default, hover, focus, disabled, etc.).props (comma-separated); format as a table (Prop | Type | Default | Description) for Storybook ArgsTable.accessibility; add link to APG when present in apg-patterns.csv (apg_url). Include keyboard and ARIA notes from that CSV.use_when and dont_use_when.css_class (BEM: .uds-{component} or class name used in docs).lifecycle_stage (e.g. stable, beta) if you expose it in docs.If the project exposes MCP: get_component (by slug) returns component details; use it to fill props tables or generate doc stubs. Otherwise, read src/data/components.csv and src/data/apg-patterns.csv directly.
| Source | Use for |
|---|---|
src/data/components.csv | Name, slug, category, variants, sizes, states, props, accessibility, use_when, dont_use_when, css_class |
src/data/apg-patterns.csv | APG pattern name, URL, keyboard, ARIA, focus, live region per component_slug |
docs/COMPONENT-ROADMAP.md | Counts, categories, React/Vue/Svelte parity, Storybook references |
Keep documentation aligned with the CSV specs so code and docs stay in sync when components change.
npx claudepluginhub mkatogui/universal-design-system --plugin universal-design-systemGenerates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.
Generates and improves Storybook component documentation using autodocs, MDX pages, and JSDoc comments. Use when creating or enhancing component docs.
Creates and reviews Storybook component documentation with stories, MDX, decorators, interaction tests, and visual baselines. Useful for setting up design system presentations or isolated component state previews.