Saltar al contenido
Marketplace

naming-convention

de owl-listener

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

Resumen

SKILL.mdLeída en 9a6930c

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

Archivos 1 archivo

Instálala a mano

Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:

npx skills add owl-listener/designer-skills --skill naming-convention

Más de owl-listener

  • presentation-deckowl-listenerStructure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.2,800 instalaciones en skills.sh0
  • typography-scaleowl-listenerCreate a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).2,300 instalaciones en skills.sh0
  • visual-hierarchyowl-listenerEstablish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).2,300 instalaciones en skills.sh0
  • color-systemowl-listenerBuild a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).2,200 instalaciones en skills.sh0
  • dark-mode-designowl-listenerAdapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.2,200 instalaciones en skills.sh0
Todas las skills de owl-listener