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 10:56:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
ui-ux-pro-max-skill/stack/examples/juniper-audit/report.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

1.2 KiB
Raw Permalink Blame History

Design Audit — http://localhost:8099/

Viewports: 360 / 390 / 768 / 1024 / 1440 / 1920 px · Heuristic pass (pair with /design-review for taste & flows).

Findings: 2 high · 2 medium · 0 low

Console errors (1):

  • [mobile-360] Failed to load resource: the server responded with a status of 404 (File not found)

HIGH

  • focus-visible — 2/25 sampled interactive elements show no visible focus indicator.
    ↳ seen at: mobile-360, mobile-390, tablet-768
  • focus-visible — 3/25 sampled interactive elements show no visible focus indicator.
    ↳ seen at: laptop-1024, desktop-1440, wide-1920

MEDIUM

  • tap-target — 14 interactive targets < 44×44px on mobile.
    ↳ seen at: mobile-360, mobile-390
  • contrast — ~1/82 sampled text nodes below WCAG AA contrast (approximate).
    ↳ seen at: mobile-360, mobile-390, tablet-768, laptop-1024, desktop-1440, wide-1920

Screenshots

  • mobile-360 (360×800): screenshots/mobile-360.png
  • mobile-390 (390×844): screenshots/mobile-390.png
  • tablet-768 (768×1024): screenshots/tablet-768.png
  • laptop-1024 (1024×768): screenshots/laptop-1024.png
  • desktop-1440 (1440×900): screenshots/desktop-1440.png
  • wide-1920 (1920×1080): screenshots/wide-1920.png