design-review

Evaluate UI designs against Nielsen heuristics, Gestalt principles, and cognitive walkthrough.

Updated Feb 28, 2026
One-click install
npx skills add https://github.com/cjohnhanson/codelikecody --skill design-review-cjohnhanson
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/cjohnhanson/codelikecody/tree/main/skills/design-review
Command: npx skills add https://github.com/cjohnhanson/codelikecody --skill design-review-cjohnhanson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Systematic design evaluation of web UIs using Nielsen's heuristics, Gestalt principles, and cognitive walkthrough. Dispatches sub-agents as independent evaluators, aggregates severity-rated findings, runs fresh-eyes sessions. Use when reviewing a UI's design quality, after visual changes, or when the user invokes /design-review. Not for functional QA (use qa-web) or code review.

Core Features & Use Cases

  • Phase 1 — Cognitive Walkthrough: assess primary tasks by stepping through the happy path and documenting issues at each stage.
  • Phase 2 — Heuristic Evaluation (Nielsen's 10): dispatch independent evaluators to check all heuristics with structured severity notes.
  • Phase 3 — Visual Evaluation (Gestalt + Norman): evaluate perceptual grouping, affordances, feedback, and state coverage.
  • Phase 4 — Fresh Eyes: spawn a context-free evaluator to test the UI from a naive perspective.
  • Phase 5 — Aggregate & Prioritize: de-duplicate findings, map to heuristics, assign severities, and prioritize fixes.

Quick Start

Provide a UI prototype or screen set to start a full design-review evaluation pass.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I run a usability analysis on a new UI prototype?

To run a usability analysis on a new UI prototype, provide the screen set to trigger an automated evaluation. The system applies cognitive walkthroughs and Nielsen heuristics to surface task flow issues and generate a prioritized action list.

What is a cognitive walkthrough for evaluating interface design?

A cognitive walkthrough for evaluating interface design assesses primary tasks by stepping through the user's happy path. It documents usability issues at each stage to identify friction points before aggregating findings into a prioritized report.

Does this usability evaluation check visual grouping and affordances?

Yes, the usability evaluation checks visual grouping and affordances during its visual evaluation phase. It applies Gestalt principles and Norman's concepts to assess perceptual grouping, feedback, and state coverage across the interface.

Can I use a heuristic evaluation for iterative visual changes?

Yes, you can use a heuristic evaluation for iterative visual changes by providing the updated screen set. The system runs fresh-eyes sessions and aggregates severity-rated findings to map redesign impacts to usability heuristics.

When should I not use a UI design review?

You should not use a UI design review for functional QA or code review. This evaluation specifically targets interface usability, visual design quality, and perceptual grouping rather than testing application functionality or syntax.