component-doc-pagelisted

# component-doc-page Create a full-quality documentation page for a design system component on the website. ## When invoked Use this skill when asked to document a component on the website, add a component page, or create docs for a component — phrases like "document [X] on the website", "add a docs page for [X]", "create the website page for [X]". This is a more thorough, component-specific version of `new-page`. The Button page is the quality benchmark for static variant grids; for components whose value is interaction or streaming state (the `ai` category), the chat-message page (`website/src/app/components/chat-message/page.tsx`) is the exemplar — a `"use client"` page with small stateful demos instead of a grid. ## Instructions 1. **Gather requirements** if not already provided: - Component name (PascalCase) - Figma node URL (optional — ask Rob, or omit if unknown) - Storybook path (optional — format: `/?path=/docs/components-<slug>--docs`) 2. **Read the source component** `src/components/ComponentName/ComponentName.tsx`: - Extract all props from the TypeScript interface (the entry in `website/src/data/component-api.generated.ts` has them pre-parsed with types, defaults and descriptions — the source is still worth reading for behaviour) - Identify all variant enumerations (e.g. `variant`, `size`, `status` props with union types) - Understand the component's states (default, hover, active, disabled, loading, etc.) - Note the BEM class names use