naming-convention — скилл для Claude Code: правила имён
Задаёт единые правила именования компонентов, токенов и слоёв, чтобы имена в проекте не расходились от файла к файлу.
npx skills add Owl-Listener/designer-skills --skill naming-convention -a claude-codeЧто делает naming-convention
Скилл включается, когда имена в дизайн-системе уже разъехались или их только собираются зафиксировать. Агент разбирает компоненты, токены, файлы, ассеты и код по отдельным шаблонам: у компонентов это [category]/[name]/[variant]/[state], у токенов {category}-{property}-{concept}-{variant}-{state}, у ассетов icon-[name]-[size] и illust-[scene]-[variant]. Для кода правило своё: kebab-case в CSS, PascalCase в React, camelCase у пропсов.
Внутри — пять принципов (предсказуемость, единообразие, масштабируемость, читаемость, однозначность) и список типовых ошибок. Среди них сокращения, понятные только автору, разные разделители в одном проекте и имена по внешнему виду вместо назначения. Последнее ломает сильнее всего: перекрасили кнопку — и имя врёт.
Скилл советует держать правила на одной справочной странице, автоматизировать проверку имён и разбирать их на командных ревью. Если нужно описать, что именно лежит внутри токенов, а не как их называть, берите design-token — это разные задачи.
Какие задачи решает
- свести имена компонентов к одному шаблону
- зафиксировать правила для токенов и их состояний
- убрать разные разделители в именах файлов
- переименовать ассеты по назначению, а не по виду
- договориться о регистре в CSS, React и пропсах
Примеры запросов агенту
- Проверь имена компонентов в
src/componentsи приведи их к шаблону[category]/[name]/[variant]/[state] - Составь правила именования токенов для нашей темы и запиши их на одну страницу
- Найди в проекте сокращения, которые поймёт только автор, и предложи замену
Как установить naming-convention
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a claude-code2Вручную: положить файлы
~/.claude/skills/naming-convention/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/naming-convention/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a codex2Вручную: положить файлы
.agents/skills/naming-convention/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a cursor2Вручную: положить файлы
.cursor/skills/naming-convention/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills naming-convention2Вручную: положить файлы
.github/skills/naming-convention/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/naming-conventionВручную: положить файлы
.devin/skills/naming-convention/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора109
Похожие
Вопросы о naming-convention
Как установить naming-convention в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill naming-convention -a claude-code. Скилл появится в ~/.claude/skills/naming-convention/SKILL.md.
Что делает naming-convention?
Задаёт шаблоны имён для компонентов, токенов, файлов, ассетов и кода, а ещё перечисляет типовые ошибки вроде непонятных сокращений и разных разделителей.
Чем он отличается от design-token?
naming-convention отвечает за то, как называть сущности. Что именно лежит внутри токенов, описывает design-token.
Исходный текст
SKILL.md · MIT
---
name: naming-convention
description: Establish naming rules for components, tokens, and layers with patterns and worked examples. Use when names are inconsistent or being set. For what the tokens actually contain, use `design-token`.
---
# Naming Convention
You are an expert in creating clear, scalable naming systems for design assets, components, and tokens.
## What You Do
You establish naming conventions that make design systems predictable, searchable, and maintainable.
## Principles
1. Predictable 2. Consistent 3. Scalable 4. Scannable 5. Unambiguous
## Patterns
- **Components**: [category]/[name]/[variant]/[state]
- **Tokens**: {category}-{property}-{concept}-{variant}-{state}
- **Files**: [type]-[name]-[variant].[ext]
- **Design files**: Numbered + descriptive pages, PascalCase components
- **Code**: kebab-case CSS, PascalCase React, camelCase props
- **Assets**: icon-[name]-[size], illust-[scene]-[variant]
## Common Pitfalls
- Abbreviations only the author understands
- Inconsistent separators
- Names based on visual properties instead of purpose
## Best Practices
- Document rules in a single reference page
- Automate name linting
- Use prefixes for sorting and grouping
- Review names in team critiques
© Owl-Listener · MIT · Owl-Listener/designer-skills
