← ClaudeAtlas

product-design-auditlisted

Use when a vibe coder wants a premium, evidence-based audit of an existing product, page, or flow before or after implementation. Produces prioritized UI/UX findings and verifies authorized fixes without inventing visual evidence.
trugurpala/divan · ★ 0 · Web & Frontend · score 66
Install: claude install-skill trugurpala/divan
# Product Design Audit Turn “make it better” into a small, inspectable design decision set. Audit the real product, not an imagined replacement. Prefer a few high-impact fixes over a decorative redesign. ## Brief State the user, platform, page or flow, its single job, and known constraints in five lines or fewer. Derive these from the request and repository when possible. If one missing fact would materially change the result, name the assumption. ## Inspect Inspect the running interface and its code when available. Cover at least one desktop and one mobile viewport. Check the primary path, empty/loading/error states, keyboard navigation, visible focus, content overflow, and reduced motion. Use screenshots or DOM evidence for visual claims. If browser access or a running build is unavailable, say so and limit findings to the evidence you have. ## Audit Review these lenses without turning them into a generic checklist: - information hierarchy and the page's single job; - interaction clarity, feedback, recovery, and state continuity; - accessibility: semantics, keyboard, focus, contrast, labels, and motion; - responsive behavior at content-driven breakpoints; - content that sounds human and names actions consistently; - visual distinctiveness grounded in the product's subject; - implementation quality that can change user-visible behavior. Use existing `ui-ux-pro-max` guidance for the broad UX quality floor, `frontend-design` when a new visual direction is truly needed