react-docs-generator
Generate React component documentation for SEED Design System. Use when creating new React component docs in ./docs/content/react/components or updating existing implementation documentation. Helps document component APIs, props, installation, and usage examples.
Security Assessment
About react-docs-generator
The 'react-docs-generator' skill is designed to streamline the process of creating documentation for React components in the SEED Design System. It automates the generation of comprehensive documentation for components, including APIs, props, installation instructions, and usage examples, following the SEED Design patterns. By standardizing the format, it ensures that all component documentation is consistent, easily understandable, and up to date, making it easier for developers to work with components and integrate them into projects.
This skill allows developers to quickly generate new documentation or update existing ones when there are changes to the component API, props, or when new usage examples need to be added. It simplifies the process of documenting components by automatically providing templates for installation guides and prop tables, and including MDX components for seamless integration with documentation sites. The 'react-docs-generator' skill integrates tightly with SEED's design system and repository structure, helping teams maintain a high standard of documentation quality.
The main features of this skill are its ability to include example code snippets, auto-generate installation guides, and document props using TypeScript types. Additionally, it ensures that usage patterns and examples are documented thoroughly, making it a valuable tool for teams maintaining large React codebases that require up-to-date and consistent documentation.
FAQ
How do I generate new React component documentation with this skill?
You can use the 'react-docs-generator' skill when creating new React component docs or updating existing ones. Simply provide component details such as ID, name, and description, and the skill will generate the documentation based on SEED Design System standards.
Can I update existing documentation with this skill?
Yes, the skill is designed to help you update existing documentation when there are changes to the component API, new props, or usage examples.
Does this skill support both CLI and manual installation methods?
Yes, the skill provides automated templates for both CLI and manual installation guides, depending on the presence of a snippet layer in the component.
Can I document sub-components within a composite component?
Yes, the skill automatically detects sub-components in composite components (e.g., Alert Dialog with its sub-components) and documents them accordingly.
Does this skill generate props documentation automatically?
Yes, the skill generates props documentation by extracting TypeScript types and presenting them in a structured table format.
Install react-docs-generator
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
daangn/seed-design