How does it handle component properties (Props)?

It reads the Rootage YAML file in the repository to automatically extract variants, sizes, states, and slots, ensuring the documentation always matches the code.

Is the output content localized?

The skill is specifically designed to generate professional, high-quality documentation in Korean, following established design system tone and voice guidelines.

Does it support image assets?

Yes, it follows a strict directory pattern for images and even provides Bash commands to convert PNG assets into optimized WebP files for the documentation site.

Can I choose the level of detail for the generated docs?

Yes, you can specify 'simple' for basic components like badges or 'comprehensive' for complex components that require anatomy diagrams and detailed usage guidelines.

What documentation format does this skill generate?

This skill generates standardized MDX files optimized for the SEED Design System documentation site, including Frontmatter, custom React components, and Markdown.

SEED Design System Documentation Generator

Name: SEED Design System Documentation Generator
Author: Activer007

byActiver007

0•

Design Tools

Generates comprehensive, standardized component guideline documentation in MDX format for the SEED Design System.

This skill automates the creation and maintenance of high-quality design system documentation by synchronizing MDX content with Rootage YAML specifications. It streamlines the documentation workflow by extracting component properties, sizes, and states directly from source files, while providing structured templates for anatomy, usage guidelines, and comparative analysis. Designed specifically for the SEED Design System, it ensures a consistent professional Korean tone and manages complex image asset paths and platform status integrations, making it indispensable for design system maintainers and frontend developers.

Key Features

010 GitHub stars

02Integrated SEED Components: Automatically embeds PlatformStatusTable and ComponentSpecBlock custom MDX components.

03Automated Prop Extraction: Synchronizes component tables directly from Rootage YAML specification files.

04Standardized Asset Management: Enforces strict image naming conventions and provides automated WebP conversion workflows.

05Korean Language Optimization: Maintains a professional, user-centric Korean tone of voice throughout all documentation.

06Dual Documentation Modes: Supports 'simple' templates for basic elements and 'comprehensive' layouts for complex UI components.

Use Cases

01Migrating legacy component guidelines from V2 to V3 with automated difference highlighting.

02Updating existing documentation to reflect changes in component props or design principles.

03Initial documentation generation for newly created design system components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add activer007/ordinary-claude-skills component-guidelines-docs

For use in Claude.ai and ChatGPT

Download Skill