Documentation Template
Standardize how components, patterns, and foundations are documented inside a design system your team and agents can reuse.
Overview
Documentation Template is an agent skill for the Build phase that generates structured documentation scaffolds for design-system components, patterns, and foundations.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill documentation-templateWhat is this skill?
- Three template types: Component, Pattern, and Foundation docs with prescribed sections
- Component template covers status, anatomy, variants, props, states, accessibility, tokens, changelog
- Pattern template includes good/bad examples and accessibility cross-links
- Standards: TOC for long pages, comparison tables, code with visuals, maturity status indicators
- Best practices: quarterly freshness audit, second-person voice, lead with important info
- 3 template types: Component, Pattern, and Foundation documentation
Adoption & trust: 579 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your design system pages are inconsistent—missing accessibility, states, or changelogs—so builders and agents cannot trust or reuse the docs.
Who is it for?
Indie teams documenting a component library in Figma-plus-code or Storybook workflows who want one repeatable doc shape per artifact.
Skip if: API reference-only backends, one-page marketing sites, or projects with no shared UI system to document.
When should I use this skill?
Generate structured documentation templates for components, patterns, or guidelines within a design system.
What do I get? / Deliverables
You get a filled or ready-to-fill doc template per artifact type with headings, tables, and status fields aligned to design-system best practices.
- Component, pattern, or foundation doc outline with required sections
- TOC and comparison-table placeholders for long pages
Recommended Skills
Journey fit
Build/docs is where design-system documentation is authored alongside components—not a one-off marketing page. Docs subphase matches generating consistent template skeletons for design-system artifacts rather than implementing UI code alone.
How it compares
Design-system doc scaffolding—not a generic README generator or OpenAPI spec writer.
Common Questions / FAQ
Who is documentation-template for?
Design-system maintainers and solo builders documenting UI components, interaction patterns, and foundation guidelines for their product.
When should I use documentation-template?
During Build when adding or updating design-system docs, before handoff to engineering, or when onboarding contributors who need predictable page structure.
Is documentation-template safe to install?
It only structures documentation; review the Security Audits panel on this Prism page and avoid embedding secrets in example code blocks you generate.
SKILL.md
READMESKILL.md - Documentation Template
# 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