critique

Evaluate interface designs with heuristic scoring, persona testing, and automated anti-pattern detection.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/ivaylo91/Shopping-Mobile-App --skill critique-ivaylo91
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: critique
Source: https://github.com/ivaylo91/Shopping-Mobile-App/tree/main/.agents/skills/critique
Command: npx skills add https://github.com/ivaylo91/Shopping-Mobile-App --skill critique-ivaylo91

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design reviews are often subjective and inconsistent, missing AI-generated design tells, cognitive overload, and accessibility failures. This Skill provides a structured, repeatable UX evaluation combining expert design review with deterministic automated detection. ## Core Features & Use Cases - Dual Independent Assessments: Runs an LLM design review and a deterministic CLI/browser-based detector separately to avoid bias, then synthesizes findings into one report. - Quantitative Scoring: Scores all 10 Nielsen heuristics (0-4 each, 40 total) with rating bands, plus an 8-item cognitive load checklist and P0-P3 severity tagging for every issue. - Persona-Based Testing: Walks the primary user flow as 2-3 relevant personas (power user, first-timer, accessibility-dependent, stress tester, mobile user) and reports concrete red flags. - Use Case: After building a new dashboard page, run the critique to get a Design Health Score, a list of prioritized issues with suggested fix commands, and visual overlays highlighting problems directly in the browser. ## Quick Start Ask the AI to critique the current page or component, for example: review the checkout flow and give me a design critique with scores and prioritized fixes.

Frequently Asked Questions about critique

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

FAQPage Schema
How do I get a UX design review of my web page?

Run the critique skill against your page or component. It launches two independent assessments—an LLM design review and an automated detector—then synthesizes a report with heuristic scores, priority issues, and persona red flags.

How to detect AI-generated design patterns in my interface?

The skill checks for AI slop tells such as generic color palettes, gradient text, glassmorphism, identical card grids, and hero metric layouts. The bundled detector flags 25 specific patterns via CLI scan or browser overlay.

What files can the automated design detector scan?

The CLI scan accepts HTML, JSX, TSX, Vue, and Svelte files or directories containing markup. CSS-only files should not be passed, and URLs require the browser-based live detection server instead of the CLI.

Does the critique work without browser automation tools?

Yes. Without browser automation, the skill falls back to reading source files and running the CLI scan with npx impeccable. Browser visualization with overlays is optional and only used when automation tools are available.

How is the design quality score calculated?

Each of Nielsen's 10 usability heuristics is scored 0-4 for a 40-point total. Scores map to rating bands: 36-40 excellent, 28-35 good, 20-27 acceptable, 12-19 poor, and 0-11 critical.

What are the limitations of the automated detector?

The detector can produce false positives that the LLM review must filter out. For directories with 200+ files a fast regex-only mode is needed, and for 500+ files the scope should be narrowed or confirmed with the user.