ui-ux-pro-max

UI-UX Pro Max Skill

The full design production workflow from blank canvas to shipped, regression-tested component. Orchestrates all four layers of the Pi-CEO design stack at maximum quality settings.

Use the individual specialist skills for targeted tasks. Use this skill when shipping something that matters.

The Pro Max Workflow

Phase 1 — Context (5 min)

Skill: design-intelligence

Read DESIGN.md — confirm tokens, font stack, motion rules

If the feature matches a reference brand, run:

npx getdesign@latest add <brand>  # e.g. linear.app, vercel, stripe

If building from a reference site:

npx skillui --url https://reference.example.com --mode ultra

Define the 3-dial settings before writing a line of code:
- DESIGN_VARIANCE (layout complexity 1–10)
- MOTION_INTENSITY (animation richness 1–10)
- VISUAL_DENSITY (information density 1–10)

Pi-CEO defaults: Dashboard 3/4/7 · Landing page 6/6/3 · Settings 2/2/5

Phase 2 — Component Brief

Write a brief before coding. Template:

Component: [name]
Context: [where it lives in the product]
Dials: DESIGN_VARIANCE=[x] MOTION_INTENSITY=[y] VISUAL_DENSITY=[z]
States required: default, hover, active, loading, empty, error[, disabled]
Data shape: [interface / mock data description]
Reference: [brand archetype or URL if relevant]
DESIGN.md tokens: [list the specific tokens this component uses]

Phase 3 — Build (Skill: ui-component-builder)

Generate 3 variants, then select one. The builder must produce:

All required states (no partial implementations)
Skeleton loader for async surfaces
TypeScript props interface with named export
No hardcoded hex values — Tailwind tokens or CSS variables only
prefers-reduced-motion wrapper on all animations
Keyboard navigable with visible focus ring

21st.dev Magic workflow:

# Search for nearest existing pattern first
21st_magic_component_inspiration("[component description]")
# Then generate variants
21st_magic_component_builder("[brief]", variants=3)

Phase 4 — Audit (Skill: impeccable)

impeccable is not a repo skill — it is installed locally at ~/.claude/skills/impeccable (pbakaus/impeccable v3.9.1). If absent, install it before this phase; do not fall back to the deprecated design-audit.

Run the full audit before marking anything done:

/impeccable audit [component-name]

Expect an Audit Health Score out of 20 with P0-P3 severity findings. Must score 16/20 or above with zero P0 (Blocking) and zero P1 (Major) findings to proceed. Fix P2 (Minor) findings where possible.

Then run the automated detector:

npx impeccable detect src/components/[ComponentName].tsx

Zero findings is the target. 1–2 marginal findings = acceptable with documented rationale.

Phase 5 — Visual QA (Skill: visual-qa)

Screenshot matrix (run before every PR):

for config in "375,812,mobile" "768,1024,tablet" "1280,800,desktop" "1920,1080,wide"; do
  w=${config%%,*}; rest=${config#*,}; h=${rest%%,*}; label=${rest#*,}
  npx playwright screenshot http://localhost:3000 "qa-${label}.png" \
    --full-page --viewport-size "$w, $h" --wait-for-timeout 1500
done
npx playwright screenshot http://localhost:3000 qa-dark.png \
  --full-page --viewport-size "1280, 800" --color-scheme dark

Visual regression (for components with existing baselines):

npx playwright test tests/visual/ --project chromium-desktop

Design vs implementation diff:

Feed the Figma export / reference screenshot + the component screenshot to a vision model:

Compare these screenshots. List differences in:
1. Spacing and alignment
2. Typography (size, weight, colour)
3. Colour (compare against DESIGN.md tokens)
4. Missing states
5. Proportion differences

Phase 6 — Ship Checklist

Before opening a PR, confirm all of these:

DESIGN.md tokens used throughout — no hardcoded hex
All 8 states implemented: default, hover, active, loading, empty, error, disabled, focus
Skeleton loader built for every async data surface
transform + opacity only animated — never top/left/width/height
prefers-reduced-motion applied
aria-label on all icon buttons
No placeholder content (John Doe, Acme, 99.99%)
Keyboard navigable — tab order correct, focus ring visible
Responsive at 375px and 1280px confirmed via screenshot
npx impeccable detect — zero or documented findings
Visual regression baselines updated if intentional design change

Quality Bars

Dimension	Minimum to ship	Pro Max target
impeccable audit score	16/20, no P0/P1	18/20, no P0/P1/P2
Anti-patterns	≤ 1	0
States covered	6/8	8/8
WCAG compliance	AA	AA (AAA on typography)
Responsive coverage	375 + 1280	375 + 768 + 1280 + 1920
Visual regression	Baseline exists	Baseline + dark mode baseline

Brand Archetype Quick Reference

When the CEO asks for a specific aesthetic:

Ask	Archetype to reference	Key tokens
"Like Linear"	linear.app	`#08090a` canvas, `#5e6ad2` accent, Berkeley Mono
"Like Vercel"	vercel.com	`#000` canvas, Geist, zero decoration
"Like Raycast"	raycast.com	Dark chrome, vibrant gradient accents
"Like Stripe"	stripe.com	Purple gradient, weight-300 elegance, white
"Like Superhuman"	superhuman.com	Purple glow, keyboard-first
"Pi-CEO default"	DESIGN.md	Amber + zinc, Geist, terminal authority

npx getdesign@latest add linear.app  # Downloads Linear's full DESIGN.md

When NOT to Use This Skill

Simple copy change or icon swap → no skill needed
One-off script or non-UI code → no skill needed
Only reading existing code → /impeccable critique only

Output Artifacts

A completed Pro Max workflow produces:

React component file (dashboard/components/[Name].tsx)
Updated or confirmed DESIGN.md (if new tokens were added)
6 screenshots (4 breakpoints + dark + reference comparison)
/impeccable audit report saved to PR description or .harness/design-audits/[name].md
Visual regression baseline images (Linux CI only)