Subchapter 2.12
reference/critique.mdMarkdown42 KBView on GitHub
Resolve one stable target, run two independent assessments, synthesize a design critique, persist a snapshot, and ask the user what to improve next. The chat response is the primary deliverable; the snapshot is an archive of that run.
⚠️ DEGRADED: single-context (<reason>). A silent degraded critique is a failed critique.impeccable detect is missing or crashes after a real attempt.Questions skipped: <reason> line is an incomplete run. The report is not the finish; the close is.site/pages/index.astro or index.html"<skill-base-dir>/scripts/impeccable" critique-storage slug "<resolved-path-or-url>".impeccable/critique/ignore.md if it exists. Drop matching findings silently; it is the only prior-run input critique consumes.Delegate Assessment A and Assessment B to separate sub-agents. They must not see each other’s output. Do not show findings to the user until synthesis.
Sub-agent gate (all harnesses):
If browser automation is available, each assessment creates its own new tab. Never reuse an existing tab, even if it is already at the right URL.
Read relevant source files and visually inspect the live page when browser automation is available. Think like a design director.
Evaluate:
n/a instead of forcing a number.Return: design-specificity verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
Run the bundled detector and browser visualization evidence. Assessment B is mandatory and must remain isolated from Assessment A until both are complete.
CLI scan:
"<skill-base-dir>/scripts/impeccable" detect --json [target][target]; do not pass CSS-only files.Browser visualization is required for a viewable target when browser automation is available. Use a localhost dev/static URL for local files; avoid file:// unless the available browser explicitly supports this workflow. Overlay flow:
document.title and appending a <script> tag. Read-only evaluate APIs do not count."<skill-base-dir>/scripts/impeccable" live-server --background, present the browser if supported, label [Human], scroll top, inject http://localhost:PORT/detect.js, wait 2-3 seconds, read impeccable console messages, then stop the live server.Return: CLI findings JSON/counts, browser console findings if applicable, false positives, and skipped/failed browser steps with concrete reasons.
After Assessment B returns usable CLI findings, reuse them. Do not rerun impeccable detect in the parent unless Assessment B failed, was truncated, or omitted count, rule names, or file locations.
Synthesize both assessments into a single report. Do NOT simply concatenate. Weave the findings together, noting where the LLM review and detector agree, where the detector caught issues the LLM missed, and where detector findings are false positives.
The chat response is the primary user-facing deliverable. Present the full structured critique below in chat; do not replace it with a summary and a link. The persisted snapshot is an archive of that run.
Structure your feedback as a design director would:
The report’s first line MUST declare how the assessments were run, so a degraded run is never silent:
Method: dual-agent (A: <agent-id> · B: <agent-id>)⚠️ DEGRADED: single-context (<reason, e.g. no sub-agent tool exposed>)Consult the Heuristics Scoring Guide section below.
Present the Nielsen’s 10 heuristics scores as a table:
| # | Heuristic | Score | Key Issue |
|---|---|---|---|
| 1 | Visibility of System Status | ? | [specific finding or “n/a” if solid] |
| 2 | Match System / Real World | ? | |
| 3 | User Control and Freedom | ? | |
| 4 | Consistency and Standards | ? | |
| 5 | Error Prevention | ? | |
| 6 | Recognition Rather Than Recall | ? | |
| 7 | Flexibility and Efficiency | ? | |
| 8 | Aesthetic and Minimalist Design | ? | |
| 9 | Error Recovery | ? | |
| 10 | Help and Documentation | ? | |
| Total | ??/[applicable max] | [Rating band] |
The applicable maximum is 4 times the number of heuristics you actually scored: /40 when all ten apply, /32 when two are n/a. Never print /40 over a partial set.
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32 out of 40.
Mode applicability: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored n/a on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write n/a in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. 24/32 when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record the applicable maximum and which heuristics were scored n/a.
Start here. Does the result feel authored for this product, or category-interchangeable?
LLM assessment: Your unanchored evaluation of design specificity. Cover overall coherence, structural sameness, category-interchangeable choices, and missed opportunities for product character.
Deterministic scan: Summarize what the automated detector found, with counts and file locations. Note any additional issues the detector caught that you missed, and flag any false positives.
Visual overlays (if injection succeeded): Tell the user that overlays are now visible in the [Human] tab in their browser, highlighting the detected issues. Summarize what the console output reported. If browser visualization was attempted but injection failed, say that no reliable user-visible overlay is available and report the fallback signal instead.
A brief gut reaction: what works, what doesn’t, and the single biggest opportunity.
Highlight 2-3 things done well. Be specific about why they work.
The 3-5 most impactful design problems, ordered by importance.
For each issue, tag with P0-P3 severity (see Issue Severity below for definitions):
Consult the Personas reference below.
Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If .cursorrules contains a ## Design Context section from impeccable init, also generate 1-2 project-specific personas from the audience/brand info.
For each selected persona, walk through the primary user action and list specific red flags found:
Alex (Power User): No keyboard shortcuts detected. Form requires 8 clicks for primary action. Forced modal onboarding. High abandonment risk.
Jordan (First-Timer): Icon-only nav in sidebar. Technical jargon in error messages (“404 Not Found”). No visible help. Will abandon at step 2.
Be specific. Name the exact elements and interactions that fail each persona. Don’t write generic persona descriptions; write what broke for them.
Quick notes on smaller issues worth addressing.
Provocative questions that might unlock better solutions:
Remember:
Write the full report into the chat response now, before any persistence work. This is the deliverable; everything below it is bookkeeping.
Do this first because the alternative is the most common way this command fails: the report gets composed once, straight into the persistence heredoc, and the run ends with a perfect archive nobody has read. Composing it into a file is not delivering it. If the report exists only in .impeccable/critique/, the run produced nothing.
Persistence is not the end of the run. After it, the response continues with the trend line and the close.
Once the report above is finalized, write it to .impeccable/critique/ so the user can refer back, and so /impeccable polish can pick up the priority issues without a copy-paste.
Skip this step if the Setup slug was null (vague or root-level target).
Write the body to a temp file so you can pipe it to the helper. Use the full critique report (heuristic table, design-specificity verdict, priority issues, persona red flags, minor observations, and questions), but stop before the “Ask the User” / “Recommended Actions” sections that come later.
This is a copy of the report you already delivered above, for later commands to read. It is not delivery. If you find yourself composing the report for the first time inside this heredoc, you have skipped Deliver the Report; go back and send it.
Pass the structured metadata through IMPECCABLE_CRITIQUE_META (JSON), then run the write command:
IMPECCABLE_CRITIQUE_META='{"target":"<user phrasing>","total_score":<n>,"max_score":<n>,"na_heuristics":"<comma-separated numbers, or empty>","p0_count":<n>,"p1_count":<n>}' \
"<skill-base-dir>/scripts/impeccable" critique-storage write "<resolved target>" <body-file>max_score is the applicable maximum from the heuristic table (40 when every heuristic applied), so a later run can tell a renormalized total from a full one. For a local file target, the helper also records an exact content fingerprint so polish can distinguish the assessed bytes from later edits without relying on Git state or timestamps. The helper prints the absolute path it wrote. Leave that file on disk. Polish closes it; this run does not.
Delete the temp body file after the write attempt completes, whether the write succeeded or failed. If deletion fails, mention temp-file cleanup failed: <reason> briefly in the final output, but do not block the critique.
Read the trend for context:
"<skill-base-dir>/scripts/impeccable" critique-storage trend "<resolved target>" 5This returns a JSON array of the last 5 frontmatter entries (including the one you just wrote).
Append a single line to the user-visible output, after the report and before the questions:
Trend for
<slug>(last 5 runs): 24 → 28 → 32 → 29 → 32 (out of 40) Wrote.impeccable/critique/<filename>.
Read max_score on each trend entry. When every entry shares one maximum, state it once as above. When they differ, print each score with its own denominator (24/32 → 30/40) and note that the runs scored different heuristic sets, so the line is not a like-for-like comparison. Treat a missing max_score on an older entry as 40.
If this is the first run for the slug, the trend is just one score; say so: “First run for this target, no trend yet.”
Close the run. Go to Ask the User below and emit the questions, or the Questions skipped: <reason> line when the count allows it. The run is not complete until you do. Persistence is bookkeeping and cleanup is not an ending; stopping here leaves the user with a report and no way forward, and leaves /impeccable polish with no priorities to inherit.
This is fire-and-forget. Do not show the user the helper’s JSON output; only the human-readable trend line and the written path. Failures here should not block the rest of the flow; print the error and move on.
After presenting findings, use targeted questions based on what was actually found. Ask the user directly to clarify what you cannot infer. These answers will shape the action plan.
Ask in the same message that carries the report, with the report written out first and the question last. Do not split the two across turns: a turn that ends on the report is a turn that ends, and the questions never arrive. Order within the message is what matters, because prose emitted after a structured question is withheld until the user answers.
Ask questions along these lines (adapt to the specific findings; do NOT ask generic questions):
Priority direction: Based on the issues found, ask which category matters most to the user right now. For example: “I found problems with visual hierarchy, color usage, and information overload. Which area should we tackle first?” Offer the top 2-3 issue categories as options.
Design intent: If the critique found a tonal mismatch, ask whether it was intentional. For example: “The interface feels clinical and corporate. Is that the intended tone, or should it feel warmer/bolder/more playful?” Offer 2-3 tonal directions as options based on what would fix the issues found.
Scope: Ask how much the user wants to take on. For example: “I found N issues. Want to address everything, or focus on the top 3?” Offer scope options like “Top 3 only”, “All issues”, “Critical issues only”.
Constraints (optional; only ask if relevant): If the findings touch many areas, ask if anything is off-limits. For example: “Should any sections stay as-is?” This prevents the plan from touching things the user considers done.
Rules for questions:
Final-question gate. The user-visible response must either include the targeted questions or carry the literal line Questions skipped: <reason> naming the count that permitted the skip. Each question must include 2-3 concrete answer options tied to the actual critique findings. Do not end with only open-ended questions, and do not end with neither: stopping after the report, having asked nothing and printed no skip line, is the most common way this command fails.
After receiving the user’s answers, present a prioritized action summary reflecting the user’s priorities and scope from Ask the User.
List recommended commands in priority order, based on the user’s answers:
/command-name: Brief description of what to fix (specific context from critique findings)/command-name: Brief description (specific context)
…Rules for recommendations:
/impeccable polish as the final step if any fixes were recommendedAfter presenting the summary, tell the user:
You can ask me to run these one at a time, all at once, or in any order you prefer.
Re-run
/impeccable critiqueafter fixes to see your score improve.
The sections below were previously separate reference files (cognitive-load.md, heuristics-scoring.md, personas.md). They live inline now so the critique flow has all its deep context in one place.
Cognitive load is the total mental effort required to use an interface. Overloaded users make mistakes, get frustrated, and leave. This reference helps identify and fix cognitive overload.
Complexity inherent to what the user is trying to do. You can’t eliminate this, but you can structure it.
Manage it by:
Mental effort caused by poor design choices. Eliminate this ruthlessly. It’s pure waste.
Common sources:
Mental effort spent building understanding. This is good cognitive load; it leads to mastery.
Support it by:
Evaluate the interface against these 8 items:
Scoring: Count the failed items. 0–1 failures = low cognitive load (good). 2–3 = moderate (address soon). 4+ = high cognitive load (critical fix needed).
Humans can hold ≤4 items in working memory at once (Miller’s Law revised by Cowan, 2001).
At any decision point, count the number of distinct options, actions, or pieces of information a user must simultaneously consider:
Practical applications:
Problem: Presenting 10+ choices at once with no hierarchy. Fix: Group into categories, highlight recommended, use progressive disclosure.
Problem: User must remember info from step 1 to complete step 3. Fix: Keep relevant context visible, or repeat it where it’s needed.
Problem: User must build a mental map of where things are. Fix: Always show current location (breadcrumbs, active states, progress indicators).
Problem: Technical or domain language forces translation effort. Fix: Use plain language. If domain terms are unavoidable, define them inline.
Problem: Every element has the same visual weight; nothing stands out. Fix: Establish clear hierarchy: one primary element, 2–3 secondary, everything else muted.
Problem: Similar actions work differently in different places. Fix: Standardize interaction patterns. Same type of action = same type of UI.
Problem: Interface requires processing multiple simultaneous inputs (reading + deciding + navigating). Fix: Sequence the steps. Let the user do one thing at a time.
Problem: User must jump between screens/tabs/modals to gather info for a single decision. Fix: Co-locate the information needed for each decision. Reduce back-and-forth.
Score each of Nielsen’s 10 Usability Heuristics on a 0–4 scale. Be honest: a 4 means genuinely excellent, not “good enough.”
Keep users informed about what’s happening through timely, appropriate feedback.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | No feedback; user is guessing what happened |
| 1 | Rare feedback; most actions produce no visible response |
| 2 | Partial; some states communicated, major gaps remain |
| 3 | Good; most operations give clear feedback, minor gaps |
| 4 | Excellent; every action confirms, progress is always visible |
Speak the user’s language. Follow real-world conventions. Information appears in natural, logical order.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | Pure tech jargon, alien to users |
| 1 | Mostly confusing; requires domain expertise to navigate |
| 2 | Mixed; some plain language, some jargon leaks through |
| 3 | Mostly natural; occasional term needs context |
| 4 | Speaks the user’s language fluently throughout |
Users need a clear “emergency exit” from unwanted states without extended dialogue.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | Users get trapped; no way out without refreshing |
| 1 | Difficult exits; must find obscure paths to escape |
| 2 | Some exits; main flows have escape, edge cases don’t |
| 3 | Good control; users can exit and undo most actions |
| 4 | Full control; undo, cancel, back, and escape everywhere |
Users shouldn’t wonder whether different words, situations, or actions mean the same thing.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | Inconsistent everywhere; feels like different products stitched together |
| 1 | Many inconsistencies; similar things look/behave differently |
| 2 | Partially consistent; main flows match, details diverge |
| 3 | Mostly consistent; occasional deviation, nothing confusing |
| 4 | Fully consistent; cohesive system, predictable behavior |
Better than good error messages is a design that prevents problems in the first place.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | Errors easy to make; no guardrails anywhere |
| 1 | Few safeguards; some inputs validated, most aren’t |
| 2 | Partial prevention; common errors caught, edge cases slip |
| 3 | Good prevention; most error paths blocked proactively |
| 4 | Excellent; errors nearly impossible through smart constraints |
Minimize memory load. Make objects, actions, and options visible or easily retrievable.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | Heavy memorization; users must remember paths and commands |
| 1 | Mostly recall; many hidden features, few visible cues |
| 2 | Some aids; main actions visible, secondary features hidden |
| 3 | Good recognition; most things discoverable, few memory demands |
| 4 | Everything discoverable; users never need to memorize |
Accelerators, invisible to novices, speed up expert interaction.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | One rigid path; no shortcuts or alternatives |
| 1 | Limited flexibility; few alternatives to the main path |
| 2 | Some shortcuts; basic keyboard support, limited bulk actions |
| 3 | Good accelerators; keyboard nav, some customization |
| 4 | Highly flexible; multiple paths, power features, customizable |
Interfaces should not contain irrelevant or rarely needed information. Every element should serve a purpose.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | Overwhelming; everything competes for attention equally |
| 1 | Cluttered; too much noise, hard to find what matters |
| 2 | Some clutter; main content clear, periphery noisy |
| 3 | Mostly clean; focused design, minor visual noise |
| 4 | Perfectly minimal; every element earns its pixel |
Error messages should use plain language, precisely indicate the problem, and constructively suggest a solution.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | Cryptic errors; codes, jargon, or no message at all |
| 1 | Vague errors; “Something went wrong” with no guidance |
| 2 | Clear but unhelpful; names the problem but not the fix |
| 3 | Clear with suggestions; identifies problem and offers next steps |
| 4 | Perfect recovery; pinpoints issue, suggests fix, preserves user work |
Even if the system is usable without docs, help should be easy to find, task-focused, and concise.
Check for:
Scoring:
| Score | Criteria |
|---|---|
| 0 | No help available anywhere |
| 1 | Help exists but hard to find or irrelevant |
| 2 | Basic help; FAQ or docs exist, not contextual |
| 3 | Good documentation; searchable, mostly task-focused |
| 4 | Excellent contextual help; right info at the right moment |
Total possible: 40 points (10 heuristics × 4 max)
| Score Range | Rating | What It Means |
|---|---|---|
| 36–40 | Excellent | Minor polish only; ship it |
| 28–35 | Good | Address weak areas, solid foundation |
| 20–27 | Acceptable | Significant improvements needed before users are happy |
| 12–19 | Poor | Major UX overhaul required; core experience broken |
| 0–11 | Critical | Redesign needed; unusable in current state |
When heuristics were scored n/a, the maximum is lower than 40; read the band off the percentage instead of the raw number (90%+ Excellent, 70%+ Good, 50%+ Acceptable, 30%+ Poor, below that Critical). 24/32 is 75%, so Good.
Tag each individual issue found during scoring with a priority level:
| Priority | Name | Description | Action |
|---|---|---|---|
| P0 | Blocking | Prevents task completion entirely | Fix immediately; this is a showstopper |
| P1 | Major | Causes significant difficulty or confusion | Fix before release |
| P2 | Minor | Annoyance, but workaround exists | Fix in next pass |
| P3 | Polish | Nice-to-fix, no real user impact | Fix if time permits |
Tip: If you’re unsure between two levels, ask: “Would a user contact support about this?” If yes, it’s at least P1.
Test the interface through the eyes of 5 distinct user archetypes. Each persona exposes different failure modes that a single “design director” perspective would miss.
How to use: Select 2–3 personas most relevant to the interface being critiqued. Walk through the primary user action as each persona. Report specific red flags, not generic concerns.
Profile: Expert with similar products. Expects efficiency, hates hand-holding. Will find shortcuts or leave.
Behaviors:
Test Questions:
Red Flags (report these specifically):
Profile: Never used this type of product. Needs guidance at every step. Will abandon rather than figure it out.
Behaviors:
Test Questions:
Red Flags (report these specifically):
Profile: Uses screen reader (VoiceOver/NVDA), keyboard-only navigation. May have low vision, motor impairment, or cognitive differences.
Behaviors:
Test Questions:
Red Flags (report these specifically):
Profile: Methodical user who pushes interfaces beyond the happy path. Tests edge cases, tries unexpected inputs, and probes for gaps in the experience.
Behaviors:
Test Questions:
Red Flags (report these specifically):
Profile: Using phone one-handed on the go. Frequently interrupted. Possibly on a slow connection.
Behaviors:
Test Questions:
Red Flags (report these specifically):
Choose personas based on the interface type:
| Interface Type | Primary Personas | Why |
|---|---|---|
| Landing page / marketing | Jordan, Riley, Casey | First impressions, trust, mobile |
| Dashboard / admin | Alex, Sam | Power users, accessibility |
| E-commerce / checkout | Casey, Riley, Jordan | Mobile, edge cases, clarity |
| Onboarding flow | Jordan, Casey | Confusion, interruption |
| Data-heavy / analytics | Alex, Sam | Efficiency, keyboard nav |
| Form-heavy / wizard | Jordan, Sam, Casey | Clarity, accessibility, mobile |
If .cursorrules contains a ## Design Context section (generated by impeccable init), derive 1–2 additional personas from the audience and brand information:
##### [Role]: "[Name]"
**Profile**: [2-3 key characteristics derived from Design Context]
**Behaviors**: [3-4 specific behaviors based on the described audience]
**Red Flags**: [3-4 things that would alienate this specific user type]Only generate project-specific personas when real Design Context data is available. Don’t invent audience details; use the 5 predefined personas when no context exists.
This file