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>

.claude/skills/critique/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: critique
+description: 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).
+user-invocable: true
+argument-hint: "[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.