documentation-template — скилл для Claude Code: обзор и установка
Создаёт готовые каркасы документации для компонентов, паттернов и базовых правил дизайн-системы. Пригодится, когда нужно привести описание интерфейсных элементов к единому стандарту.
npx skills add Owl-Listener/designer-skills --skill documentation-template -a claude-codeЧто делает documentation-template
Скилл генерирует шаблоны для трёх типов документации: компонентов, паттернов и фундаментальных правил. Для компонентов формируется разметка со статусом готовности, анатомией, вариантами, свойствами, состояниями, токенами и доступностью.
Шаблоны паттернов содержат описание проблемы, контекст, поведение и примеры удачных и неудачных решений. Для длинных страниц скилл требует оглавление, для сравнений использует таблицы, а код размещает рядом с визуальными примерами. Лучшие практики из набора рекомендуют писать от второго лица и проверять понятность текста на новых коллегах.
Этот инструмент задаёт общую структуру страницы. Для детального описания спецификации одного конкретного компонента автор рекомендует запускать скилл component-spec.
Какие задачи решает
- стандартизировать структуру документации дизайн-системы
- создать шаблон описания UI-компонента с токенами и доступностью
- оформить гайд по UX-паттерну с примерами удачных и неудачных решений
- составить каркас базовых правил с принципами и ресурсами
Примеры запросов агенту
- Создай шаблон документации для нового компонента Modal с описанием свойств и доступности
- Подготовь каркас документации для UX-паттерна выбора даты
- Сделай шаблон foundation docs для правил работы с цветом
Как установить documentation-template
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a claude-code2Вручную: положить файлы
~/.claude/skills/documentation-template/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/documentation-template/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a codex2Вручную: положить файлы
.agents/skills/documentation-template/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a cursor2Вручную: положить файлы
.cursor/skills/documentation-template/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills documentation-template2Вручную: положить файлы
.github/skills/documentation-template/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/documentation-templateВручную: положить файлы
.devin/skills/documentation-template/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill documentation-template -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора109
Похожие
Вопросы о documentation-template
Как установить documentation-template в Claude Code?
Выполните в терминале команду npx skills add Owl-Listener/designer-skills --skill documentation-template -a claude-code.
Что делает documentation-template?
Скилл формирует типовые шаблоны для описания компонентов, интерфейсных паттернов и основ дизайн-системы. В каркас сразу закладываются разделы про доступность, токены и варианты.
В чём разница между documentation-template и component-spec?
documentation-template создаёт общую структуру и каркас страницы, а для заполнения подробной технической спецификации конкретного компонента предназначен скилл component-spec.
Исходный текст
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