Skip to main content
ClaudeWave
Skill2.6k repo starsupdated 6d ago

documentation-template

The documentation-template Claude Code skill generates standardized documentation frameworks for design system components, patterns, and foundational guidelines. Use it when establishing or maintaining consistent documentation structures across design artifacts, ensuring new team members can understand component usage, accessibility requirements, variants, and related resources through predictable formatting and hierarchical organization.

Install in Claude Code
Copy
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/documentation-template && cp -r /tmp/documentation-template/design-systems/skills/documentation-template ~/.claude/skills/documentation-template
Then start a new Claude Code session; the skill loads automatically.

SKILL.md

# 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
design-critiqueSkill

Facilitate a structured team critique — framing, feedback rules, and actionable outcomes. Use when running a session with people in the room. For a solo expert review, use `heuristic-evaluation` (prototyping-testing).

design-debt-auditSkill

Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit` (designer-toolkit); for WCAG gaps use `accessibility-audit` (design-systems).

design-impact-reportingSkill

Communicate design's contribution to business and user outcomes in stakeholder language. Use when reporting results upward. For choosing the metrics in the first place, use `metrics-definition` (ux-strategy).

design-qa-checklistSkill

Build a QA checklist for verifying that a build matches the design. Use at implementation review. For the spec engineers build from, use `handoff-spec`.

design-review-processSkill

Establish review gates — criteria, checkpoints, and approval flow. Use when work ships without consistent review. For running one individual session, use `design-critique`.

design-sprint-planSkill

Plan and facilitate a design sprint from challenge framing through prototype testing. Use when compressing discovery into days. For ongoing team cadence, use `team-workflow`.

handoff-specSkill

Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use `design-qa-checklist`; for reusable library components use `component-spec` (design-systems).

team-workflowSkill

Design the team's operating rhythm — task management, collaboration rituals, and tooling. Use when the day-to-day cadence needs structure. For a time-boxed sprint, use `design-sprint-plan`.