design-system-governance — скилл для Claude Code: правила развития
Скилл описывает, как дизайн-система меняется: кто владеет, кто предлагает правки, как версионировать и что выводить из обращения. Нужен, когда над системой работает несколько команд.
npx skills add Owl-Listener/designer-skills --skill design-system-governance -a claude-codeЧто делает design-system-governance
Скилл задаёт вопросы, на которые у модели обычно нет готового ответа: кто владеет системой, кому можно в неё писать, как принимаются решения по изменениям, как нумеруются версии и что делать с ломающими правками. Внутри разобраны три модели владения — централизованная, федеративная и гибридная, с плюсами и минусами каждой.
Дальше идёт процесс в семь шагов: заявка, разбор, проектирование, ревью, сборка и тесты, релиз, оповещение потребителей. Версионирование опирается на semver: патч для исправлений, минор для новых компонентов, мажор для ломающих изменений. Отдельные разделы — вывод компонентов из обращения и политика ломающих правок.
Скилл текстовый, никаких скриптов и ключей не требует. Полезен, когда у вас уже есть система и спор о том, кто и как в неё добавляет компоненты. Если команда одна и правки идут напрямую, весь этот аппарат только замедлит работу.
Какие задачи решает
- договориться, кто владеет компонентами дизайн-системы
- описать путь заявки на новый компонент от идеи до релиза
- выбрать между централизованной и федеративной моделью
- ввести semver и changelog для библиотеки компонентов
- спланировать вывод устаревшего компонента без сюрпризов для команд
Примеры запросов агенту
- Опиши модель владения дизайн-системой для трёх продуктовых команд
- Составь процесс контрибуции нового компонента: от заявки до релиза
- Распиши политику ломающих изменений и миграции для нашей библиотеки
Как установить design-system-governance
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-system-governance -a claude-code2Вручную: положить файлы
~/.claude/skills/design-system-governance/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-system-governance/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-system-governance -a codex2Вручную: положить файлы
.agents/skills/design-system-governance/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-system-governance -a cursor2Вручную: положить файлы
.cursor/skills/design-system-governance/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-system-governance2Вручную: положить файлы
.github/skills/design-system-governance/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-system-governance -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/design-system-governanceВручную: положить файлы
.devin/skills/design-system-governance/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-system-governance -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора109
Похожие
Вопросы о design-system-governance
Как установить design-system-governance в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill design-system-governance -a claude-code. Скилл появится в ~/.claude/skills/design-system-governance/SKILL.md.
Что делает design-system-governance?
Описывает процессы и роли, по которым дизайн-система развивается: модели владения, приём вкладов, версионирование, вывод компонентов из обращения и работа с ломающими изменениями.
Чем этот скилл отличается от design-system-adoption?
Governance отвечает за то, как система меняется. Adoption из designer-toolkit — за то, как её внедряют в команды. Для истории дизайн-файлов есть version-control-strategy из design-ops.
Исходный текст
SKILL.md · MIT
---
name: design-system-governance
description: Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption` (designer-toolkit); for design file history use `version-control-strategy` (design-ops).
---
# Design System Governance
You are an expert in the operational and organizational structures that keep a design system healthy over time.
## What You Do
You define the processes, roles, and decision frameworks that allow a design system to evolve without fragmenting — so contributors know how to participate, consumers know how to depend on it, and the system stays coherent as the product scales.
## Core Governance Questions
A governance model must answer:
1. **Who owns the system?** Dedicated team, federated contributors, or hybrid?
2. **Who can contribute?** Anyone, or only the core team?
3. **How are changes proposed and decided?** Request process, RFC, or open pull requests?
4. **How is the system versioned?** How do consumers know what changed?
5. **How are breaking changes handled?** How much notice, what migration support?
6. **What gets deprecated, and how?** Timeline and removal process?
7. **How is quality maintained?** Review process before merging new components?
## Ownership Models
### Centralized (Core Team)
A dedicated design system team owns all components. Consumers submit requests; the core team builds and maintains.
- High consistency, high quality
- Can become a bottleneck; slow to respond to product team needs
- Works best in large orgs with budget for a dedicated team
### Federated (Distributed)
Any product team can contribute components. A lightweight governance layer reviews and accepts contributions.
- Fast to grow; reflects actual product needs
- Requires strong review standards to maintain quality
- Works best in mid-size orgs with mature design practice
### Hybrid
Core team owns foundational components; product teams own domain-specific components with support from core.
- Balances quality with velocity
- Requires clear ownership boundaries ("core" vs "extended" library)
- Most common model in practice
## Contribution Process
Define the lifecycle of a new component or change:
1. **Request/Proposal**: product team identifies a need; submits a request with use case and context
2. **Triage**: core team assesses: is this generalizable? Does something similar exist? What's the priority?
3. **Design**: component designed and specced (states, variants, accessibility, tokens)
4. **Review**: design critique + accessibility review + engineering feasibility
5. **Build and test**: implementation, documentation, accessibility testing
6. **Release**: versioned release with changelog entry
7. **Communication**: announce to consumers with migration notes if applicable
## Versioning
Use semantic versioning (semver) as the communication contract:
| Version type | When to use |
|---|---|
| **Patch** (1.0.x) | Bug fixes, documentation corrections, no API changes |
| **Minor** (1.x.0) | New components or variants added; backwards compatible |
| **Major** (x.0.0) | Breaking changes: renamed props, removed components, changed behavior |
- Tag every release in version control
- Maintain a public changelog — consumers need to know what changed and why
- Keep major version bumps rare and well-communicated
## Deprecation Process
- Announce deprecation with the release that introduces the replacement
- Provide a migration guide: what replaces the deprecated item, with code examples
- Keep deprecated items functional for at least one minor version cycle before removal
- Use in-product warnings (console warnings, Figma annotations) to surface deprecations to consumers
- Communicate timelines clearly: "Deprecated in 2.3, removed in 3.0 (Q3)"
## Breaking Change Policy
Before releasing a breaking change:
- Give consumers a migration path (a codemod, a replacement component, a spec change)
- Document the change in the changelog with "BREAKING:" prefix
- Provide a migration guide in docs
- Consider a compatibility shim for critical consumers who can't migrate immediately
## Quality Standards
Define what a component must have before it can enter the system:
- Documented props, variants, and states
- Accessibility review (WCAG AA minimum, keyboard navigation, screen reader tested)
- Responsive behavior specified
- Design token usage (no hardcoded values)
- Usage guidance (when to use, when not to use)
- Design file component (Figma or equivalent) synced with code
## Best Practices
- Publish a clear contribution guide so product teams know how to participate
- Hold regular office hours or open reviews — governance works better as a conversation than a ticket queue
- Review adoption metrics (which components are used most/least) to guide investment
- Document decisions as well as outcomes — why a component works the way it does prevents revisiting settled debates
- Treat governance as a product: it has users (contributors and consumers), and it needs iteration
© Owl-Listener · MIT · Owl-Listener/designer-skills