Skills
.Work. You
Rest

css_classname-naming

Community

Standardize CSS classnames.

Software Engineering#frontend#react#css#developer experience#naming conventions#css modules
AuthorViewableGravy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides clear guidelines for naming CSS classnames when using CSS Modules in React, ensuring consistency and maintainability across the project.

Core Features & Use Cases

  • Consistent Naming: Enforces camelCase for classnames, making them easy to access in JavaScript.
  • Avoids BEM: Eliminates the need for complex BEM syntax due to CSS Modules' local scoping.
  • Modifier Handling: Defines how to handle conditional states and modifiers using descriptive names.
  • Use Case: When developing a new React component, follow these rules to ensure its CSS classnames integrate seamlessly with the existing codebase, preventing naming conflicts and improving developer experience.

Quick Start

Follow the camelCase naming convention for all CSS classnames within your React components using CSS Modules.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: css_classname-naming
Download link: https://github.com/ViewableGravy/better-ecs/archive/main.zip#css-classname-naming

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.