github/ui-ux-pro-max-skill
1
0
Fork 0
mirror of https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git synced 2026-08-01 19:06:14 +00:00
Code Issues Packages Projects Releases Wiki Activity
ui-ux-pro-max-skill/stack/docs/STACK.md
Young Munger b484e8338c
Add website design stack starter kit under stack/ (#424) 
A ready-to-use Claude Code environment for website design, bundling:
- .mcp.json: Playwright + Chrome DevTools + shadcn MCP servers
- CLAUDE.md: the design loop (plan -> commit to a look -> build -> screenshot -> review)
- .claude/agents/design-review.md: 7-phase design-review subagent (WCAG AA, responsive)
- .claude/commands: /design-review, /design-plan
- scripts/design-audit.mjs: standalone multi-viewport screenshot + heuristic audit
- .github/workflows/design-review.yml: CI design gate (template)
- docs/: STACK, SETUP, WORKFLOW
- examples/juniper-audit/: a real audit run (report + 6 viewport screenshots)

Pairs with the ui-ux-pro-max skill (knowledge layer) and the official
frontend-design plugin (taste layer). Lives on its own branch as a
self-contained starter; copy stack/ out to seed a standalone repo.

Co-authored-by: Claude <noreply@anthropic.com>
2026-07-20 03:57:13 +07:00

3.6 KiB
Raw Permalink Blame History

The Stack — why each tool is here

AI design fails in three predictable ways. Each layer of this stack fixes one.

Failure mode Fix Tool
Generic, templated look ("AI slop") Force an aesthetic commitment frontend-design
Vague, inconsistent tokens & patterns Ground decisions in a real database ui-ux-pro-max
Never sees the result → ships broken UI Give the agent eyes Playwright / Chrome DevTools MCP
Reinventing primitives Pull proven components shadcn MCP
"Looks fine to me" self-assessment Independent, rigorous review design-review subagent

🧠 Knowledge — ui-ux-pro-max

A searchable design-intelligence toolkit: 84 UI styles, 192 color palettes, 73 font pairings, 99 UX guidelines, 25 chart types, a Core Web Vitals dataset, and 22 tech stacks, plus a design-system generator that turns a product brief into concrete tokens. It's the answer to "what should this actually look like, and what are the anti-patterns?"

🎨 Taste — frontend-design (official Anthropic)

~50 lines of markdown that stop Claude from sampling the safe center of its training data. It forces four decisions — purpose, tone, constraints, differentiation — before any CSS, names three "AI-slop" defaults to avoid, and pushes boldness into a single signature element.

ui-ux-pro-max decides what's correct; frontend-design decides what's distinctive. Use both.

🧩 Components — shadcn MCP

Browse, search, and install shadcn/ui components (and other registries) by natural language, instead of hand-rolling accessible primitives. Best for React/Next/Vue/Svelte projects.

👁️ Visual feedback — Playwright MCP + Chrome DevTools MCP

The single biggest lever. Claude connects to a real Chromium, navigates, clicks, resizes, screenshots, reads the console, and takes an accessibility snapshot — so it can catch and fix its own z-index bugs, animation-timing errors, overflow, and layout shift. Chrome DevTools MCP adds deep performance/network/CLS profiling.

✅ Automated review — design-review subagent

A senior-reviewer subagent (.claude/agents/design-review.md) that runs a 7-phase audit over a live page: interaction states, responsiveness across 6 viewport tiers, visual polish, WCAG 2.1 AA, edge cases, and console health. Invoke with /design-review <url>. The heuristic subset also runs headless in CI via scripts/design-audit.mjs.

Optional add-ons (not in default .mcp.json)

Both are opt-in (see docs/SETUP.md) so the base stack runs with zero secrets.