heuristic-analysis

Evaluates pages or components against Nielsen's 10 Usability Heuristics and produces a severity-rated findings report.

1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/robritacca-dotcom/design-system --skill heuristic-analysis-robritacca-dotcom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: heuristic-analysis
Source: https://github.com/robritacca-dotcom/design-system/tree/main/.claude/skills/heuristic-analysis
Command: npx skills add https://github.com/robritacca-dotcom/design-system --skill heuristic-analysis-robritacca-dotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UX reviews are often subjective and inconsistent. This Skill applies Nielsen's 10 Usability Heuristics systematically to a page or component, combining screenshots in light and dark mode with source code analysis to produce a structured, severity-rated findings report with concrete fix suggestions. ## Core Features & Use Cases - Structured heuristic evaluation: Scores all 10 Nielsen heuristics with Pass / Minor / Moderate / Critical severity ratings in a consistent table format. - Visual and code evidence: Captures screenshots in both light and dark mode and reads the component source, so findings reflect the full implementation rather than surface appearance. - Actionable findings: Each issue references the exact element, prop, or file and includes a specific fix suggestion. - Use Case: Ask for a UX review of the AlertDialog component before a release, and receive a findings table flagging a missing loading state on the submit action as Moderate severity with a recommended fix. ## Quick Start Ask the AI to run a heuristic analysis of a page path like /components/button or a component name like AlertDialog.

Frequently Asked Questions about heuristic-analysis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a heuristic analysis on a web page?

Provide a page URL path such as /components/button or a component name such as AlertDialog. The skill screenshots the target in light and dark mode, reads the source code, then scores all 10 Nielsen heuristics in a structured findings table.

What are Nielsen's 10 Usability Heuristics used in a UX review?

They cover visibility of system status, match with the real world, user control and freedom, consistency, error prevention, recognition over recall, flexibility, minimalist design, error recovery, and help documentation. Each heuristic is rated Pass, Minor, Moderate, or Critical.

Can I run a usability check on a single component instead of a full page?

Yes, the skill accepts either a page URL path or a component name. For components, it reviews both the rendered output and the component source code to evaluate the full implementation.

Does the heuristic review check dark mode rendering?

Yes, the skill starts a preview server and captures screenshots in both light and dark mode before evaluating, so theme-specific usability issues like contrast or state visibility are included in the findings.

What does the heuristic analysis report include?

The report contains a table scoring all 10 heuristics with severity ratings, a section listing only findings that require action with specific fix suggestions, and a summary counting critical, moderate, minor, and passing items.