What belongs in ARCHITECTURE.md?

How the main modules relate, how state and data flow, and the boundaries every change must keep.

How does ARCHITECTURE.md help AI agents?

It tells them where code belongs and which boundaries to keep, so they are less likely to add circular dependencies or skip layers. Point to it from CLAUDE.md or AGENTS.md so they read it.

# System Architecture & Invariants: Tailwind CSS v4 & CSS-First Styling Specialist

## 1. System Overview

Modern Tailwind CSS v4 conventions. Enforces CSS-first @theme configuration, zero tailwind.config.js, and strict class ordering.

All AI agents operating within this repository must adhere strictly to these architectural boundaries.

### Technology Stack

- **Framework**: Tailwind CSS v4 / React / Next.js

- **Language Standard**: CSS / TypeScript

- **UI & Styling**: Tailwind CSS v4

- **Data Persistence**: None / UI Only

- **Engineering Philosophy**: modern

## 2. Core Architectural Invariants

- **Flat & Pragmatic Layout**: Keep directory nesting minimal (max 2-3 levels) to avoid navigation friction.

- **Accessible UI by Default**: Enforce semantic HTML, keyboard navigability, and proper ARIA roles.

- **Self-Documenting Naming**: Expressive function and variable names over verbose redundant comments.

## 3. Data Flow & State Management Principles

1. **Unidirectional Data Flow**: State flows top-down; mutations flow through explicit, typed handlers.

2. **Boundary Validation**: External inputs (API payloads, query parameters, environment variables) must be parsed with strict schemas before reaching domain logic.

3. **Surgical Precision**: Diffs must remain minimal and scoped exclusively to the objective. Do not reformat unrelated code.

## 4. Forbidden Anti-Patterns & Operational Guardrails

- **Inspect Before Acting**: Always read and understand existing code and imports before suggesting changes.

- **Minimal Surgical Diffs**: Touch only lines relevant to prompt. Preserve existing comments and formatting.

- **Concise & Direct Tone**: Skip conversational pleasantries. Deliver focused diffs and a short rationale.

## 5. Domain-Specific Invariants

- Banned: Do not suggest tailwind.config.js; Tailwind v4 is pure CSS-configured.

- Prefer CSS custom properties within @theme for dynamic theming.

## 6. Implementation Reference Patterns

### Preferred Pattern

```typescript

@import "tailwindcss";

@theme {

--color-primary: #ea580c;

--font-mono: "Geist Mono", monospace;

}

```

### Forbidden Anti-Pattern

```typescript

// Discouraged in v4: Legacy JS config

module.exports = {

theme: { extend: { colors: { primary: "#ea580c" } } }

};

```

## 7. Verification Protocol

Before finalizing any implementation:

1. Define all design tokens, font families, and brand colors inside globals.css using the @theme block.

2. Never create or edit legacy tailwind.config.js or tailwind.config.ts files.

3. Order utility classes logically: layout -> spacing -> typography -> visual -> interactive.

4. Ensure sufficient contrast ratios and focus ring visibility for interactive elements.

Frontend · Any coding agent

Tailwind CSS v4 ARCHITECTURE.md

An ARCHITECTURE.md for Tailwind CSS v4: module responsibilities, data flow and the boundaries code changes must keep.

Path: ARCHITECTURE.md
Loads: Read when referenced
Format: Markdown (.md)
Used by: Any coding agent

All ARCHITECTURE.md presets and how ARCHITECTURE.md works

What this file tells the agent

ARCHITECTURE.md describes module responsibilities, state boundaries and data flow, so a coding agent knows where code belongs before it changes anything. Point to it from CLAUDE.md or AGENTS.md so agents read it.

Configure themes directly in globals.css using `@theme` and `@import 'tailwindcss';`.
Never generate or modify legacy `tailwind.config.js` or `tailwind.config.ts` files.
Use CSS custom properties for dynamic color palettes.
Enforce consistent utility ordering: layout -> spacing -> typography -> background -> borders -> interactivity.

Code to avoid, and what to write instead

The rule steers the agent away from the left and toward the right.

avoid

// Discouraged in v4: Obsolete tailwind.config.js
module.exports = {
  theme: {
    extend: { colors: { brand: "#f97316" } }
  }
};

write instead

@import "tailwindcss";

@theme {
  --color-brand-primary: #f97316;
  --font-display: "Geist Sans", sans-serif;
}

Install it in one command

01
Go to your project root
The file goes at ARCHITECTURE.md, relative to the root.
02
Download the file
Run the command on the right. It downloads this preset and writes the file.
03
Make sure it gets used
Agents read it when your CLAUDE.md or AGENTS.md points to it. Add a line such as "Read ARCHITECTURE.md before structural changes".

$ curl -fsSL "https://www.devscratchpad.tech/api/raw/architecture-md/tailwind-v4" -o "ARCHITECTURE.md"

writes ARCHITECTURE.md

path

ARCHITECTURE.md

To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.

More for Tailwind CSS v4

Other formats

Other ARCHITECTURE.md presets

Questions

What belongs in ARCHITECTURE.md?: How the main modules relate, how state and data flow, and the boundaries every change must keep.
How does ARCHITECTURE.md help AI agents?: It tells them where code belongs and which boundaries to keep, so they are less likely to add circular dependencies or skip layers. Point to it from CLAUDE.md or AGENTS.md so they read it.

Target Standard & File Format

Identity & Activation Rules

Technology Stack Context

Engineering Philosophy

Architectural & Code Quality Conventions

Agent Behavioral Guardrails

Step-by-Step Workflow Procedures

Target File Location