mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-08-01 10:56:17 +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>
50 lines
1.2 KiB
JSON
50 lines
1.2 KiB
JSON
{
|
||
"target": "http://localhost:8099/",
|
||
"consoleErrors": [
|
||
"[mobile-360] Failed to load resource: the server responded with a status of 404 (File not found)"
|
||
],
|
||
"findings": [
|
||
{
|
||
"severity": "high",
|
||
"check": "focus-visible",
|
||
"message": "2/25 sampled interactive elements show no visible focus indicator.",
|
||
"viewports": [
|
||
"mobile-360",
|
||
"mobile-390",
|
||
"tablet-768"
|
||
]
|
||
},
|
||
{
|
||
"severity": "high",
|
||
"check": "focus-visible",
|
||
"message": "3/25 sampled interactive elements show no visible focus indicator.",
|
||
"viewports": [
|
||
"laptop-1024",
|
||
"desktop-1440",
|
||
"wide-1920"
|
||
]
|
||
},
|
||
{
|
||
"severity": "medium",
|
||
"check": "tap-target",
|
||
"message": "14 interactive targets < 44×44px on mobile.",
|
||
"viewports": [
|
||
"mobile-360",
|
||
"mobile-390"
|
||
]
|
||
},
|
||
{
|
||
"severity": "medium",
|
||
"check": "contrast",
|
||
"message": "~1/82 sampled text nodes below WCAG AA contrast (approximate).",
|
||
"viewports": [
|
||
"mobile-360",
|
||
"mobile-390",
|
||
"tablet-768",
|
||
"laptop-1024",
|
||
"desktop-1440",
|
||
"wide-1920"
|
||
]
|
||
}
|
||
]
|
||
} |