CSS Architecture

css-architecture

Organize CSS using BEM, SMACSS, and CSS-in-JS patterns. Use when building scalable, maintainable styling systems with proper naming conventions.

aj-geddes/useful-ai-prompts·712installs351starsCode Review & Quality

SKILL.md

Full skill instructions

CSS Architecture

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:

/* 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)

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

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/aj-geddes/useful-ai-prompts --skill css-architecture

View on GitHub

css-architecture

More Code Review & Quality skills

View all

Code Review & Quality

azure-enterprise-infra-planner

Enterprise Azure infrastructure architect generating Bicep or Terraform from workload descriptions.

1.5K 454.3K

View

Code Review & Quality

caveman-review

Ultra-compressed code review comments: location, problem, fix on one line each.

109.9K 388.8K

View

Code Review & Quality

requesting-code-review

Dispatch code review subagents with focused context to catch issues before they compound.

295.4K 245.8K

View

Code Review & Quality

executing-plans

Execute a written implementation plan with critical review and task checkpoints.

295.4K 229.1K

View

Code Review & Quality

subagent-driven-development

Dispatch fresh subagents per task with two-stage review (spec compliance, then code quality) in the current session.

295.4K 221.7K

View

Code Review & Quality

seo-audit

Comprehensive SEO auditing framework covering crawlability, indexation, speed, on-page optimization, and content quality.

53.3K 220.8K

View

Code Review & Quality

receiving-code-review

Evaluate code review feedback with technical rigor before implementing, avoiding performative agreement and blind implementation.

295.4K 208.8K

View

Code Review & Quality

gpt-image-2

Generate images via your ChatGPT subscription using text-to-image, image editing, and style transfer.

16 169.5K

View

Code Review & Quality

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

179.7K 122.7K

View

Code Review & Quality