naming-convention — Claude Code skill: naming rules for design systems
Sets one naming scheme for components, tokens and layers so names stop drifting between files.
npx skills add Owl-Listener/designer-skills --skill naming-convention -a claude-codeWhat naming-convention does
Reach for this skill when names in a design system have already drifted apart, or when you are about to lock them down. The agent works through components, tokens, files, assets and code with a pattern for each: components follow [category]/[name]/[variant]/[state], tokens {category}-{property}-{concept}-{variant}-{state}, assets icon-[name]-[size] and illust-[scene]-[variant]. Code gets its own split — kebab-case in CSS, PascalCase in React, camelCase for props.
Five principles sit behind it: predictable, consistent, scalable, scannable, unambiguous. The pitfalls list is the useful part. Abbreviations only the author understands, mixed separators in one project, and names taken from how something looks instead of what it does. That last one breaks hardest: repaint the button and the name lies.
The skill suggests keeping the rules on a single reference page, linting names automatically, and reviewing them in team critiques. If you need to describe what tokens actually contain rather than how to name them, that is design-token — a different job.
What it helps with
- bring component names onto one pattern
- pin down rules for tokens and their states
- drop mixed separators from file names
- rename assets by purpose instead of appearance
- settle on casing for CSS, React and props
Example prompts for the agent
- Check component names under
src/componentsand align them with[category]/[name]/[variant]/[state] - Write naming rules for our tokens and put them on one reference page
- Find abbreviations in this project that only the author understands and suggest replacements
How to install naming-convention
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a claude-code2Manually: put the files in place
~/.claude/skills/naming-convention/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/naming-convention/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a codex2Manually: put the files in place
.agents/skills/naming-convention/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a cursor2Manually: put the files in place
.cursor/skills/naming-convention/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills naming-convention2Manually: put the files in place
.github/skills/naming-convention/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/naming-conventionManually: put the files in place
.devin/skills/naming-convention/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill naming-convention -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about naming-convention
How do I install naming-convention in Claude?
Run npx skills add Owl-Listener/designer-skills --skill naming-convention -a claude-code. The skill lands in ~/.claude/skills/naming-convention/SKILL.md.
What does naming-convention do?
It sets naming patterns for components, tokens, files, assets and code, and lists common mistakes such as private abbreviations and inconsistent separators.
How is it different from design-token?
naming-convention covers how you name things. What tokens actually contain is the job of design-token.
Source text
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
