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>
83 lines
2.6 KiB
Markdown
83 lines
2.6 KiB
Markdown
# Setup
|
|
|
|
## Prerequisites
|
|
|
|
- **Node 18+** and **Python 3.x**
|
|
- **Claude Code** with plugins enabled (run `/plugin` once to enable)
|
|
|
|
## 1. One-shot setup
|
|
|
|
```bash
|
|
./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)
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```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:
|
|
|
|
```json
|
|
"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.
|