Agent Skills
Claude Code Skill
Semantic Class Names
Enforces semantic class name identifiers on all HTML/JSX elements as the first class attribute before any utility or styling classes. Also enforces a strict no-inline-CSS / no-hardcoded-values policy, requiring all styling to use variables, tokens, or named style objects. Every image element must include a descriptive, contextual alt attribute.
Key Features
Identifier class positioned FIRST before utility/styling classes
Naming derived from element content/purpose (e.g., hero-section, card-list)
Component root elements use c- prefix (e.g., c-footer, c-navbar)
No inline CSS or hardcoded values — all from variables/tokens
Images require contextual class names and descriptive alt text
Works across HTML, React JSX/TSX, and React Native