cascade.reasoning
@layer reset, tokens, base, layout, components, utilities, overrides;

CSS engineering judgment, encoded as Agent Skills.

Three deterministic rule systems: css-engineer, css-reviewer, and css-refactor, that route into one shared knowledge base, so AI coding agents generate, audit, and modernize CSS the same way every time.

View on GitHub Browse the skills

One knowledge base, three roles

Each skill is a lean core that resolves rules from the same shared references, so the rules can't drift between generating, reviewing, and refactoring.

Generate

css-engineer

Writes new modern native CSS: decision engine for layout, responsive, color, and animation choices, cascade layers, tokens, logical properties, and a self-review checklist.

View source
Audit

css-reviewer

Reviews existing CSS and reports structured findings (Issue, Severity, Location, Problem, Why, Fix, Example) across architecture, modern CSS, accessibility, forms, and performance.

View source
Modernize

css-refactor

Refactors CSS without changing rendering: literals to tokens, physical to logical properties, Sass to native, unlayered to layered, with a risk-rated change list.

View source

The layer contract

Every rule the skills generate lands in exactly one of these layers, declared once, in this order.

  1. reset

    Contains
    Normalization, box-sizing
    Never
    Component styles

  2. tokens

    Contains
    :root custom properties, @property registrations, @font-face
    Never
    Selectors other than :root / ::backdrop

  3. base

    Contains
    Element defaults (body, a, h1–h6)
    Never
    Class selectors

  4. layout

    Contains
    Page-level scaffolding: shells, grids, regions
    Never
    Component internals

  5. components

    Contains
    Component classes
    Never
    Page-specific overrides

  6. utilities

    Contains
    Single-purpose helpers
    Never
    Multi-declaration rule blocks

  7. overrides

    Contains
    Third-party fixes, documented exceptions
    Never
    New design decisions

Browser profiles

Every task resolves a profile before generating CSS: explicit instruction → project config → default evergreen.

View browser-profiles.md
Profile Fallbacks Behavior
modern none Latest engines; ship all Stable features directly, no @supports.
evergreen minimal Auto-updating browsers; @supports reserved for Emerging features.
enterprise progressive Slow-updating fleets; working baseline first, then enhance.
legacy extensive Every non-universal feature needs a working fallback.

Verified, not just documented

Twenty-four of the rules are enforced by a zero-dependency linter, so they are executable rather than advisory. This site's own stylesheet, and every example inside the skill files, is gated by it on every push. The judgment rules, whether a token is semantic or whether @scope is warranted, stay with css-reviewer: a clean run is a floor, not a pass.

View tests/README.md 
$ ./tests/run.sh

== linter self-test ==
pass  compliant.css produced no findings
pass  violations.css matched all 38 expected findings
pass  examples.md extraction matched expectations
pass  all 24 rules covered by fixtures

== repo stylesheets ==
No findings across 1 file(s).

== reference examples ==
No findings across 12 file(s).

All checks passed.

Install

Symlink the skills into Claude Code so they stay in sync with this repo.

ln -s "$PWD"/skills/css-engineer "$PWD"/skills/css-reviewer \
      "$PWD"/skills/css-refactor "$PWD"/skills/shared ~/.claude/skills/