About naming-convention
A design skill for creating clear, consistent naming systems across design assets, components, tokens, files, and code. It provides naming patterns and practices for teams seeking searchable, maintainable design systems.
Key features
- 01Component, token, and file naming patterns
- 02Conventions for design files and code
- 03Asset naming patterns
- 04Guidance on documentation and name linting
- 05Common naming pitfalls and review practices
Use cases
- 01Define names for a new design system
- 02Standardize component and token names across a team
- 03Review asset and code naming conventions
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/naming-conventionin Claude Code to confirm it loaded.
Details
From the project READMENaming 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
Comments
Markdown supported