Css Architecture

Solid foundation for keeping CSS organized at scale. Covers BEM, SMACSS, CSS-in-JS, utility-first patterns, and CSS custom properties with practical examples for each. The naming convention guides are especially useful if you're onboarding developers or trying to standardize across teams. Most valuable when you're dealing with component libraries or design systems where consistency actually matters. The BEM examples show the classic block/element/modifier structure clearly, and the best practices section is refreshingly brief instead of lecturing you. If your stylesheets are turning into spaghetti or your team keeps arguing about class names, this gives you concrete patterns to point to.

skills.sh installs: 969
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill css-architecture --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

/* Block - standalone component */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* Element - component part */
.button__icon {
  margin-right: 8px;
  vertical-align: middle;
}

/* Modifier - variant */
.button--primary {
  background-color: #007bff;
  color: white;
}

.button--primary:hover {
  background-color: #0056b3;
// ... (see reference guides for full implementation)