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

4.2 KiB
Raw Permalink Blame History

CLAUDE.md — Website Design Stack

This repository is a ready-to-use environment that makes Claude Code good at website design. When you (Claude) do any UI, web page, landing page, component, or visual-polish work in a project that uses this stack, follow the workflow below. It combines a knowledge layer (what to build), a taste layer (making it distinctive), and a feedback layer (actually seeing the rendered result and fixing it).

The design loop (follow in order)

  1. PLAN with data — ui-ux-pro-max. Before writing markup, get a concrete design system. Run the generator, then pull specifics per surface:

    python3 <skill>/scripts/search.py "<product> <industry> <keywords>" --design-system -p "Project"
python3 <skill>/scripts/search.py "<query>" --domain style|color|typography|ux|landing|web-vitals

    Use it for: product-type patterns, color tokens, font pairings, UX anti-patterns, landing structure, and Core Web Vitals budgets. Treat its output as the source of truth for tokens (color, type, spacing).

  2. COMMIT to an aesthetic — frontend-design. Do not sample the safe center of the training distribution. Answer four questions first — purpose, tone, constraints, differentiation — pick ONE tone and execute it precisely. Avoid the three AI-slop defaults (cream + serif + terracotta; near-black + acid accent; hairline broadsheet) unless the brief explicitly asks. Spend boldness in one signature element; keep the rest quiet.

  3. BUILD. Implement with the chosen tokens. Match the surrounding code's conventions. For component-driven stacks, use the shadcn MCP to search/add components instead of hand-rolling primitives.

  4. SEE IT — Playwright / Chrome DevTools MCP. You are not done when the code compiles. Open the page in a real browser, screenshot it, read the console, exercise interactive states (hover, focus, open menus, submit forms), and resize the viewport. Fix what you see — z-index, animation timing, layout shift, overflow. This feedback loop is the whole point of the stack; a change you have not looked at is not finished.

  5. REVIEW — /design-review (the design-review subagent). Before you call a UI change complete, run the design-review subagent. It drives Playwright across mobile→ultrawide viewports, checks WCAG 2.1 AA (contrast, focus order, keyboard traps), responsive integrity, and interaction states, and returns ranked findings. Fix Blocker/High findings before finishing.

Quality floor (never ship below this)

  • Responsive: no horizontal scroll at 375 / 768 / 1024 / 1440 px; content reflows, not shrinks.
  • Accessible: visible :focus-visible on every interactive element; WCAG AA contrast (4.5:1 text, 3:1 large text / UI); semantic landmarks; labelled controls; prefers-reduced-motion respected.
  • Performant: stable layout (no CLS from unsized media/fonts), lazy-load below-fold images, font-display: swap, avoid render-blocking. Check against the web-vitals domain.
  • Intentional copy: active voice, sentence case, name things by what users recognize.

What's wired in this repo

Layer Tool Where
Knowledge ui-ux-pro-max skill installed via scripts/setup.sh (plugin)
Taste frontend-design skill installed via scripts/setup.sh (plugin)
Component gen shadcn MCP .mcp.json
Visual feedback @playwright/mcp + chrome-devtools-mcp .mcp.json
Automated review design-review subagent + /design-review command .claude/agents, .claude/commands
Standalone audit scripts/design-audit.mjs (multi-viewport screenshots) scripts/, CI in .github/workflows

See docs/STACK.md for why each tool is here, docs/SETUP.md to install, and docs/WORKFLOW.md for a worked end-to-end example.

Notes

  • <skill> above resolves to the installed skill path (e.g. .claude/skills/ui-ux-pro-max or the plugin location). The skill's own SKILL.md tells you the exact command form.
  • Optional: 21st.dev Magic MCP (@21st-dev/magic) generates React components from a prompt but needs an API key — see docs/SETUP.md. It is intentionally left out of the default .mcp.json so the stack works with zero secrets.