Use consistent CSS naming conventions

SkillCloud & infra

The naming-conventions skill is a reusable agent skill for descriptive, self-documenting naming in any language, including TypeScript, bash, workflow YAML, and Dockerfiles. It helps when naming or renaming an identifier, variable, constant, function, parameter, env var, workflow job, or Dockerfile ARG/ENV, and when reviewing names for vagueness, abbreviations, or redundancy.

Use Use consistent CSS naming conventions in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Use consistent CSS naming conventions and connect your AI. About a minute.

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Use consistent CSS naming conventions skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Make sure the agent can load skills from your project or environment.

Use consistent CSS naming conventionsStart free

What your AI can do with it

  • Suggest descriptive names for variables, constants, and functions
  • Rename identifiers, parameters, and environment variables
  • Review names for vagueness, abbreviations, or redundancy
  • Name workflow jobs in YAML and Dockerfile ARG or ENV entries
  • Apply consistent naming across TypeScript, bash, and Dockerfiles

Getting started

  1. Make sure the agent can load skills from your project or environment.
  2. Add the naming-conventions skill to the skills directory the agent reads.
  3. Configure the agent to allow the skill when naming or reviewing code.
  4. Ask the agent to name or rename an identifier, or to review existing names.

What this skill tells your AI

The instructions your AI receives, as published by gaia-react/gaia in .claude/skills/naming-conventions/SKILL.md and read by Ahel’s review.

Without a naming convention, class names become a guessing game — does .active mean the nav item is active, the button is pressed, or a form field has focus? With BEM or a similar methodology, .button--active is unambiguous. This reduces the time spent searching for existing styles and prevents accidental style conflicts.

Quick Reference

  • BEM (Block__Element--Modifier) is the most widely adopted naming convention
  • Consistent naming lets you understand a class's purpose without reading its styles
  • Namespace utility classes and JS hooks separately from component styles
  • Use kebab-case for class names (not camelCase or snake_case)

Check

Audit the class names in this CSS file. Are they consistently named? Do they follow a clear convention? Are there any ambiguous names that could conflict?

Fix

Rename classes to follow BEM methodology: Block, Block__Element, Block--Modifier pattern.

Explain

Explain BEM naming convention, why naming conventions matter, and how to apply BEM to a real component.

Code Review

Review stylesheets, component styles, and responsive states related to Use consistent CSS naming conventions. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/css/naming-conventions

Signals

GitHub stars
23
Forks
4
Last commit
Oct 2026

Questions

Does it help review CSS code for consistent class naming?
No. The skill covers identifiers, variables, constants, functions, parameters, env vars, workflow jobs, and Dockerfile ARG or ENV entries, not CSS class naming.
Does it check layouts at different screen sizes?
No. The skill is about naming and renaming identifiers and related names, not about checking layouts or screen sizes.
Which languages does it support?
It works in any language, with examples including TypeScript, bash, workflow YAML, and Dockerfiles.
Can it rename an existing environment variable?
Yes. Renaming env vars is one of the naming tasks the skill covers.
Advanced
Item type
skill
Key
naming-conventions
Source
github.com/gaia-react/gaia