Borrowing it
Nothing to install: this file belongs to sourjya/kiro-rails. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/sourjya/kiro-rails/main/.claude/commands/review-css-architecture.mdgit clone --depth 1 https://github.com/sourjya/kiro-railsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/commands/sourjya/kiro-rails/review-css-architecture)<a href="https://agentmods.dev/commands/sourjya/kiro-rails/review-css-architecture"><img src="https://agentmods.dev/badge/commands/sourjya/kiro-rails/review-css-architecture/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/commands/sourjya/kiro-rails/review-css-architecture"><img src="https://agentmods.dev/badge/commands/sourjya/kiro-rails/review-css-architecture.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00030 | $0.01909 |
| Opus 5 | $0.00015 | $0.00955 |
| Sonnet 5 | $0.00006 | $0.00382 |
| Haiku 4.5 | $0.00003 | $0.00191 |
Grade A, and why
review-css-architecture scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 156 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Before scanning, read docs/decisions/ ADRs if they exist. Use documented design system decisions (intentional overrides, chosen methodology) to distinguish intentional patterns from accidental inconsistency.
Act as a principal-level frontend engineer and design systems architect performing a comprehensive CSS and styling architecture audit.
Your mission is not to enforce a preferred methodology. It is to determine whether the styling layer is consistent, maintainable, and free of patterns that cause visual regressions, specificity battles, or cascading side effects when code changes. A styling system that works today but cannot be changed safely is a liability.
House Standard: Console-Idiom Rubric
Before scanning, load the "UX Console-Idiom Rubric" rules in CLAUDE.md. The D (Density & Type)
and K (Consistency & Tokens) families define the quantitative thresholds for this
review. Specifically:
- D-1/D-2: body text size range and font weight count - flag violations with rubric IDs
- K-1/K-2/K-3: border-radius set size, color palette adherence, spacing scale
- K-4/K-5: icon style consistency, active/selected state treatment
Every finding that maps to a rubric check MUST carry the rubric ID and severity.
The token audit (Section C of output) should validate against the design tokens
declared in user-project-overrides.md.
Evidence from scripts/style-survey.js (computed-style census) is preferred over
manual inspection for D and K family checks.
Review Objectives
Identify:
-
Design token usage and consistency. Colors, spacing, typography, border radii, shadows, and z-index values that are hardcoded instead of referencing design tokens or CSS custom properties. Flag where the same value appears in multiple places with no shared source of truth. Flag token families that are partially adopted - some files using tokens, others hardcoding equivalent values.
-
Utility class sprawl vs. component encapsulation. In utility-first codebases (Tailwind, etc.): flag where class lists have grown beyond readability, where the same long utility combination is repeated across components without extraction, and where utility classes are used to patch component styles rather than define them. In component-scoped styling: flag where global selectors leak into component scope or where styles are duplicated across components that should share a base.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 156 lines · 30 tokens per session scan A 8b78bbf1acbb
review-css-architecture is a command published in the GitHub repository sourjya/kiro-rails (9 stars, last pushed 1mo ago), licensed MIT. It adds 30 tokens to every session and 1,909 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other commands, from other repositories
ux-recommend
The v2 flagship. Runs the 5-parallel-search Python engine across 11 data manifests (75+ styles, 170+ palettes, 65+ type pairs, 120+ components, 170+ industries, 110+ UX laws, 50+ motion presets, 120+ anti-patterns, 92 brand specs) and returns a complete recommended design system for your project — with always-on…
color-specialist
Use when colour is failing. Contrast below AA, a palette with no system behind it, dark mode that is only inverted light mode, or semantic colours that carry no meaning.
responsive-design-specialist
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.
revisar-ui
Auditoria visual retroativa de 6 pilares do código frontend implementado.
colorize
Introduce or rework color strategy.
extract
Pull repeated patterns into reusable components and design tokens.