skills.rest
mkatogui
mkatoguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-docs

Generate MDX component documentation and Storybook stories from UDS component specs.

3|Updated Mar 11, 2026
Search Tags:#accessibility#storybook#generate#design-system#mdx#component-docs#props-tables
One-click install
npx skills add https://github.com/mkatogui/universal-design-system --skill component-docs-mkatogui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-docs
Source: https://github.com/mkatogui/universal-design-system/tree/main/plugins/universal-design-system/skills/component-docs
Command: npx skills add https://github.com/mkatogui/universal-design-system --skill component-docs-mkatogui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs.

Core Features & Use Cases

  • Generate documentation for components using canonical specs (name, slug, category, variants, sizes, props, accessibility, and lifecycle).
  • Produce Storybook-friendly MDX content, including Props tables and usage guidelines, aligned with APG patterns.
  • Create a component catalog and API references that can be integrated into design-system docs sites and handoffs.

Quick Start

Use this skill to generate or update documentation for a specific component by referencing the UDS component specs and APG mappings.

Frequently Asked Questions about component-docs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Storybook stories and MDX documentation from component specs?▼

Generate Storybook stories and MDX documentation by processing UDS component specs to produce MDX-friendly content with ArgsTables, props tables, and accessibility notes. The output integrates directly into design-system documentation sites.

Can I auto-generate props tables and accessibility notes for a design system catalog?▼

Yes, auto-generate props tables and accessibility notes by reading component data from src/data/components.csv and APG mappings from src/data/apg-patterns.csv. The result is Storybook-ready MDX content aligned with APG patterns.

What data sources do I need to create component documentation with an ArgsTable?▼

Creating component documentation with an ArgsTable requires two CSV data sources: src/data/components.csv for component specs like variants and props, and src/data/apg-patterns.csv for accessibility pattern mappings.

How do I build a component API reference that includes usage guidelines and lifecycle data?▼

Build a component API reference by extracting lifecycle data, usage guidelines, and variants from UDS component specs. The process outputs MDX-friendly content with structured props tables suitable for design-system handoffs.

Does this approach work for documenting component variants and sizes in Storybook?▼

Yes, this approach works for documenting component variants and sizes by parsing canonical specs from the components CSV file. It produces Storybook-friendly MDX content that includes all variants, sizes, and associated props.

What is the best way to align component documentation with APG accessibility patterns?▼

Align component documentation with APG accessibility patterns by mapping component specs against the src/data/apg-patterns.csv data source. This generates MDX documentation that includes dedicated accessibility notes and APG-compliant usage guidelines.

Related Skills

Explore More Design & Creative Skills→
PackmindHubPackmindHub
306

test-factory-patterns

Generate varied mock data for Packmind TypeScript test factory functions.

Official
Intermediate
dylantarredylantarre
38

storybook

Generate Storybook CSF 3.0 stories and MDX documentation for UI components.

Community
Intermediate
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
Ohh-889Ohh-889
785

component-doc

Generate and update MDX component documentation for Skyroc Web UI.

Community
Advanced