Naming Convention

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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

Instructions onlyDesign & Creative
AI-generated overview

Establishes naming conventions for design components, tokens, layers, files, and code.

What it does
This skill defines naming rules for design assets, components, and tokens so that a design system stays predictable, searchable, and maintainable. It provides naming patterns for components, tokens, files, design files, code, and assets, along with common pitfalls and best practices. The output is a documented naming convention rather than any generated file or code.
When to use it
Use it when names across a design system are inconsistent or when naming rules are being set for the first time. It fits teams that need a shared reference for component, token, and file naming.
Requirements
None beyond the agent; instructions only, with no scripts or external tools.

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

Source and attribution

Source:owl-listener/designer-skillsindesign-systems/skills/naming-conventionat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Naming Convention Agent Skill | SourceWeft