mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-08-01 19:06:14 +00:00
b484e8338c
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>
68 lines
3.6 KiB
Markdown
68 lines
3.6 KiB
Markdown
# 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?"
|
|
|
|
- Repo: <https://github.com/nextlevelbuilder/ui-ux-pro-max-skill> · License: MIT
|
|
- Install: `npx ui-ux-pro-max-cli init --ai claude`
|
|
- Use: `python3 <skill>/scripts/search.py "<brief>" --design-system` and `--domain <domain>`
|
|
|
|
## 🎨 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.
|
|
|
|
- Repo: <https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design>
|
|
- Install: `/plugin install frontend-design@anthropics/claude-code`
|
|
|
|
`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.
|
|
|
|
- Docs: <https://ui.shadcn.com/docs/mcp> · Command: `npx shadcn@latest mcp`
|
|
|
|
## 👁️ 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.
|
|
|
|
- Playwright MCP: <https://github.com/microsoft/playwright-mcp> — `npx @playwright/mcp@latest`
|
|
- Chrome DevTools MCP: <https://github.com/ChromeDevTools/chrome-devtools-mcp> — `npx chrome-devtools-mcp@latest`
|
|
|
|
## ✅ 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`)
|
|
|
|
- **Figma Dev Mode MCP** — read a frame's tokens/layout to generate matching code, and push
|
|
Claude-built UI back to the canvas as editable layers. Needs the Figma desktop app + Dev Mode.
|
|
<https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server>
|
|
- **21st.dev Magic MCP** — generate React components from a prompt ("v0 in your editor"). Needs
|
|
an API key. <https://github.com/21st-dev/magic-mcp>
|
|
|
|
Both are opt-in (see `docs/SETUP.md`) so the base stack runs with zero secrets.
|