What file format does this skill generate?

It generates MDX files specifically formatted for the SEED Design System documentation directory, including frontmatter and custom React components.

Can I use this for non-Korean documentation?

While the structure is universal, this skill is specifically optimized with Korean tone and voice guidelines for the SEED Design System.

How are component props handled?

The skill reads the component's YAML specification in the Rootage package to automatically build accurate property tables, including variants, sizes, and states.

Does it manage image assets?

Yes, it enforces a standard naming convention for images and provides instructions for converting PNG assets to WebP using internal scripts.

SEED Design System Documentation Generator

Name: SEED Design System Documentation Generator
Author: Microck

byMicrock

•

Design Tools

Generates standardized component guideline documentation for the SEED Design System using Rootage YAML specifications.

This skill automates the creation of high-quality design system documentation for the SEED Design System. By parsing Rootage YAML specifications, it automatically extracts property definitions, size variants, and component states to build consistent MDX files. It supports both simple and comprehensive documentation styles, ensuring technical accuracy while maintaining professional Korean design guidelines, anatomy diagrams, and usage best practices. It is ideal for maintaining a consistent voice across a large library of UI components.

Key Features

01Standardized MDX structure including Anatomy and Comparison sections

02Support for simple and comprehensive documentation templates

0381 GitHub stars

04Automatic prop and state extraction from Rootage YAML files

05Professional Korean language guidance for design principles and tone

06Automated image path management and WebP conversion workflows

Use Cases

01Creating comprehensive documentation for new UI components

02Synchronizing documentation when component specifications change in the source YAML

03Generating V2 to V3 migration guides for design system updates

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