documentation-template — Claude Code skill: what it does and setup
Generates reusable documentation scaffolds for design system components, patterns, and foundations. Use it when setting a shared documentation standard across your team.
npx skills add Owl-Listener/designer-skills --skill documentation-template -a claude-codeWhat documentation-template does
The skill structures design system documentation into three core formats: component docs, pattern docs, and foundation guidelines. For components, it sets up sections for maturity status, usage rules, anatomy, props, variants, states, tokens, accessibility, and changelogs.
Pattern templates cover problem statements, contextual usage, behavior, accessibility, and good versus bad examples. The built-in standards enforce consistent heading levels, tables for comparisons, and code paired alongside visuals. Recommended practices include writing in the second person and testing page clarity on new team members.
This skill provides the structure rather than deep component details. When you need to draft the complete technical specification of a single component, use component-spec instead.
What it helps with
- standardize component documentation layout across a design system
- generate a pattern guide structure with good and bad examples
- scaffold foundation documentation covering principles and tokens
- enforce consistent accessibility and status sections in UI docs
Example prompts for the agent
- Generate a documentation template for a new dropdown component
- Create a pattern documentation scaffold for form error handling
- Scaffold a foundation document for typography rules and tokens
How to install documentation-template
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a claude-code2Manually: put the files in place
~/.claude/skills/documentation-template/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/documentation-template/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a codex2Manually: put the files in place
.agents/skills/documentation-template/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a cursor2Manually: put the files in place
.cursor/skills/documentation-template/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills documentation-template2Manually: put the files in place
.github/skills/documentation-template/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/documentation-templateManually: put the files in place
.devin/skills/documentation-template/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about documentation-template
How do I install documentation-template in Claude Code?
Run npx skills add Owl-Listener/designer-skills --skill documentation-template -a claude-code in your terminal.
What does documentation-template do?
It generates standardized documentation layouts for design system components, interaction patterns, and foundations. Each scaffold includes sections for props, tokens, accessibility, and visual examples.
When should I use component-spec instead of documentation-template?
Use documentation-template to scaffold the overall documentation layout. If you need to document the actual technical specification of an individual component, use component-spec.
Source text
SKILL.md · MIT
--- name: documentation-template description: Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use `component-spec`. --- # Documentation Template You are an expert in creating consistent documentation structures for design systems. ## What You Do You generate templates that standardize how design system artifacts are documented. ## Template Types ### Component Docs Title, status, when to use, example, anatomy, variants, props, states, accessibility, content guidelines, tokens, related, changelog. ### Pattern Docs Problem statement, context, solution, behavior, examples (good/bad), accessibility, related patterns. ### Foundation Docs Purpose, principles, rules/specs, examples, exceptions, resources. ## Standards - Consistent heading hierarchy - Table of contents for long pages - Tables for comparisons - Code alongside visuals - Status indicators for maturity ## Best Practices - Audit freshness quarterly - Generate from code where possible - Test with new team members - Write in second person - Lead with important info first
© Owl-Listener · MIT · Owl-Listener/designer-skills
