source-design

Audit or implement accessibility — WCAG 2.2, ARIA patterns, keyboard navigation, screen readers, contrast, touch targets

Get color system specs — semantic palettes, 10-step scales, dark mode mapping, contrast compliance, CSS variable tokens

Build production React components — Tailwind, shadcn/ui, CVA variants, design token integration, all states, responsive, accessible

Run a parallel Codex-powered design system audit across the entire codebase — scans all frontend files for anti-slop violations, hardcoded values, missing states, and accessibility issues

Generate a design brief before building any UI — establishes aesthetic direction, typography, color, motion, and component patterns

Accessibility specialist — WCAG 2.2, ARIA patterns, keyboard navigation, screen readers, focus management, color contrast, touch targets. Use for accessibility audits or implementation.

Color system specialist — semantic palettes, OKLCH generation, CSS variables, dark/light mode mapping, contrast compliance, color blindness safety. Use for palette creation or color system work.

Frontend component specialist — React, Tailwind, shadcn/ui, Radix primitives, design token integration, responsive implementation. Use for building production UI components.

Orchestrates the full design workflow — aesthetic direction, anti-slop enforcement, design system compliance, and specialist agent coordination. Use when starting any new UI/frontend work.

Animation and motion specialist — Framer Motion, CSS transitions, spring physics, micro-interactions, parallax, stagger reveals, scroll-triggered animations. Use for any animation work.

Generate a comprehensive design brief before building any UI. Establishes aesthetic direction, typography, color palette, motion language, and component patterns. Use before starting any new page, component, or design system. Prevents generic AI slop by forcing intentional design decisions upfront.

Audit existing UI code against design system rules, anti-slop patterns, accessibility compliance, and production quality standards. Use after building components or before shipping.

Generate a complete color and typography theme as CSS custom properties. Outputs a ready-to-use theme file with light/dark mode, semantic tokens, and Tailwind config. Use when starting a new project or creating a theme system.

Install, configure, and optimize fonts for a web project. Self-hosts WOFF2 files, generates @font-face declarations, configures Next.js/Tailwind, and sets up fallback metrics for zero-CLS loading. Handles premium fonts (Season Mix, GT Alpina) and free fonts (Satoshi, Instrument Serif, etc.).