mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-07-31 18:36:13 +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>
48 lines
1.3 KiB
YAML
48 lines
1.3 KiB
YAML
name: Design Review
|
|
|
|
# Runs the heuristic design audit on PRs that touch UI. The full taste/interaction review is
|
|
# the /design-review subagent inside Claude Code; this CI gate catches the mechanical defects
|
|
# (overflow, focus, contrast, unsized media, missing meta) automatically on every PR.
|
|
|
|
on:
|
|
pull_request:
|
|
paths:
|
|
- '**/*.html'
|
|
- '**/*.css'
|
|
- '**/*.jsx'
|
|
- '**/*.tsx'
|
|
- '**/*.vue'
|
|
- '**/*.svelte'
|
|
- '**/*.astro'
|
|
|
|
jobs:
|
|
audit:
|
|
runs-on: ubuntu-latest
|
|
steps:
|
|
- uses: actions/checkout@v4
|
|
|
|
- uses: actions/setup-node@v4
|
|
with:
|
|
node-version: 20
|
|
|
|
- name: Install deps + Chromium
|
|
run: |
|
|
npm install
|
|
npx playwright install --with-deps chromium
|
|
|
|
# Point --url at your preview/deploy URL, or --file at a built static entry point.
|
|
# Replace the target below with how your app serves a page in CI.
|
|
- name: Run design audit
|
|
run: |
|
|
node scripts/design-audit.mjs --file ./index.html --out audit-output || true
|
|
|
|
- name: Upload audit report + screenshots
|
|
if: always()
|
|
uses: actions/upload-artifact@v4
|
|
with:
|
|
name: design-audit
|
|
path: audit-output/
|
|
|
|
- name: Fail on high-severity findings
|
|
run: node scripts/design-audit.mjs --file ./index.html --out audit-output
|