react-docs-generator

Name: react-docs-generator
Rating: 5 (789 reviews)
Author: daangn

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.

TL;DR

Generate standardized React component documentation for SEED Design System, covering API, props, installation, and usage examples.

What Is It

Document React component APIs, props, installation, and usage examples
Follow SEED Design patterns and structure
Automatically embed code examples via ComponentExample and ManualInstallation
Supports both snippet-layer and direct import scenarios
Includes installation, usage, examples, and optional props/accessibility sections

Key Features

Integrates ComponentExample for code snippet embedding
Automates installation guides (CLI/Manual)
Generates props tables with TypeScript types
Provides step-by-step usage patterns
Leverages MDX components for dynamic rendering

How to Use

1.Use when creating new React component docs in ./docs/content/react/components
2.Update existing component documentation with API/props/usage changes
3.Add new usage examples or use cases
4.Document installation methods (CLI/Manual) when applicable
5.Follow the structured markdown template with required sections

Guardrails & Gotchas

Always verify snippet layer existence before including installation section
Ensure all examples have corresponding .tsx files in examples/react/{component-id}/
Use only valid component IDs and names (e.g., alert-dialog, badge)
Maintain consistent import paths (snippet vs. @seed-design/react)
Keep usage examples simple; detailed cases go to Examples section

GitHub Stats

Author

@daangn

Repository

daangn/seed-design

Stars

789

Explore More Skills

move-code-quality

@davila7

Analyzes Move language packages against the official Move Book Code Quality Checklist. Use this skill when reviewing Move code, checking Move 2024 Edition compliance, or analyzing Move packages for best practices. Activates automatically when working with .move files or Move.toml manifests.

12.4k

1.1k

1w ago

react-docs-generator

Explore More Skills

move-code-quality

e2e-testing-patterns

testing-anti-patterns