What documentation formats does this skill support?

It supports MDX (Markdown with JSX) specifically structured for the SEED Design System, including custom components like PlatformStatusTable and ComponentSpecBlock.

Does it provide support for image assets?

Yes, it enforces a standardized naming convention for images (anatomy, props, guidelines) and provides bash commands to convert PNGs to optimized WebP format.

How are component properties (props) managed?

The skill automatically parses Rootage YAML files located in the packages directory to extract sizes, variants, and states, ensuring the documentation is always technically accurate.

Can I use this for components other than SEED Design System?

While optimized for the SEED Design System and Rootage YAML schema, the logic can be adapted for other systems that use similar metadata-driven component specifications.

Component Design Guideline Generator

Name: Component Design Guideline Generator
Author: Activer007

byActiver007

0•

设计工具

Generates standardized, high-quality design system documentation for UI components by extracting specifications from Rootage YAML files.

This skill automates the creation of professional component documentation for the SEED Design System. It bridges the gap between technical code specs and design guidelines by analyzing Rootage YAML files to automatically extract props, sizes, and states. It generates structured MDX files that include anatomy diagrams, detailed design principles, usage guidelines (Do/Don't), and component comparisons. Designed for design system maintainers, it ensures all documentation follows a consistent Korean-language tone and standardized directory structure, significantly reducing the manual effort required to keep design docs in sync with implementation.

主要功能

01Standardized MDX templates for both simple and comprehensive documentation

02Automated image path mapping and WebP conversion workflow guidance

030 GitHub stars

04Integrated Do/Don't image grid and anatomy diagram support

05Automatic extraction of component properties and variants from Rootage YAML

06Support for V2 to V3 migration guides and cross-component comparisons

使用场景

01Updating design guidelines to reflect changes in component specifications

02Building a comprehensive design system portal with consistent MDX structures

03Generating initial documentation for a newly developed UI component

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