CSS Rules Generator

Build an AGENTS.md or CLAUDE.md rules file that tells AI coding agents to write modern, native CSS. Pick the categories you use, choose a format, copy or download. Everything runs in your browser.

Output

# Modern CSS Patterns

Use these CSS patterns instead of legacy workarounds. Each block shows the modern approach that replaces verbose, JavaScript-dependent, or hack-based solutions. Prefer these modern properties and functions: they reduce code, remove JavaScript dependencies, and improve maintainability.

## Layout

/* Centering with grid */.parent {  display: grid;  place-items: center;}/* Sticky headers (no JS scroll listeners) */.header {  position: sticky;  top: 0;}/* Aspect ratios (no padding hack) */.video {  aspect-ratio: 16 / 9;}/* Gap (no margin hacks) */.row {  display: flex;  gap: 16px;}/* Grid areas (no line numbers) */.layout {  display: grid;  grid-template-areas: "header header" "sidebar main" "footer footer";}/* Subgrid (align nested grids) */.child {  display: grid;  grid-template-columns: subgrid;}/* Inset shorthand */.overlay {  position: absolute;  inset: 0;}/* Logical properties (direction-aware) */.box {  margin-inline-start: 1rem;  padding-block: 1rem;}/* Container queries (no media queries for components) */.wrapper {  container-type: inline-size;}@container (width > 400px) {  .card {    grid-template-columns: auto 1fr;  }}/* Anchor Positioning (no JS calculations) */.popover {  position-anchor: --anchor-el;  position: absolute;  top: anchor(bottom);  left: anchor(center);}

## Typography

/* Fluid type (no media queries) */h1 {  font-size: clamp(1rem, 2.5vw, 2rem);}/* Balanced headlines */h1,h2 {  text-wrap: balance;  max-width: 40ch;}/* Pretty long-form paragraphs (avoid orphan last-line words) */article p {  text-wrap: pretty;}/* Line clamp (no JS truncation) */.card-title {  display: -webkit-box;  -webkit-line-clamp: 3;  line-clamp: 3;  overflow: hidden;}/* Variable fonts (one file, all weights) */@font-face {  font-family: "MyVar";  src: url("MyVar.woff2");  font-weight: 100 900;}/* Font loading (no FOIT) */@font-face {  font-family: "MyFont";  src: url("MyFont.woff2");  font-display: swap;}/* Centering text on cap height (no line-height tweaks) */.btn {  text-box-trim: trim-both;  text-box-edge: cap alphabetic;}

## Color

