Naming Convention
- 953 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
naming-convention is a design-system skill that establishes predictable naming rules for UI components, design tokens, and asset files for developers who need searchable, maintainable design libraries.
About
naming-convention is an owl-listener/designer-skills agent skill that codifies scalable naming systems for design assets. It applies five principles—predictable, consistent, scalable, scannable, and unambiguous—to patterns such as [category]/[name]/[variant]/[state] for components, {category}-{property}-{concept}-{variant}-{state} for tokens, and typed file names for exports. Design-system and frontend engineers reach for naming-convention when token sprawl or ambiguous component names slow discovery in code and Figma. The skill outputs documented rules with examples so new contributors name elements the same way across repositories and design files.
- Establishes 5 core principles: Predictable, Consistent, Scalable, Scannable, Unambiguous
- Defines clear patterns for components, tokens, files, design pages, code, and assets
- Documents rules in a single reference page for the entire team or agent
- Prevents common pitfalls like author-only abbreviations and purpose-based naming
- Includes automation and linting recommendations for ongoing enforcement
Naming Convention by the numbers
- 953 all-time installs (skills.sh)
- +43 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #429 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill naming-conventionAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 953 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you name design tokens and UI components consistently?
Create predictable, searchable, and maintainable naming systems for design tokens, UI components, and assets.
Who is it for?
Design-system maintainers scaling component libraries where inconsistent names block search and codegen.
Skip if: Solo prototypes with a handful of components and no plan to grow a shared library.
When should I use this skill?
The user asks for naming conventions for design tokens, components, assets, or Figma pages.
What you get
Naming convention document with component, token, file, and design-page patterns plus examples.
- Naming convention guide
- Pattern examples for tokens and components
Files
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What component naming pattern does naming-convention use?
naming-convention recommends [category]/[name]/[variant]/[state] for UI components so paths stay predictable in code and design tools. The pattern separates hierarchy levels and makes variants and states explicit.
How does naming-convention format design token names?
naming-convention uses {category}-{property}-{concept}-{variant}-{state} for tokens, chaining semantic segments with hyphens. The format keeps color, spacing, and typography tokens scannable in JSON and CSS variable exports.
Is Naming Convention safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.