Files
Parsons/.claude/skills/critique/SKILL.md
Richie cb57bc3042 Integrate impeccable design quality tools
Selective integration from pbakaus/impeccable (Apache 2.0):

Reference material (docs/reference/impeccable/):
- 7 design guides: typography, color-and-contrast, spatial-design,
  motion-design, interaction-design, responsive-design, ux-writing
- 3 critique references: cognitive-load, heuristics-scoring, personas
- 4 skill references for internal use: audit, critique, polish,
  frontend-design (anti-patterns list)

New skills:
- /audit — technical quality scoring (0-20) across 5 dimensions:
  accessibility, performance, theming, responsive, design quality
- /critique — UX design review using Nielsen's 10 heuristics (0-40),
  adapted for FA's sensitive audience context

Updated skills:
- /review-component — added interactive states checklist and design
  anti-patterns checklist (8 checks each)
- /preflight — added visual QA spot-check section (transitions,
  focus-visible, touch targets, spacing consistency)

No code changes — all existing components, tokens, and theme untouched.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 16:35:39 +11:00

5.1 KiB

name, description, user-invocable, argument-hint
name description user-invocable argument-hint
critique UX design review — evaluates visual hierarchy, emotional journey, cognitive load, and overall quality using Nielsen's heuristics (scored 0-40). Adapted from impeccable (Apache 2.0). true [component or area to critique]

Conduct a holistic UX design critique. Think like a design director giving feedback — evaluate whether the interface actually works as a designed experience, not just technically.

Target: $ARGUMENTS

Preparation

  1. Read docs/design-system.md for FA design context and brand guidelines
  2. Read docs/memory/decisions-log.md for design rationale
  3. Read the target component/area source and stories
  4. Reference docs/reference/impeccable/cognitive-load.md for the 8-item checklist
  5. Reference docs/reference/impeccable/heuristics-scoring.md for scoring criteria

FA context reminder: Funeral Arranger serves families often in grief or distress. The design must feel warm, trustworthy, transparent, and calm. Clarity over cleverness. Accessibility is critical — users may be elderly, emotional, or unfamiliar with technology.

Phase 1: Design Critique

Evaluate across these dimensions:

1. Visual Hierarchy

  • Does the eye flow to the most important element first?
  • Is there a clear primary action visible within 2 seconds?
  • Do size, colour, and position communicate importance correctly?
  • Is there visual competition between elements of different weights?

2. Information Architecture & Cognitive Load

  • Is the structure intuitive for a first-time user?
  • Is related content grouped logically?
  • Are there too many choices at once? (>4 at a decision point = flag it)
  • Run the 8-item cognitive load checklist from docs/reference/impeccable/cognitive-load.md
  • Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical

3. Emotional Journey

  • Does the interface feel warm and trustworthy (appropriate for FA)?
  • Would a grieving family member feel "this is for me"?
  • Are there design interventions at anxiety-prone moments (pricing, commitment, forms)?
  • Does the experience end well (confirmation, clear next step)?

4. Discoverability & Affordance

  • Are interactive elements obviously interactive?
  • Would a user know what to do without instructions?
  • Are hover/focus states providing useful feedback?

5. Composition & Balance

  • Does the layout feel balanced?
  • Is whitespace used intentionally?
  • Is there visual rhythm in spacing and repetition?

6. Typography as Communication

  • Does the type hierarchy signal what to read first, second, third?
  • Is body text comfortable to read? (line length 45-75ch, adequate size)
  • Do font choices reinforce FA's warm, professional tone?

7. Colour with Purpose

  • Is colour used to communicate, not just decorate?
  • Does the warm gold/copper brand palette feel cohesive?
  • Are accent colours drawing attention to the right things?
  • Does it work for colourblind users?

8. States & Edge Cases

  • Empty states: Do they guide users toward action?
  • Loading states: Do they reduce perceived wait time?
  • Error states: Are they helpful and non-blaming? (critical for FA — no aggressive red labels)
  • Success states: Do they confirm and guide next steps?

9. Microcopy & Voice

  • Is the writing clear and concise?
  • Does it sound warm and professional (FA's tone)?
  • Are labels and buttons unambiguous?
  • Does error copy help users fix the problem without distress?

Phase 2: Present Findings

Design Health Score

Score each of Nielsen's 10 heuristics 0-4 (consult docs/reference/impeccable/heuristics-scoring.md):

# Heuristic Score Key Issue
1 Visibility of System Status ?
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 ??/40 [Rating]

Ratings: 36-40 Excellent, 28-35 Good, 20-27 Acceptable, 12-19 Poor, 0-11 Critical

Overall Impression

Brief gut reaction — what works, what doesn't, the single biggest opportunity.

What's Working

2-3 things done well. Be specific about why they work.

Priority Issues

3-5 most impactful design problems, ordered by importance.

For each issue, tag P0-P3:

  • [P?] What: Name the problem
  • Why it matters: How it hurts users (especially in FA's sensitive context)
  • Fix: Concrete recommendation

FA Audience Check

Walk through the primary user flow as:

  1. Bereaved family member (60+, first time, emotional, possibly on mobile)
  2. Arrangement planner (30-50, comparing options, price-sensitive, wants transparency)

For each persona, list specific pain points found.

Minor Observations

Quick notes on smaller issues worth addressing.

Remember: Be direct and specific. Say what's wrong AND why it matters. Prioritise ruthlessly. Don't soften criticism — honest feedback ships better design.