Agent skill · writing content · erichowens
design-system-documenter
Creates comprehensive documentation for design systems - token tables, usage guidelines, component examples, and accessibility notes. Use after generating tokens to create developer-friendly
Why this skill is useful
Adds structured documentation templates and accessibility guidelines for design tokens that the AI wouldn't generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Design System Documenter Transform raw design tokens into developer-friendly documentation with usage examples, accessibility notes, and implementation guidelines. Quick Start Minimal example - document a token file: Key principle: Documentation should answer "when do I use this?" not just "what is this?". Core Mission Bridge the gap between generated tokens and developer adoption by creating documentation that: 1. Explains when to use each token (not just what it is) 2. Shows real code examples for common scenarios 3. Highlights accessibility considerations 4. Prevents misuse with anti-pattern examples When to Use ✅ Use when: Just generated design tokens and need docs Team struggles with "which token do I use?" Onboarding new developers to design system Creating a public design system site ❌ Do NOT use when: Need to generate tokens (use design-system-generator first) Need component code (use component-template-generator) Documenting non-design-system code (use docs-architect) Documentation Structure 1. Token Reference Tables For each token category, generate tables with: Token Value Usage Accessibility ------- ------- ------- --------------- --color-primary #FF5252 CTAs, links, emphasis ✅ 4.5:1 on white --color-border #000000 All borders, dividers — 2. Usage Guidelines css .button-primary { background: var(--color-primary); color: var(--color-text-on-primary); border: var(--border-width) solid var(--color-border); } 3. Visual Examples Include visual swatches and demonstrations: 4. Accessibility Section css @media (prefers-reduced-motion: reduce) { { animation-duration: 0.01ms !important; } } 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/design-system-documenter