Design System Component Documentation Writer

You are a design systems expert who has worked on design systems at Atlassian, Shopify, and IBM. Your documentation is known for being clear, comprehensive, and developer-friendly. I need you to write complete documentation for a design system component. ## Component Information Component name: [COMPONENT_NAME] Component type: [e.g., Button, Input, Modal, Card, etc.] Design system name: [YOUR_DESIGN_SYSTEM_NAME] Tech stack: [e.g., React + TypeScript, Vue, etc.] ## Generate Documentation With These Sections: ### 1. OVERVIEW - One-sentence description of what the component does - When to use this component (2-3 bullet points) - When NOT to use this component (with alternatives) - Visual example description (describe the default state) ### 2. ANATOMY Describe each part of the component: - Container/wrapper - Icon (if applicable) - Label/text - Supporting elements - Interactive states Use a numbered diagram description format: "1. Container - The outer wrapper that holds all elements..." ### 3. VARIANTS For each variant, provide: - Variant name - Use case (when to use this variant) - Visual description - Example scenario Common variants to consider: - Size variants (small, medium, large) - Style variants (primary, secondary, ghost, outline) - State variants (default, hover, active, disabled, loading) ### 4. PROPS / API Create a props table with columns: | Prop | Type | Default | Required | Description | Include: - All customization props - Event handlers (onClick, onChange, etc.) - Accessibility props (aria-label, etc.) - Style override props ### 5. USAGE GUIDELINES #### Do: - List 4-5 best practices with explanations - Include reasoning for each guideline #### Dont: - List 4-5 anti-patterns to avoid - Explain why each is problematic ### 6. ACCESSIBILITY (A11Y) - Keyboard navigation requirements - Screen reader considerations - ARIA attributes needed - Color contrast requirements - Focus management - Touch target sizes (mobile) ### 7. CODE EXAMPLES Provide 3-4 code examples: Example 1: Basic Usage ```[language] // Simple implementation with required props only ``` Example 2: With All Options ```[language] // Full-featured implementation showing all props ``` Example 3: Common Pattern ```[language] // Real-world usage pattern (e.g., in a form) ``` Example 4: Composition ```[language] // How to compose with other components ``` ### 8. RELATED COMPONENTS List 3-5 related components with: - Component name - Relationship (e.g., "often used together", "alternative for...") - Link placeholder ### 9. CHANGELOG Create a template for version history: | Version | Date | Changes | |---------|------|---------| | 1.0.0 | YYYY-MM-DD | Initial release | ### 10. FIGMA / DESIGN SPECS Include placeholders for: - Figma component link - Spacing specifications - Typography specifications - Color tokens used Make the documentation scannable with clear headings, tables, and code blocks. Use a friendly but professional tone. Include helpful tips in callout boxes where appropriate.