naming-convention
owl-listener/designer-skills
Establish predictable naming conventions for design components, tokens, and layers.
What is naming-convention?
This skill helps you create consistent, scalable naming systems for design assets and components. Use it when establishing or fixing naming rules across your design system to ensure names are predictable, searchable, and maintainable.
- Define naming patterns for components, tokens, files, and design pages
- Apply consistent separators and structure across asset types (kebab-case CSS, PascalCase React, camelCase props)
- Establish naming rules for icons, illustrations, and other assets with size and variant suffixes
- Document naming conventions in a single reference page for team alignment
- Identify and avoid common pitfalls like unclear abbreviations and visual-property-based names
How to install naming-convention
npx skills add https://github.com/owl-listener/designer-skills --skill naming-conventionHow to use naming-convention
- 1.Review the five core principles: predictable, consistent, scalable, scannable, and unambiguous
- 2.Choose naming patterns for your asset types (components, tokens, files, design pages)
- 3.Select appropriate separators for each context (slashes, hyphens, camelCase)
- 4.Document your naming rules in a single reference page
- 5.Set up automated linting or manual review processes to enforce consistency
- 6.Share the reference with your team and review names during design critiques
Use cases
- Setting up naming conventions when starting a new design system
- Standardizing inconsistent component names across a large design library
- Creating naming rules for design tokens (colors, spacing, typography)
- Establishing file and layer naming patterns in design tools like Figma
- Implementing automated name linting to enforce conventions
- Design system leads and maintainers
- Product designers building scalable component libraries
- Design teams needing consistent naming across tools and code
- Frontend developers implementing design tokens and components
naming-convention FAQ
This skill covers naming rules and patterns for components, files, and layers. Use design-token when you need to define what tokens actually contain (values, properties, and structure).
No. Use PascalCase for design file components and React components, kebab-case for CSS classes, and camelCase for JavaScript props. The patterns differ by context.
Use the pattern [category]/[name]/[variant]/[state] for components and {category}-{property}-{concept}-{variant}-{state} for tokens. Be consistent with your separators.
Document rules in a single reference page, automate linting where possible, and review names during team critiques to catch inconsistencies early.
Use prefixes like icon-[name]-[size] for icons and illust-[scene]-[variant] for illustrations to keep them sortable and grouped.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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
- 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
Related skills
More from owl-listener/designer-skills and the wider catalog.
navigation-patterns
Select and design navigation patterns (tabs, drawer, hierarchy, hub) matched to your product structure and user tasks.
north-star-vision
Define a compelling long-horizon product vision that aligns teams and anchors strategic decisions.
onboarding-design
Design first-run experiences that get users to value fast and build confidence.
opportunity-framework
Identify, score, and prioritize design opportunities against impact and effort.
pattern-library
Document reusable design patterns with problem context, solution, anatomy, and related patterns.
presentation-deck
Structure design presentations that persuade your specific audience and drive decisions.