Home/Skills/tools/UI Implementation

/ui-implementation

UI Implementation

Turn design decisions into shadcn plus Tailwind plus Next code. Mobile-first, accessible, dark-mode-ready.

YouUtility skill loaded on demand across sessions.

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).

Build your second brain

Run /ui-implementation with your agents.

This skill ships with Agent0 Starter, plus 82 others.

Cortex
Chief of Staff
Loom
Loom
Radar
Radar
Hippo
Hippocampus
Signal
Signal
Sentinel
Sentinel
Axon
Axon
Hey, I'm Cortex — Chief of Staff for the team. Ask me anything; I'll handle it or pull in Loom (writing), Radar (growth), Hippocampus (research), Signal (social), Sentinel (ops), or Axon (code review). What's on your mind?