Radii Audit

About

Most design reviews are vague: "it doesn't look right" or "the spacing feels off". Radii Audit gives you precision. Drop this skill into Claude Code and get a structured design review across 7 categories — spacing, typography, color, layout, effects, interaction, and motion — using the exact vocabulary from Radii's design library. Every issue is scored by severity, linked to a specific Radii term page for context and a live demo, and paired with a concrete fix you can apply immediately. The output is a document you can paste into a ticket, share with a designer, or commit alongside your code.

What it does

• Scores your component across 7 Radii categories (0–20 each, 140 total): spacing, typography, color, layout, effects, interaction, motion
• Opens every report with ⚡ Quick Wins — 3 high-impact, < 10-minute fixes with copy-paste before/after CSS code blocks
• Every fix includes a code block, not just a description: exact CSS using Radii token names ready to drop in
• Flags Critical issues first: contrast failures with computed ratio + minimum-passing hex alternative, missing focus rings, broken loading states
• Identifies component type (button, card, form, modal) and runs type-specific checklists (button width lock, modal focus trap, etc.)
• Generates a shareable score card suitable for tickets, design reviews, or PR comments
• Checks cross-component consistency when multiple files are provided

Give it

• 1.A component file (.jsx, .tsx, .vue, .svelte, or plain HTML/CSS)
• 2.Optional: describe the design goal, brand, or intended context
• 3.Optional: pass multiple files for cross-component consistency review

Example output

**Score: 74/140 (C+)**

Spacing 14/20 — Arbitrary values detected: padding: 13px → use var(--spacing-3) 12px. Gap between cards inconsistent (22px, 18px, 24px) → standardise to var(--spacing-6) 24px. → radii.cloud/terms/spacing-system

Typography 18/20 — Good scale usage. Minor: line-height 1.4 on body paragraphs → Radii recommends 1.6–1.75. → radii.cloud/terms/line-height

Color 10/20 — CRITICAL: Text #888 on #f5f5f5 fails WCAG AA (3.1:1 ratio, need 4.5:1). Fix: use #6b7280 on #f5f5f5 (4.6:1). → radii.cloud/terms/color-contrast

Motion 8/20 — MAJOR: Three CSS animations found with no @media (prefers-reduced-motion) override. Loading spinner at 2s is too slow (target 700–900ms). → radii.cloud/terms/animation

Interaction 12/20 — No :focus-visible style found on interactive elements. Missing loading state on the submit button. → radii.cloud/terms/focus-visible