documentation-template
owl-listener/designer-skills
Generate standardized documentation templates for design system components, patterns, and guidelines.
What is documentation-template?
Creates reusable documentation scaffolds to ensure consistent structure across design system artifacts. Use this when establishing documentation standards for components, patterns, or foundational guidelines in your design system.
- Generates component documentation templates with sections for status, usage, anatomy, variants, props, states, and accessibility
- Creates pattern documentation templates including problem statements, solutions, behavior examples, and accessibility guidance
- Produces foundation documentation templates for design principles, rules, specifications, and exceptions
- Enforces consistent heading hierarchy, table of contents, and comparison tables across all documentation
- Provides status indicators and maturity tracking for design artifacts
How to install documentation-template
npx skills add https://github.com/owl-listener/designer-skills --skill documentation-templateHow to use documentation-template
- 1.Run the skill and specify which template type you need: Component Docs, Pattern Docs, or Foundation Docs
- 2.Review the generated template structure and customize section headings or fields for your system's needs
- 3.Apply the template to your first artifact and test with new team members for clarity
- 4.Document any system-specific sections or exceptions to the standard template
- 5.Schedule quarterly audits to ensure documentation remains fresh and follows the template structure
Use cases
- Standardizing how all components are documented when launching a new design system
- Creating consistent pattern documentation across multiple teams working on the same system
- Establishing foundation documentation for design tokens, typography, color systems, and spacing rules
- Ensuring new team members can quickly understand documentation structure and contribute consistently
- Auditing and refreshing existing documentation to meet updated standards
- Design system leads and maintainers
- Design system documentation owners
- Teams standardizing component and pattern documentation
- Design teams establishing governance for artifact documentation
documentation-template FAQ
This generates the template structure itself. For documenting the content of a specific component, use the `component-spec` skill instead.
Yes. The generated templates provide a standard starting point, but you should adapt section names and fields to match your design system's specific needs and maturity level.
The skill recommends quarterly audits to ensure documentation remains fresh, accurate, and consistently follows the template structure.
Yes, where possible. The skill recommends generating documentation from code to keep it in sync with actual component implementations.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
doherty-threshold
Keep system response under 400ms to preserve user flow and productivity.
empathy-map
Build Says, Thinks, Does, Feels maps to align teams around user understanding from research data.
error-handling-ux
Design error prevention, detection, and recovery across multi-flow products.
experience-map
Map the full ecosystem of touchpoints, channels, and relationships across a multi-channel service.
feedback-patterns
Design confirmations, status updates, and notifications that acknowledge user actions.
fitts-law
Apply Fitts's Law to size and position controls for faster, more accurate interaction.