Agent skill · design visual · aj-geddes
css-architecture
Organize CSS using BEM, SMACSS, and CSS-in-JS patterns. Use when building scalable, maintainable styling systems with proper naming conventions.
Why this skill is useful
Codifies CSS organization standards using BEM, SMACSS, and CSS-in-JS, which the AI could infer but now doesn't have to guess.
What it needs
About 1k tokens when loaded. Last updated 2026-03-04. 307 stars on the source repository.
What this skill does
CSS Architecture Table of Contents Overview When to Use Quick Start Reference Guides Best Practices Overview Build maintainable CSS systems using methodologies like BEM (Block Element Modifier), SMACSS, and CSS-in-JS patterns with proper organization and conventions. When to Use Large-scale stylesheets Component-based styling Design system development Multiple team collaboration CSS scalability and reusability Quick Start Minimal working example: Reference Guides Detailed implementations in the references/ directory: Guide Contents --- --- BEM (Block Element Modifier) Pattern BEM (Block Element Modifier) Pattern SMACSS (Scalable and Modular Architecture for CSS) SMACSS (Scalable and Modular Architecture for CSS) CSS-in-JS with Styled Components CSS-in-JS with Styled Components CSS Variables (Custom Properties) CSS Variables (Custom Properties) Utility-First CSS (Tailwind Pattern) Utility-First CSS (Tailwind Pattern) Best Practices ✅ DO Follow established patterns and conventions Write clean, maintainable code Add appropriate documentation Test thoroughly before deploying ❌ DON'T Skip testing or validation Ignore error handling Hard-code configuration values
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/css-architecture