Generate Component Documentation

What it does

This skill automatically generates comprehensive documentation for UI components, extracting key details like props and usage patterns directly from code. It streamlines the process of maintaining up-to-date guides for complex interfaces without manual writing.

When to use it

• You need rapid documentation for a newly created or refactored React component.
• Your team requires consistent prop definitions and example usage across multiple files.
• You want to reduce technical debt by keeping docstrings synchronized with implementation changes.
• You are building a library where automated onboarding materials are essential for contributors.

Key capabilities

• Extracts component props, types, and default values from source code.
• Generates clear usage examples demonstrating how to implement the component.
• Produces structured markdown suitable for integration into developer portals or READMEs.
• Focuses specifically on gpui-component style UI elements as per the author's context.

Example prompts

• "Generate documentation for the new Button component including all available props and a usage example."
• "Create a usage guide for the Modal component based on its current implementation in the codebase."
• "Document the Sidebar navigation component, listing required slots and optional configuration options."

Tips & gotchas

Ensure your source code includes proper type definitions or JSDoc comments to maximize extraction accuracy. This skill is optimized for React-based UI components; results may vary significantly for non-standard libraries or plain HTML/CSS structures without associated logic.