No More Memorizing CSS Architecture.
The parent decides the child's layout; the child only styles its internals.
SpiraCSS is a CSS architecture based on this single principle — design resilience, not rules.
CSS design tends to rely on conventions, and consistency erodes as teams scale.
SpiraCSS keeps the architecture intact — structure and Stylelint enforce it.
No new CSS features like @scope or @layer required. Just familiar SCSS.
Not a better ruleset — a fundamentally different approach.
- Structure decides placement — No judgment calls. The answer lies in HTML structure.
- Designed to hold — Not conventions to memorize. An architecture that stays intact.
- AI-agent ready — Error messages designed for AI agents. Supports AI-driven fixes.
PixelPerfect CSS Diff is a Chrome extension by the creator of SpiraCSS for visual QA: overlay a reference image, align with guides, capture browser-side CSS changes, and copy the diff as AI-ready fix instructions.
- CSS Design Is Breaking Down — Why AI Agents Need a New Approach
- CSS Drift — Why Conventions Break Down
- CSS Architecture Lint — TypeScript-Style Errors
- Parent Owns Layout — A New CSS Architecture for the AI Era (Drift-Resistant by Design)
- Same Lint, Same Result — A Stylelint Toolchain for Humans and AI Agents
Beta
- Package manager:
pnpm(pnpm-workspace.yaml) - Install workspace dependencies from the repo root:
pnpm install