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>
32 lines
1.4 KiB
Bash
32 lines
1.4 KiB
Bash
#!/usr/bin/env bash
|
|
# setup.sh — install the website design stack.
|
|
# Safe to re-run. Installs the audit deps + Chromium and the ui-ux-pro-max skill,
|
|
# then prints the two in-Claude steps (plugins are installed from inside Claude Code).
|
|
set -euo pipefail
|
|
|
|
cyan() { printf '\033[36m%s\033[0m\n' "$1"; }
|
|
green() { printf '\033[32m%s\033[0m\n' "$1"; }
|
|
|
|
cyan "==> Installing audit dependencies (Playwright)…"
|
|
npm install
|
|
|
|
cyan "==> Installing the Chromium browser for Playwright…"
|
|
# Skipped automatically in images that preinstall browsers; harmless to run.
|
|
npx playwright install chromium || echo " (Chromium already present or managed by the environment — continuing.)"
|
|
|
|
cyan "==> Installing the ui-ux-pro-max skill (knowledge layer)…"
|
|
npx --yes ui-ux-pro-max-cli init --ai claude || {
|
|
echo " Could not auto-install ui-ux-pro-max-cli. Install it later with:"
|
|
echo " npx ui-ux-pro-max-cli init --ai claude"
|
|
}
|
|
|
|
green "==> CLI setup done."
|
|
echo
|
|
cyan "Two steps to finish inside Claude Code (plugins install from the app):"
|
|
echo " 1. Enable plugins, then run:"
|
|
echo " /plugin install frontend-design@anthropics/claude-code"
|
|
echo " 2. Start Claude Code in this folder — .mcp.json (Playwright + Chrome DevTools + shadcn)"
|
|
echo " and CLAUDE.md load automatically. Approve the MCP servers when prompted."
|
|
echo
|
|
echo "Optional add-ons: see docs/SETUP.md (Figma Dev Mode MCP, 21st.dev Magic MCP)."
|