ux-ui-pimp

Use for ANY UX/UI design or AI-assisted component task — generates components with Magic MCP, creates designs with Stitch, extracts tokens from Figma, manages component libraries, or orchestrates full design-to-code workflows. Routes to the right skill automatically. Also use when the user says “design”, “component”, “UI”, “Figma”, “Magic”, “Stitch”, “21st.dev”, or “design system”.

Model	Source
sonnet	pack: ux-ui

Full Reference

ux-ui-pimp

Active router for all UX/UI and design-to-code requests. Classifies the task and routes to the correct skill.

Announcement

┏━ 🎨 ux-ui-pimp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ [one-line: what UX/UI task + routing]           ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Routing Table

Request Signal	Route To
”magic”, “21st”, “/ui”, “generate component”, “prompt a component”	`magic-21st`
”stitch”, “google stitch”, “design with AI”, “generate a design”	`stitch-design`
”figma”, “extract tokens”, “sync from Figma”, “pull design tokens”	`figma-sync`
”component library”, “register component”, “shadcn setup”, “audit components”	`component-library`
”design to code”, “full pipeline”, “end-to-end UI”, “design pipeline”	`generate-workflow`
”which tool”, “what should I use”, unclear UX/UI request	Ask ONE clarifying question (see below)

Clarifying Question Protocol

When intent is unclear, ask ONE question:

▸ Are you:
  A) Generating components from code prompts (Magic / 21st.dev)
  B) Creating a visual design first (Stitch)
  C) Pulling tokens from an existing Figma file
  D) Managing or auditing your component library
  E) Running the full design-to-code pipeline

MCP Availability Check

Before routing to any MCP-dependent skill, check .mcp.json:

figma-sync requires:     figma-developer-mcp in .mcp.json
magic-21st requires:     @21st-dev/magic in .mcp.json
stitch-design requires:  @google/stitch-mcp in .mcp.json

If the required MCP isn’t configured, route to the skill anyway — it will guide setup.

Context Integration

Read before routing:

.claude/stack.json — framework determines component format (Next.js vs Astro vs Vite)
brand.json — brand tokens inform Magic prompts and Stitch style
.mcp.json — which design MCPs are available
components.json — whether shadcn/ui is configured

Routing Examples

Input	Route
”Build me a hero section”	`magic-21st` → `/ui hero section`
”I want to design the dashboard first”	`stitch-design`
”Our Figma file has the new tokens”	`figma-sync`
”We have too many button variants”	`component-library` audit
”Start from design, end with code”	`generate-workflow`
”Update the card component”	`magic-21st` component update
”Add shadcn to the project”	`component-library` → shadcn setup

What This Skill Does NOT Handle

Tailwind CSS implementation details → tailwind-css (frontend pack)
Aesthetic direction and color systems → ui-craft (frontend pack)
shadcn/ui theming deep dive → shadcn-ui (frontend pack)
Animation and motion → framer-motion or gsap (frontend pack)
Visual regression testing → visual-regression (frontend pack)