Two-layer UI/UX skill that combines the strategic design intelligence of ui-ux-pro-max (50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types, 9 stacks) with the component generation capabilities of the 21st.dev Magic MCP (component builder, refiner, inspiration, logo search). Use for any request that involves designing, building, refining, or auditing UI — landing pages, dashboards, SaaS apps, e-commerce, mobile, components. Workflow: 1) lock the design system with ui-ux-pro-max (style, palette, typography, anti-patterns), 2) generate components with Magic MCP constrained by that system, 3) run the pre-delivery checklist. Trigger examples: "build me a landing page for...", "design a dashboard for...", "create a hero section", "generate a pricing table", "improve the UI of...", "refine this component". Do NOT trigger for pure backend tasks, data pipelines, or non-UI code.
A two-layer orchestrator for UI/UX work:
ui-ux-pro-max locks the design system (style, palette, typography, anti-patterns, stack rules) from a searchable database of 50+ styles, 97 palettes, 57 font pairings, 99 UX rules.Strategy decides what to build. Magic decides how to ship it.
Fire whenever the request involves designing, building, refining, or auditing UI:
python3 --version
~/claude-library/ui-ux-pro-max-skill/ (author's default)UI_UX_PRO_MAX_PATH env var if setclaude mcp add magic -s user -- npx -y @21st-dev/magic@latest API_KEY=<your-key>
Extract:
html-tailwind if unspecified; otherwise react, nextjs, vue, svelte, shadcn, react-native, flutter, swiftui, jetpack-compose)Always run --design-system --persist first. This creates a Master file that constrains every subsequent component generation.
python3 ~/claude-library/ui-ux-pro-max-skill/src/ui-ux-pro-max/scripts/search.py \
"<product_type> <industry> <style_keywords>" \
--design-system --persist \
-p "<Project Name>"
This produces:
design-system/MASTER.md — the global Source of Truthdesign-system/pages/ — folder for page-specific overridesOptionally create a page override (e.g. the dashboard has different rules than the landing):
python3 .../search.py "<query>" --design-system --persist -p "<Project>" --page "dashboard"
Only when Step 2 doesn't cover something specific:
| Need | Command |
|---|---|
| Chart type | ... "<query>" --domain chart |
| Deeper UX rules | ... "<query>" --domain ux |
| Alternative fonts | ... "<query>" --domain typography |
| Landing structure | ... "<query>" --domain landing |
| Stack specifics | ... "<query>" --stack <name> |
For each component in the request, call the Magic MCP tool with the design system injected.
Available Magic MCP tools:
| Tool | Use for |
|---|---|
21st_magic_component_builder | Generate a new component from a text description |
21st_magic_component_refiner | Refine an existing component (improve styling, responsiveness, a11y) |
21st_magic_component_inspiration | Explore design variations before committing |
logo_search | Find brand SVGs from Simple Icons |
Critical rule: never call Magic with a bare component description. Always inject the locked design system so the output matches.
Prompt template for 21st_magic_component_builder:
Build a <component> for <project> using stack <stack>.
DESIGN SYSTEM (must be respected):
- Style: <style from MASTER.md>
- Palette: <primary / secondary / accent / bg / text hex values>
- Typography: <heading font> / <body font>
- Effects: <shadows, borders, radii>
- Anti-patterns to avoid: <list from MASTER.md>
COMPONENT REQUIREMENTS:
<specific asks from the user>
CONSTRAINTS:
- Use SVG icons only (Heroicons or Lucide), never emojis
- All clickable elements get cursor-pointer
- Hover states via color/opacity, not layout-shifting transforms
- Respect prefers-reduced-motion
- Touch targets >= 44x44px
For refinement, pass the existing code plus the same design-system block to 21st_magic_component_refiner.
Before handing off, verify (from ui-ux-pro-max's canonical list):
Visual
Interaction
cursor-pointer on every clickable elementLight/Dark mode
bg-white/80+, not bg-white/10Layout
top-4 left-4 right-4 spacing, not top-0Accessibility
prefers-reduced-motion respected21st_magic_component_refiner only21st_magic_component_inspiration first, then build the chosen one--persist so the Master survives across sessions and page-level overrides stay consistent.