← LeaderboardThe Skill Leaderboard

naming-convention

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`.

Published by Owl-Listener ↗Owl-Listener/designer-skills

Try your first task

naming-convention

Start a fresh conversation. Replace the highlighted placeholders.

Use naming-convention to establish a naming convention for [design system or codebase] covering components, tokens, files, design assets, and code, with clear rules and worked examples.

Required inputs

[design system or codebase]

User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗

SKILL.md

name: naming-conventiondescription: 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

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