Component Documentation Generator

Generate comprehensive component documentation including props, usage guidelines, do's and don'ts, and accessibility notes from a component's code.

The Prompt

Generate comprehensive documentation for this design system component.

Include:
1. **Overview** — One paragraph describing what the component does and when to use it
2. **Props Table** — All props with types, defaults, and descriptions
3. **Usage Examples** — 3-4 common usage patterns with code snippets
4. **Do's and Don'ts** — 4 bullet points each
5. **Accessibility** — ARIA attributes, keyboard navigation, screen reader behavior
6. **Related Components** — What components are commonly used alongside this one

Here's the component code:
[paste component code here]

Tips

  • Include both the component code and any existing TypeScript interfaces
  • Mention your documentation format (MDX, Storybook, etc.) for better output
  • Ask for specific framework syntax (React, Vue, etc.)