What problem does it solve? Writing a documentation page for a design system component by hand means replicating layout conventions, wiring navigation, and keeping metadata in sync across the sidebar, sitemap, and breadcrumbs. This Skill automates that entire workflow so every component page matches the established quality benchmark. ## Core Features & Use Cases - Variant showcase generation: Reads the component's TypeScript props and variant enumerations to build a full variant-by-state showcase grid, using the Button page as the structural benchmark. - Complete page scaffolding: Writes all three required files (page.tsx, page.module.css, layout.tsx) with registry-derived metadata, correct package imports, and content that follows the content-design.md style rules. - Registry-driven navigation: Sidebar, sitemap, breadcrumbs, and page titles all derive from the component registry, so no navigation wiring is needed; only the ComponentPreviews entry is added by hand. - Use Case: Ask to document the Combobox component on the website, and the Skill reads its props, mirrors the Button page structure, generates the showcase grid, and produces a build-passing docs page. ## Quick Start Document the Combobox component on the website with a full variant showcase page.
