Ui Pro Magic

UI Pro Magic

A Claude Code skill that combines two layers for UI/UX work:

1. Strategy — the `ui-ux-pro-max` design intelligence (50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types, 9 stacks) locks the design system.
2. Implementation — the 21st.dev Magic MCP generates the actual React/Tailwind/shadcn component code, constrained by that system.

Strategy decides *what* to build. Magic decides *how* to ship it.

Why this skill

Magic on its own happily produces beautiful components — that don't match each other. Five prompts, five palettes, five font stacks, zero coherence.

`ui-ux-pro-max` on its own produces a rigorous design system — but you still have to translate it into code yourself.

`ui-pro-magic` glues them together: lock the system once, then every component Magic generates respects the same palette, typography, anti-patterns, and stack idioms.

The workflow

1. Analyze — extract product type, industry, style, stack, components needed
2. Lock — search.py --design-system --persist writes design-system/MASTER.md
3. Generate — for each component, call Magic MCP with the locked system injected into the prompt
4. Refine — use 21st_magic_component_refiner with the same system block
5. Checklist — run the pre-delivery verification before handoff

Prerequisites

1. Python 3

python3 --version

2. `ui-ux-pro-max` skill

Install from the official source. The author's default path is `~/claude-library/ui-ux-pro-max-skill/`. If you put it elsewhere, either update the path in `SKILL.md` or export `UI_UX_PRO_MAX_PATH`.

3. 21st.dev Magic MCP

Get an API key from [21st.dev/magic-chat](https://21st.dev/magic-chat?mcp_section=true), then register the MCP:

claude mcp add magic -s user -- npx -y @21st-dev/magic@latest API_KEY=

Verify:

claude mcp list

You should see `magic: ✓ Conne