К основному содержанию
скилл CX Codex

documentation-template — скилл для Claude Code: обзор и установка

Создаёт готовые каркасы документации для компонентов, паттернов и базовых правил дизайн-системы. Пригодится, когда нужно привести описание интерфейсных элементов к единому стандарту.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill documentation-template -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/documentation-template/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/documentation-template/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора109

design-rationale Помогает написать письменное обоснование дизайн-решения: что выбрали, почему и какие были альтернативы. Пригодится перед ревью или хендоффом. CX Codex +1 2 100установок card-sort-analysis Анализирует результаты открытой и закрытой карточной сортировки, строит матрицу сходства и предлагает категории для навигации. CX Codex +1 2 100установок pattern-library Скилл оформляет повторяющиеся UX-решения как записи паттернов: от проблемы и решения до примеров, доступности и связанных паттернов. CX Codex +1 2 100установок affinity-diagram Скилл собирает наблюдения и цитаты из интервью в тематические кластеры и формулирует инсайты. Пригодится, когда данных много и нужно свести их воедино. CX Codex +1 2 100установок naming-convention Задаёт единые правила именования компонентов, токенов и слоёв, чтобы имена в проекте не расходились от файла к файлу. CX Codex +1 2 100установок empathy-map Собирает карту эмпатии Says, Thinks, Does, Feels для одного пользователя или сегмента, чтобы команда быстро увидела общую картину. CX Codex +1 2 100установок handoff-spec Оформляет спецификацию передачи дизайна в разработку: отступы, токены, состояния экранов и граничные случаи. Пригодится, когда макет отдают фронтендерам. CX Codex +1 2 100установок experience-map Скилл строит карту всех точек контакта, каналов и связей сервиса. Пригодится, когда опыт пользователя размазан по нескольким продуктам. CX Codex +1 2 100установок

Похожие

develop-design-rationale product-on-purpose Скилл помогает оформить обоснование UX-решений, разобрать альтернативы и зафиксировать компромиссы. Пригодится перед защитой дизайна перед стейкхолдерами. CX Codex +1 744установок documentation-and-adrs addyosmani Скилл помогает фиксировать архитектурные решения (ADR), причины выбора технологий и контекст для будущих разработчиков или агентов в репозитории. CX Codex +1 63 800установок golang-documentation samber Скилл настраивает стандарты документации в Go-проектах: от godoc-комментариев и Example-тестов до README и llms.txt. Пригодится при оформлении библиотек и CLI перед релизом. CX Codex +1 40 400установок documentation-writer официальный github Скилл для создания технической документации по фреймворку Diátaxis: туториалы, гайды, справки и объяснения. Предлагает структуру перед написанием. 27 757установок documentation официальный anthropics Скилл для технического письма: собирает README, справочник по API, ранбук, архитектурный документ или гайд для новичков. Пригодится, когда код есть, а описания к нему нет. CX Codex +1 10 300установок indexion-documentation trkbt10 Скилл оценивает покрытие документации, ищет расхождения между кодом и доками и рисует граф зависимостей. CX Codex +1 5 000установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой