Css Architecture

Name: Css Architecture
Author: aj-geddes

aj-geddes/useful-ai-prompts

Structure CSS with BEM naming and CSS-in-JS patterns so agent-generated UI stays consistent and maintainable.

Overview

css-architecture is an agent skill for the Build phase that teaches BEM CSS structure and styled-components patterns for maintainable frontend styling.

Install

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

What is this skill?

BEM block, element, and modifier examples for buttons and cards
Variant modifiers for size, disabled state, and elevation
Styled-components TypeScript interface pattern for variant props
Copy-paste CSS snippets for cards, headers, footers, and hover states
Separates layout components from theme variants for scalable design systems
BEM examples cover button and card blocks with multiple modifiers

Compatible agents: Claude Code, Cursor, Codex, Windsurf

Adoption & trust: 725 installs on skills.sh; 250 GitHub stars; 3/3 security scanners passed (skills.sh audits).

What problem does it solve?

Agent-generated CSS sprawls with inconsistent class names and one-off variants that are painful to refactor later.

Who is it for?

Solo builders shipping React or static frontends who want a lightweight naming convention without adopting a full component library.

Skip if: Projects standardized on utility-only CSS (e.g. strict Tailwind) or backend-only repos with no user-facing styles.

When should I use this skill?

When scaffolding or refactoring frontend styles and you want BEM or styled-components conventions applied consistently.

What do I get? / Deliverables

New UI code follows block-element-modifier naming and typed styled-component variants you can extend without global overrides.

BEM-structured CSS modules or classes
Styled component definitions with variant props

Recommended Skills

Frontend Designanthropics/skills

Frontend Design is an agent skill for solo and indie builders who want web interfaces that look intentional, not like ev…516k installs·148k stars

Vercel React Best Practicesvercel-labs/agent-skills

Vercel React Best Practices is an agent skill packaging Vercel Engineering’s performance playbook for React and Next.js.…459k installs·27.7k stars

Remotion Best Practicesremotion-dev/skills

Remotion Best Practices is a domain knowledge agent skill for solo and indie builders who ship video with Remotion—progr…357k installs·3.5k stars

Vercel Composition Patternsvercel-labs/agent-skills

Vercel Composition Patterns is an agent-oriented skill from Vercel Labs that documents how solo and indie builders shoul…204k installs·27.7k stars

Develop Userscriptsxixu-me/skills

Guides building and fixing browser userscripts for Tampermonkey and ScriptCat, emphasizing runtime selection, minimal pe…154k installs·61 stars

Next Best Practicesvercel-labs/next-skills

Next Best Practices is a Vercel Labs agent skill that encodes how to write and review modern Next.js App Router projects…102k installs·919 stars

Journey fit

Primary fit

BuildUI/UX & frontend

Visual product work happens in Build; architecture choices made here reduce refactor cost before Ship. Frontend styling conventions belong on the frontend subphase shelf for discovery alongside components and layout skills.

How it compares

Pattern reference for naming and structure—not a substitute for a complete design system or Figma handoff skill.

Common Questions / FAQ

Who is css-architecture for?

Frontend-focused solo builders and agent users who need consistent CSS or styled-components output across pages and components.

When should I use css-architecture?

During Build frontend work when scaffolding buttons, cards, or layout chrome, or when refactoring messy global CSS before Ship review.

Is css-architecture safe to install?

It is documentation-style prompts only; review the Security Audits panel on this page and treat snippets as templates you audit before paste into production.

SKILL.md

READMESKILL.md - Css Architecture

# BEM (Block Element Modifier) Pattern

## BEM (Block Element Modifier) Pattern

```css
/* 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;
}

.button--secondary {
  background-color: #6c757d;
  color: white;
}

.button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.button--large {
  padding: 15px 30px;
  font-size: 18px;
}

.button--small {
  padding: 5px 10px;
  font-size: 12px;
}

/* Card Block with Elements */
.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card__header {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

.card__body {
  padding: 16px;
}

.card__footer {
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

.card--elevated {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
```


# CSS-in-JS with Styled Components

## CSS-in-JS with Styled Components

