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/SETUP.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

2.6 KiB
Raw Permalink Blame History

Setup

Prerequisites

  • Node 18+ and Python 3.x
  • Claude Code with plugins enabled (run /plugin once to enable)

1. One-shot setup

./scripts/setup.sh

This installs the audit dependencies (Playwright + Chromium) and the ui-ux-pro-max skill, then prints the two steps that must happen inside Claude Code.

2. Install the taste plugin (inside Claude Code)

/plugin install frontend-design@anthropics/claude-code

3. Approve the MCP servers

Open Claude Code in this directory. It reads .mcp.json and prompts you to approve the project MCP servers (playwright, chrome-devtools, shadcn). Approve them. .claude/settings.json already sets enableAllProjectMcpServers: true, so they load on start. Verify with /mcp.

That's it — CLAUDE.md defines the design loop and loads automatically.

Verify it works

> /design-plan portfolio site for a photographer, editorial and minimal
> Build the hero, then screenshot it at 375px and 1440px and fix anything that breaks.
> /design-review http://localhost:3000

You should see Claude pull tokens from ui-ux-pro-max, open a browser, screenshot, and return ranked findings.

Standalone audit (no Claude needed)

npm run audit -- --url http://localhost:3000
npm run audit -- --file ./index.html

Outputs audit-output/report.md + per-viewport screenshots. Exit code is non-zero when there are high-severity findings (useful for CI — see .github/workflows/design-review.yml).

Optional add-ons

Figma Dev Mode MCP

Requires the Figma desktop app. Enable Dev Mode → toggle the MCP server on. Then add to .mcp.json:

"figma": { "url": "http://127.0.0.1:3845/mcp" }

Guide: https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server

21st.dev Magic MCP

Generates React components from a prompt. Get an API key at https://21st.dev, then add:

"magic": { "command": "npx", "args": ["-y", "@21st-dev/magic@latest"], "env": { "API_KEY": "<your-key>" } }

Keep keys out of git — prefer .claude/settings.local.json or your shell env, both gitignored.

Troubleshooting

  • /mcp shows a server failed — run its command manually to see the error, e.g. npx -y @playwright/mcp@latest. Usually a Node version or network/proxy issue.
  • Audit can't find Chromium — run npx playwright install chromium, or set PW_EXECUTABLE_PATH to your Chromium binary.
  • ui-ux-pro-max command not found — re-run npx ui-ux-pro-max-cli init --ai claude and check the printed skill path; use that path in the python3 …/search.py commands.