ux-heuristics

Evaluate UI quality using 28 principle-based UX heuristic rules.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/N2O-com/N2O-just-workflow --skill ux-heuristics-n2o-com
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-heuristics
Source: https://github.com/N2O-com/N2O-just-workflow/tree/main/03-patterns/ux-heuristics
Command: npx skills add https://github.com/N2O-com/N2O-just-workflow --skill ux-heuristics-n2o-com

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses inconsistencies and potential usability issues in user interfaces by providing a comprehensive set of UX heuristic rules, ensuring a higher standard of design and accessibility.

Core Features & Use Cases

  • Principle-Based Rules: Offers 28 rules covering Info Architecture, Density, Accessibility, Overflow, Empty States, Navigation, Consistency, Feedback, and Forms.
  • Automated Assessment: Integrated with the frontend review agent for automatic evaluation during UX reviews.
  • Use Case: When reviewing a new feature's UI, the frontend agent automatically consults these heuristics to identify potential violations like poor contrast, incorrect focus indicators, or un-grouped related items, flagging them for correction.

Quick Start

Consult the UX heuristics skill for a review of the UI component code.

Frequently Asked Questions about ux-heuristics

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

FAQPage Schema
What UX heuristics should I check during a frontend UI review?

UX heuristics for a frontend UI review should cover information architecture, density, accessibility, overflow handling, empty states, navigation, consistency, feedback, and forms. This framework provides 28 principle-based rules to evaluate UI quality and flag violations like poor contrast or incorrect focus indicators.

How do I evaluate UI accessibility and consistency in my web application?

To evaluate UI accessibility and consistency, apply heuristic rules that detect poor contrast, incorrect focus indicators, and ungrouped related items. Automated frontend review agents can programmatically assess these UI components, reporting findings with severity levels and specific rule IDs for correction.

Can I automatically detect empty states and overflow issues in UI design?

Yes, you can automatically detect empty states and overflow issues in UI design by integrating a frontend review agent with UX heuristic rules. The agent assesses UI component code to identify potential usability problems across various categories and reports them for correction.

What is the best way to assess form design and navigation in a new feature?

The best way to assess form design and navigation in a new feature is consulting a principle-based UX heuristic framework. It provides specific rules for these categories, allowing a frontend review agent to automatically identify violations and flag them with detailed descriptions and severity.

Does this UX review method support vision-based assessment of UI components?

Yes, this UX review method supports both programmatic and vision-based assessment methods for UI components. The frontend review agent uses the 28 heuristic rules to evaluate UI quality, accommodating different approaches to identify accessibility and design pattern violations.