Claude Code skills.
Designed for design.

/radii-audit

Radii Audit

Reviews your component code or CSS and maps issues to Radii's design vocabulary with severity levels, scores, and direct links to learn more.

/radii-tokens

Radii Tokens

Outputs a full CSS custom properties block and Tailwind v4 @theme block following Radii's token naming conventions — including motion, spacing, and semantic color tokens.

/radii-spacing

Radii Spacing

Scans CSS and component files for arbitrary spacing values, reports a consistency score, and suggests Radii's --spacing-* token replacements file by file.

/radii-vocabulary

Radii Vocabulary

Maps any plain-language design description, complaint, or goal to Radii's exact vocabulary — with term names, definitions, and links to live demos.

/radii-component

Radii Component

Checks anatomy completeness, variant coverage, state handling, motion design, and accessibility against Radii's component library standards.

/radii-motion

Radii Motion

Scans CSS, JS, and component files for motion violations — wrong easing, missing prefers-reduced-motion, layout-thrashing properties, and timing issues — and outputs a prioritised fix list.

/radii-a11y

Radii A11y

Audits components for design-layer accessibility issues — color contrast, focus ring visibility, touch target size, motion safety, and text resize — with WCAG criterion citations and specific fixes.

/radii-loading

Radii Loading

Generates production-ready CSS + JSX for spinners, progress bars, skeleton screens, shimmer effects, and inline button loaders — with a decision tree for choosing the right type.

/radii-fx

Radii FX

Say the effect name, get production CSS. Gradient border, glow halo, glass card, aurora background, shimmer shine, 3D card tilt, cursor glow, animated product card, and 20+ more — all with performance notes and accessibility overrides.

/radii-builder

Radii Builder

Describe any skill you want in plain text and get a complete, ready-to-install Claude Code .md skill file following Radii's skill format.