audit
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Run a technical audit of the UI at the target the user described. Load the ui-craft skill and apply the audit lens.
Step 0: Visual capture (mandatory)
Code-only review is insufficient. Every audit/critique starts with the surface as the user sees it. Try the following in order; use the first one available:
- Playwright MCP — if
playwrightMCP server is available, use it. Capture full-page screenshots at three viewports: desktop (1280×800), tablet (768×1024), mobile (375×812). Capture dark mode if the app supports it. - Browser DevTools / Chrome MCP — second choice; same viewport set.
- Other browser automation (
agent-browser,cursor-ide-browser) — third choice. - Ask the user — last resort. If no automation is available, request screenshots from the user before proceeding. Be specific:
- "Visual review needs screenshots. Please provide:
- Full-page at 1280px (desktop)
- Full-page at 768px (tablet)
- Full-page at 375px (mobile)
- Dark mode of each, if supported."
- "Visual review needs screenshots. Please provide:
More from educlopez/ui-craft
ui-craft
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.
125adapt
Responsive pass — mobile, tablet, desktop, touch, safe areas. Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work.
36typeset
Typography pass — fonts, scale, hierarchy, micro-typography. Invoke when the user asks for typeset on their UI, or mentions 'typeset' alongside design / UI / frontend work.
36critique
UX critique — hierarchy, clarity, anti-slop. No code changes unless asked. Invoke when the user asks for critique on their UI, or mentions 'critique' alongside design / UI / frontend work.
35clarify
UX copy pass — buttons, errors, empty states, form hints. Clarity over cleverness. Invoke when the user asks for clarify on their UI, or mentions 'clarify' alongside design / UI / frontend work.
34ui-craft-dense-dashboard
Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-dense, analytics, Bloomberg-like, Retool-like.
34