Can I customize the documentation sections?

Yes, for comprehensive documentation, you can choose to include Anatomy, specific Guideline topics, Comparisons, and V2 Differences.

How does it handle component props?

It automatically extracts size, variant, state, and layout information from the associated component YAML spec and formats it into standardized Markdown tables.

What file formats does this skill support?

This skill generates MDX documentation and reads Rootage YAML specification files to ensure technical accuracy.

Does it support multiple languages?

The skill is specifically optimized for generating detailed design documentation in Korean, focusing on professional Tone & Voice.

Can it manage visual assets?

Yes, it follows a strict naming convention for anatomy and guideline images and provides commands for converting PNGs to WebP for optimized web performance.

Design System Component Documenter

Name: Design System Component Documenter
Author: Activer007

byActiver007

0•

Content Management

Automates the generation of standardized UI component guideline documentation using design system YAML specifications.

This skill streamlines the creation of high-quality documentation for the SEED Design System by extracting component data directly from Rootage YAML files. It supports both simple and comprehensive documentation styles, ensuring consistency across anatomy descriptions, props tables, design guidelines, and version migration paths. By automating layout generation and image referencing, it helps maintain professional, Korean-language documentation that aligns with established design patterns and technical specifications.

Key Features

01Standardized image path management and WebP conversion workflows

02Support for simple and comprehensive documentation layouts

030 GitHub stars

04Support for V2 to V3 migration guides and Do/Don't image grids

05Automated data extraction from Rootage YAML component specifications

06Integrated design principle templates (Anatomy, Props, Comparisons)

Use Cases

01Updating existing component props tables and usage guidelines after code changes

02Initializing documentation for new UI components in a design system repository

03Creating version-to-version migration guides for design system consumers

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