/ui-implementation
UI Implementation
Turn design decisions into shadcn plus Tailwind plus Next code. Mobile-first, accessible, dark-mode-ready.
What it does
Production UI patterns on the starter stack: shadcn/ui components composed into dashboard, settings, list, and detail layouts, responsive via mobile-first breakpoints, the `cn()` pattern for conditional classes, touch targets that pass 44px, no hover-only interactions on touch. Pairs visual decisions from `ui-design-intelligence` with the actual code that ships.
Use it when implementing a designed screen, when a component needs to work from phone to ultra-wide, when accessibility is an afterthought and the checklist needs to run, or when an inherited codebase has custom components where a shadcn primitive exists. Also use it to standardize common patterns (mobile nav as Sheet, destructive actions as AlertDialog).
Outputs working `.tsx` files with proper responsive classes, accessibility attributes, and dark-mode support, plus a short rationale for pattern choices. Pairs with `ui-design-intelligence` (the visual decisions upstream), `page-cro` (the conversion checklist for landing pages), and `test-driven-development` (component tests when behavior, not just markup, matters).