/* CSS variables */:root {  --primary: #7c3aed;  --spacing: 16px;}.btn {  background: var(--primary);}/* Color mixing (no preprocessor) */.card {  background: color-mix(in oklch, #3b82f6 60%, #ec4899);}/* oklch (perceptually uniform) */--brand: oklch(0.55 0.2 264);--brand-light: oklch(0.75 0.2 264);/* Relative color syntax (color variants) */.btn {  background: oklch(from var(--brand) calc(l + 0.2) c h);}/* Dark mode (no extra CSS) */:root {  color-scheme: light dark;}/* light-dark() function */:root {  color-scheme: light dark;  color: light-dark(#111, #eee);}

## Selectors

/* :has() (parent selector, no JS) */.form-group:has(input:invalid) { border-color: red; }/* :is() (grouping) */.card :is(h1, h2, h3) { margin-bottom: 0.5em; }/* :where() (zero specificity resets) */:where(ul, ol) { margin: 0; padding-inline-start: 1.5rem; }/* :nth-child(n of selector) (count only matching elements) */.item:nth-child(2n of .featured) { background: var(--accent); }/* :focus-visible (no mouse outlines) */button:focus-visible { outline: 2px solid var(--focus-color); }/* :user-invalid (form validation, no JS) */input:user-invalid { border-color: red; }input:user-valid { border-color: green; }/* CSS nesting (no Sass needed) */.nav {  display: flex;  a {    color: #888;    &:hover { color: white; }  }}

## Animation

/* Scroll-linked animations */.reveal {  animation: reveal linear both;  animation-timeline: view();  animation-range: entry 0% entry 100%;}/* Entry animations (no JS timing) */.card {  transition:    opacity 0.3s,    transform 0.3s;  @starting-style {    opacity: 0;    transform: translateY(10px);  }}/* Animate display: none */.panel {  transition:    opacity 0.2s,    overlay 0.2s allow-discrete;  transition-behavior: allow-discrete;}/* Independent transforms */.icon {  translate: 10px 0;  rotate: 45deg;  scale: 1.2;}/* Height auto animation (no JS) */:root {  interpolate-size: allow-keywords;}.accordion {  height: 0;  overflow: hidden;  transition: height 0.3s ease;}.accordion.open {  height: auto;}/* Typed custom properties (animatable) */@property --hue {  syntax: "<angle>";  inherits: false;  initial-value: 0deg;}

## Components

/* Scroll snap (no carousel library) */.carousel {  scroll-snap-type: x mandatory;  overflow-x: auto;  display: flex;  gap: 1rem;}.carousel > * {  scroll-snap-align: start;}/* Popover (no JS toggles) */#menu[popover] {  position: absolute;  margin: 0.25rem 0;}/* Accent color (style form controls) */input[type="checkbox"] {  accent-color: #7c3aed;}/* Frosted glass (no opacity hacks) */.glass {  backdrop-filter: blur(12px) saturate(1.5);  background: rgba(255, 255, 255, 0.1);}/* Object-fit (no background-image hack) */img {  object-fit: cover;  width: 100%;  height: 200px;}/* Overscroll behavior (no scroll chaining) */.modal-content {  overflow-y: auto;  overscroll-behavior: contain;}/* Auto-growing textarea (no JS) */textarea {  field-sizing: content;  min-height: 3lh;}

## Architecture

/* Cascade layers (organize CSS without specificity wars) */@layer reset, base, components, utilities;@layer components {  .card { padding: 1rem; background: white; }}@layer utilities {  .mt-4 { margin-top: 1rem; }}/* Scoped styles (no BEM) */@scope (.card) {  .title {    font-size: 1.25rem;  }  .body {    color: #444;  }}/* Isolation (contain z-index within components) */.card-container {  isolation: isolate;}/* Lazy rendering (no IntersectionObserver) */.section {  content-visibility: auto;  contain-intrinsic-size: auto 500px;}/* Windows High Contrast support */@media (forced-colors: active) {  .btn {    background: ButtonFace;    color: ButtonText;    border: 1px solid ButtonText;    forced-color-adjust: none;  }}

## Rules

Prefer CSS over JavaScript for layout, animation, and interaction when browser support allows.
Use CSS custom properties for theming. Use @property when you need typed or animatable values.
Use CSS nesting. The & prefix is optional for element selectors, required for pseudo-classes (&:hover) and compound selectors (&.active).
Use oklch for perceptually uniform color manipulation. Use color-mix() for blending.
Use clamp() for fluid values. Avoid media query breakpoints for font sizes.
Use logical properties (inline, block) over physical (left, right) for internationalization.
Use gap instead of margin hacks for spacing in flex and grid layouts.
Use :has() for parent selection instead of JavaScript class toggling.
Use @layer to manage specificity instead of !important or high-specificity selectors.
Check browser support at https://modern-css.com before using limited-availability features in production.

Reference: https://modern-css.com

What this generator does

AI coding agents read project files before they write code. A file named AGENTS.md or CLAUDE.md in your repo root acts as a standing instruction set. The agent loads it and follows the rules inside.

This page builds that file for CSS. You pick the categories you care about. The generator stitches together the matching modern CSS patterns, adds an optional rules checklist, and gives you the full file to copy or download. Nothing is sent to a server. The whole thing runs in your browser.

The patterns come from the same reference data that powers the rest of modern-css.com. Each block shows a native approach that replaces an older hack or a JavaScript workaround.

Why agents need CSS rules

Most models were trained on years of web code. A lot of that code is old. Left alone, an agent will reach for floats, margin spacing tricks, the padding-bottom aspect ratio hack, and JavaScript class toggles. These patterns still work, but they are no longer the simplest option.

A rules file shifts the default. Instead of guessing, the agent has a written reference for the modern equivalent. That means fewer review comments and less rewriting after the fact.

What changes in practice

With a CSS rules file in place, an agent tends to produce code that looks different in a few specific ways:

Layouts use Grid and Flexbox with gap instead of margins for spacing.
Component responsiveness comes from container queries rather than viewport media queries.
Parent state is handled with :has() instead of a JavaScript class toggle.
Color variants are derived with oklch and color-mix() instead of hardcoded hex values.
Entry and exit animations use @starting-style and allow-discrete instead of timing hacks.

AGENTS.md and CLAUDE.md

The two formats hold the same content. The difference is which tools look for which filename.

AGENTS.md

AGENTS.md is a shared convention that several tools read, including Codex, Cursor, and Aider. It is meant to be a single file that any agent can pick up. If you work across more than one tool, this is the safer default.

CLAUDE.md

CLAUDE.md is the file Claude Code looks for in a project. It loads automatically when you open the repo. The output here adds a short framing line at the top so the rules read as project conventions.

You can generate both and keep them side by side. They do not conflict.

How to use the output

The steps are short:

Check the CSS categories you want the agent to follow.
Choose AGENTS.md or CLAUDE.md.
Decide whether to include the rules checklist at the end.
Copy the file or download it, then drop it in your repo root.

Commit the file so it travels with the project. Every agent that opens the repo from then on reads the same rules.

Keeping it current

CSS keeps moving. Some features in the output have wide browser support. Others are newer and ship in fewer browsers. Check the support status on modern-css.com before you rely on a newer feature in production. The generator points agents at modern patterns, but the call on browser support is still yours.

What it does not do

This tool writes rules. It does not rewrite your existing CSS. If you want an agent to modernize old code, the prompt library has prompts written for that, and you can point the agent at the rules file at the same time.

It also does not call a model. There is no account, no key, and no usage limit. The output is built from local data the moment you change a setting.