Style Guide Generator Skill

Overview

Generate comprehensive design system documentation for Storybook, including design tokens (colors, typography, spacing), component guidelines, and usage patterns. Create a centralized source of truth for your design system.

This skill provides guidance on structuring design system documentation using Storybook's docs features (MDX, Doc Blocks) and organizing design tokens.

What This Skill Provides

Design System Documentation

Create comprehensive documentation for:

• Design tokens: Colors, typography, spacing, shadows, borders
• Component guidelines: Usage patterns, do's and don'ts
• Brand guidelines: Logo usage, voice and tone
• Accessibility standards: WCAG compliance, keyboard navigation
• Code examples: Implementation snippets