Can I customize the generated sections?

Yes, you can choose between 'simple' and 'comprehensive' types and toggle sections like Anatomy, Comparison, and V2 Differences.

How does the skill extract component properties?

It reads the Rootage YAML specification files located in the /packages/rootage/components/ directory to identify slots, variants, and sizes.

What is the SEED Design System?

The SEED Design System is a UI framework, and this skill is designed to automate its specific documentation requirements and standards.

Does this skill support English documentation?

While the structure is standard, this specific skill is optimized for Korean professional design guidelines, terminology, and tone.

How are images managed in the documentation?

The skill follows strict naming conventions for components and provides commands to convert PNG assets into optimized WebP formats.

Seed Design Documentation Generator

Name: Seed Design Documentation Generator
Author: Microck

byMicrock

•

디자인 도구

Generates high-quality Korean component guidelines for the SEED Design System by extracting data from Rootage YAML specifications.

This skill automates the creation of comprehensive design system documentation (MDX) for the SEED Design System. It streamlines the documentation workflow by reading Rootage YAML files to automatically extract component properties, variants, and sizes, then generates structured guides including anatomy, design principles, and usage examples (Do/Don't). It is particularly useful for design engineers and documentation maintainers who need to ensure consistency across UI component guides while adhering to standardized image naming and Korean language guidelines.

주요 기능

01Integrated image path standardization and WebP conversion workflow

02Tailored Korean 'Tone & Voice' for professional design system documentation

03Built-in support for Do/Don't usage grids and design principle sections

04Automatic prop extraction from Rootage YAML specifications

05Standardized MDX generation for Simple and Comprehensive document types

0681 GitHub stars

사용 사례

01Updating existing component documentation with updated design specifications

02Creating initial guideline documentation for new UI components

03Generating migration guides when moving from V2 to V3 design system versions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill