About naming-convention
A design-system skill for defining clear, consistent naming rules across assets, components, tokens, files, and code. It offers reusable naming patterns and review practices for teams maintaining searchable and scalable design systems.
Key features
- 01Naming patterns for components and tokens
- 02Conventions for files and design assets
- 03Code naming guidance for CSS and React
- 04Rule documentation and automated linting advice
- 05Team review practices for naming
Use cases
- 01Defining component and token names
- 02Creating naming rules for design files
- 03Reviewing inconsistent asset labels
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