heuristic-analysislisted

# heuristic-analysis Evaluate a page or component against Nielsen's 10 Usability Heuristics and produce a structured findings report. ## When invoked Use this skill when asked to run a UX or usability review — phrases like "heuristic analysis of [page]", "UX review of [page]", "usability check on [component]", "how does [X] score on usability". ## Instructions 1. **Determine scope.** Accept one of: - A website URL path (e.g. `/components/button`) → review the live page - A component name (e.g. `AlertDialog`) → review the component source and its rendered output 2. **Gather visual evidence.** Start the preview server and screenshot the target in both light and dark mode (follow the `visual-review` skill pattern). Stop the server when done. 3. **Read the source code** for the page or component to understand the full implementation, not just what's visible in screenshots. 4. **Evaluate against each of Nielsen's 10 Heuristics.** For each, assign a severity: - ✅ **Pass** — fully satisfied, no issues - ⚠️ **Minor** — small gap, low user impact - 🔶 **Moderate** — noticeable issue, degrades experience - 🔴 **Critical** — breaks usability, must fix **The 10 Heuristics:** 1. **Visibility of system status** — Does the UI communicate what's happening? (loading states, active states, progress indicators, feedback on interaction) 2. **Match between system and real world** — Do labels, icons, and concepts match the user's mental model? (plain language, f