```typescript
// styled-components example
import styled from 'styled-components';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}

const StyledButton = styled.button<ButtonProps>`
  display: inline-block;
  border: none;
  border-radius: 4px;
  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
  font-size: ${props => {
    switch (props.size) {
      case 'sm': return '12px';
      case 'lg': return '18px';
      default: return '16px';
    }
  }};
  padding: ${props => {
    switch (props.size) {
      case 'sm': return '5px 10px';
      case 'lg': return '15px 30px';
      default: return '10px 20px';
    }
  }};
  background-color: ${props => {
    if (props.disabled) return '#ccc';
    return props.variant === 'secondary' ? '#6c757d' : '#007bff';
  }};
  color: white;
  opacity: ${props => props.disabled ? 0.6 : 1};
  transition: all 0.3s ease;

  &:hover:not(:disabled) {
    background-color: ${props =>
      props.variant === 'secondary' ? '#5a6268' : '#0056b3'
    };
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
  }
`;

export const Button = (props: ButtonProps) => <StyledButton {...props} />;
```


# CSS Variables (Custom Properties)

## CSS Variables (Custom Properties)

```css
/* Root variables */
:root {
  /* Colors */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-danger: #dc3545;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-text: #333;
  --color-background: #fff;
  --color-border: #e0e0e0;

  /* Typography */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 14px;
  --line-height-base: 1.6;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* Dark theme override */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e0e0e0;
    --color-background: #1e1e1e;
    --color-border: #333;
  }
}

/* Usage */
.button {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ba

What is this skill?

BEM block, element, and modifier examples for buttons and cards

Variant modifiers for size, disabled state, and elevation

Styled-components TypeScript interface pattern for variant props

Copy-paste CSS snippets for cards, headers, footers, and hover states

Separates layout components from theme variants for scalable design systems

BEM examples cover button and card blocks with multiple modifiers

Compatible agents: Claude Code, Cursor, Codex, Windsurf

Adoption & trust: 725 installs on skills.sh; 250 GitHub stars; 3/3 security scanners passed (skills.sh audits).

SKILL.md

READMESKILL.md - Css Architecture

# BEM (Block Element Modifier) Pattern

## BEM (Block Element Modifier) Pattern

```css
/* 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;
}

.button--secondary {
  background-color: #6c757d;
  color: white;
}

.button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.button--large {
  padding: 15px 30px;
  font-size: 18px;
}

.button--small {
  padding: 5px 10px;
  font-size: 12px;
}

/* Card Block with Elements */
.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card__header {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

.card__body {
  padding: 16px;
}

.card__footer {
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

.card--elevated {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
```


# CSS-in-JS with Styled Components

## CSS-in-JS with Styled Components

```typescript
// styled-components example
import styled from 'styled-components';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}

const StyledButton = styled.button<ButtonProps>`
  display: inline-block;
  border: none;
  border-radius: 4px;
  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
  font-size: ${props => {
    switch (props.size) {
      case 'sm': return '12px';
      case 'lg': return '18px';
      default: return '16px';
    }
  }};
  padding: ${props => {
    switch (props.size) {
      case 'sm': return '5px 10px';
      case 'lg': return '15px 30px';
      default: return '10px 20px';
    }
  }};
  background-color: ${props => {
    if (props.disabled) return '#ccc';
    return props.variant === 'secondary' ? '#6c757d' : '#007bff';
  }};
  color: white;
  opacity: ${props => props.disabled ? 0.6 : 1};
  transition: all 0.3s ease;

  &:hover:not(:disabled) {
    background-color: ${props =>
      props.variant === 'secondary' ? '#5a6268' : '#0056b3'
    };
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
  }
`;

export const Button = (props: ButtonProps) => <StyledButton {...props} />;
```


# CSS Variables (Custom Properties)

## CSS Variables (Custom Properties)

```css
/* Root variables */
:root {
  /* Colors */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-danger: #dc3545;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-text: #333;
  --color-background: #fff;
  --color-border: #e0e0e0;

  /* Typography */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 14px;
  --line-height-base: 1.6;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* Dark theme override */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e0e0e0;
    --color-background: #1e1e1e;
    --color-border: #333;
  }
}

/* Usage */
.button {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-ba

Overview

Install

What is this skill?

What problem does it solve?

Who is it for?

When should I use this skill?

What do I get? / Deliverables

Recommended Skills

Journey fit

Who is css-architecture for?

When should I use css-architecture?

Is css-architecture safe to install?

SKILL.md

This week for builders

Overview

Install

What is this skill?

What problem does it solve?

Who is it for?

When should I use this skill?

What do I get? / Deliverables

Recommended Skills

Journey fit

Who is css-architecture for?

When should I use css-architecture?

Is css-architecture safe to install?

SKILL.md