Skip to content
Design
Skill

/documentation-template

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`.

BOOST
From plugin
designer-skills
2.9k111 skills33 commands
Install
$ npx -y skills add Owl-Listener/designer-skills --skill documentation-template --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/documentation-template

Context preview

The summary Claude sees to decide when to auto-load this skill.

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`.

SKILL.md

documentation-template.SKILL.md
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
Ships withdesigner-skills

Design skills for the agent era, written so an AI agent can actually use them. 273 skills and 76 commands across 33 plugins, in five collections, for Claude Code and Gemini CLI. Not sure which skill you need?

Get the whole plugin

Other skills on designer-skills.