How does this skill improve my design-to-code workflow?

By enforcing consistent naming patterns, it reduces friction between designers and developers, making tokens and components easily searchable and predictable across different tools.

What casing styles does the skill support?

It provides standards for PascalCase (React components), kebab-case (CSS/HTML), and camelCase (JavaScript props), ensuring each language follows industry best practices.

Why should I avoid visual-based names for components?

Visual names like 'blue-button' become outdated when branding or styles change; this skill promotes purpose-based naming like 'primary-action' for better long-term scalability.

Can I use this for asset management?

Yes, it includes specific patterns for naming icons and illustrations based on name, size, and variant to keep project assets organized and scannable.

Design System Naming Conventions

Name: Design System Naming Conventions
Author: Owl-Listener

byOwl-Listener

•

699

•

设计工具

Standardizes naming patterns for design tokens, components, and assets to ensure a scalable and maintainable design-to-code workflow.

This skill empowers Claude to act as a design systems architect, establishing rigorous naming conventions across design assets, UI components, and design tokens. It provides structured patterns for React (PascalCase), CSS (kebab-case), and file organization, helping teams avoid common pitfalls like cryptic abbreviations or inconsistent separators. It is particularly useful during the initial setup of a design system or when refactoring legacy codebases to ensure a single source of truth that is predictable and searchable for both designers and developers.

主要功能

01Establishes multi-layer token structures for properties, concepts, and states.

02Enforces consistent casing conventions including PascalCase, kebab-case, and camelCase.

03Provides guidance on avoiding visual-based naming in favor of purpose-driven naming.

04699 GitHub stars

05Defines hierarchical component naming patterns using category, name, and state variants.

06Standardizes file and asset naming across icons, illustrations, and documentation.

使用场景

01Refactoring a legacy UI kit to align with modern design token standards.

02Auditing existing codebases for naming inconsistencies and ambiguous abbreviations.

03Setting up a new design system architecture from scratch with clear naming rules.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

主要功能

01Establishes multi-layer token structures for properties, concepts, and states.

02Enforces consistent casing conventions including PascalCase, kebab-case, and camelCase.

03Provides guidance on avoiding visual-based naming in favor of purpose-driven naming.

04699 GitHub stars

05Defines hierarchical component naming patterns using category, name, and state variants.

06Standardizes file and asset naming across icons, illustrations, and documentation.

使用场景

01Refactoring a legacy UI kit to align with modern design token standards.

02Auditing existing codebases for naming inconsistencies and ambiguous abbreviations.

03Setting up a new design system architecture from scratch with clear naming rules.