＋ Add to collection

Install (CLI)

npx skillmds add owl-listener/naming-convention

Or Copy and Paste in Your Agent chat

Please install the Agent Skill "owl-listener/naming-convention" for me from skillmd.com. A SkillMD skill is a SKILL.md file — plain markdown — that you save into my skills directory. Use whichever fetch route fits your setup: (1) if you have a terminal, run npx -y skillmds add owl-listener/naming-convention; (2) otherwise fetch https://api.skillmd.com/api/skills/owl-listener/naming-convention/raw (served as text/markdown) and save it as naming-convention/SKILL.md in your skills directory; (3) if the SkillMD MCP tools are connected, call skillmd_download with slug "owl-listener/naming-convention" and save the returned files under naming-convention/. Show me the SKILL.md before saving if you'd like me to review it. If your skills directory is read-only (e.g. the Claude desktop app), save the files to a working folder instead and tell me — I'll add them through my app's skills settings.

README badge

Show this skill's registry status in your repo:

[![SkillMD](https://skillmd.com/badge/owl-listener/naming-convention.svg)](https://skillmd.com/skills/owl-listener/naming-convention)

naming-convention

Name: naming-convention
Rating: 4.2 (5 reviews)
Author: Owl Listener

owl-listener/naming-convention · Agent Skill

by Owl Listener · single

Published Jul 5, 2026 · Last updated Jul 6, 2026

Establish clear naming conventions for design assets, components, and tokens to make design systems predictable and maintainable.

SKILL.md

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

---
name: naming-convention
description: Establish clear naming conventions for design assets, components, and tokens to make design systems predictable and maintainable.
---
# 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

Owl-Listener/designer-skills/tree/main/design-systems/skills/naming-convention commit · acc3e574b3

▌
skill-frontend-design · pwdev-solucoes bundle
Design precise, production-grade enterprise UI — dashboards, admin panels, SaaS interfaces, and data-heavy applications. Use this skill for professional software interfaces that need Jony Ive-level craft: clean, minimal, functional, with intentional personality. Do NOT use for creative landing pages, marketing sites.

2
repo stars
▌
design-color · tinh2
Adds strategic color to monochromatic or dull interfaces using oklch for perceptually uniform palettes, generating harmonious color systems with automatic light/dark variants and accessible contrast ratios.

13
repo stars
▌
icon-system · joshuashepherd
Establishes or validates a canonical Icon wrapper component, size token scale, stroke weight conventions, and illustration usage standards for a project, creating src/components/ui/icon.tsx and documenting the system.

1
repo stars
▌
design-system · alirezarezvani bundle
Onboards brand tokens and generates a 12-token CSS palette for consistent, WCAG-AA-compliant HTML document styling across markdown conversions.

20.4k
repo stars
▌
figma-design-analysis · voltagent bundle
Analyzes and documents Figma's marketing design system, including color tokens, typography hierarchy, spacing, and component patterns.

50.9k
repo stars
▌
article-sketchnote-editorial · nexu-io bundle
Transform a concept into an editorial-style visual narrative with six distinct layouts, four font families, and a magazine-like arc from problem to insight.

4
installs

Frequently asked questions

How do I install the naming-convention skill?

Run npx skillmds add owl-listener/naming-convention in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the naming-convention skill do?

Establish clear naming conventions for design assets, components, and tokens to make design systems predictable and maintainable. It is listed under Design & Media, Coding & Dev Tools, Docs & Writing, Design Systems, Technical Writing on SkillMD.

Is naming-convention safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with naming-convention?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is naming-convention free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published naming-convention?

Owl Listener (@owl-listener) published this skill. Their other Agent Skills are listed on their SkillMD profile.