ui-design-pro

Audit a component, page, or flow for WCAG 2.2 accessibility conformance. Triggers a11y-auditor agent.

Add animation to a component or flow with performance and accessibility awareness. Triggers animation-engineer agent.

Generate a structured design rationale for a screen or component, grounded in design-theory references and concrete tradeoffs. Use when you need to document WHY a design works, justify decisions for PR review, or analyze an existing screen before making changes.

Review a UI component or page for design principle violations, accessibility issues, and polymorphic rendering opportunities. Triggers design-critic and a11y-auditor agents.

Plan or extend a design token system with spacing, color, type, and component variant matrices. Triggers visual-architect agent with design-systems reference.

Audits UI components and pages for WCAG 2.2 accessibility compliance. Use after any interactive component is built. Checks keyboard navigation, focus management, ARIA roles and labels, color contrast, screen reader compatibility, and touch target sizes. Produces a prioritized list of violations with WCAG success criteria references. Invoke when asked to audit, check, or verify accessibility. Examples: - <example>User asks "is this form accessible?"</example> - <example>component-builder finishes an interactive dialog or drawer</example> - <example>User says "run an a11y audit on this component"</example> - <example>User asks "does this meet WCAG 2.2?"</example>

Adds purposeful motion to UI components using Motion spring physics, CSS transitions, and layout animations. Use when motion is explicitly needed — not by default. Invoke when asked to animate a component, add transitions, implement drag gestures, or make motion feel more natural. Always respects prefers-reduced-motion. Examples: - <example>User says "animate this card list so items slide in as they load"</example> - <example>User asks "add a spring animation to this drawer opening"</example> - <example>User wants drag-to-reorder with smooth positional feedback</example> - <example>User asks "why does this animation feel jarring?"</example>

Builds UI components using the correct libraries for the project's existing stack, from headless primitives up. Use when implementing a UI component, page, or feature after the layout has been planned by visual-architect. Greps real library source in refs/ to verify APIs before writing code. Always covers all interaction states. Invoke when asked to build, implement, create, or code a UI component or page. Examples: - <example>User says "build the essay card component from the spec"</example> - <example>visual-architect has produced a layout spec and now implementation starts</example> - <example>User asks "implement the command palette for this app"</example> - <example>User says "add a drawer for mobile filters"</example>

Reviews existing UI for design principle violations, visual hierarchy problems, and polymorphic rendering opportunities. Use when you need to evaluate a component or page against Gestalt principles, Fitts's Law, progressive disclosure, and the design smell catalog. Proactively invoke after component-builder completes any UI work. Also invoke when asked to review, audit, or critique existing UI code. Examples: - <example>User says "review this dashboard component for design issues"</example> - <example>User shares a React component and asks "is this good design?"</example> - <example>component-builder finishes building a feature list component</example> - <example>User asks "why does this UI feel off?"</example>

Maps a project's existing UI technology stack before any work begins. Reads package.json, config files, and source directories to identify framework, CSS approach, component libraries, animation, icons, and any existing design system. Prevents building parallel systems. Always invoke at the start of any UI work on an unfamiliar project. Invoke when asked to detect, identify, or map a project's UI stack. Examples: - <example>Starting work on a new codebase and need to understand what UI libraries it uses</example> - <example>User says "what UI libraries does this project use?"</example> - <example>User asks "before we start, what's in this repo?"</example> - <example>A new project directory is opened and UI work is about to begin</example>

Design principles, visual judgment, and layout architecture for web interfaces. Use when Claude Code needs to evaluate WHY a design works or fails, plan visual hierarchy and layout composition before writing code, choose between design approaches based on user behavior and cognitive load, review existing UI for design principle violations, build or extend a design token system, or reason about accessibility as a design concern rather than a compliance checkbox. Covers color theory, typography and measure, spacing systems, modular ratios, Gestalt principles, Fitts's Law, Hick's Law, progressive disclosure, affordances, signifiers, behavioral design, attention economics, and polymorphic object rendering. Also covers screen archetypes (monitoring, triage, authoring, configuration, exploration) that set density and interaction expectations. Always consult this skill before building new layouts or reviewing existing ones.

Source-code-backed UI implementation expertise for React, Next.js, and Tailwind CSS ecosystems. Use when Claude Code needs to build, refactor, or extend UI components using shadcn, Radix, Vaul, Sonner, cmdk, DaisyUI, Motion, or Tailwind CSS. Use when selecting which library to reach for, building components from headless primitives, adding animation with performance awareness, detecting an existing project's UI stack, or ensuring full state coverage across all interaction states. Greps real library source code rather than relying on training data. Always pair with design-theory for design judgment before implementation.