Add workflow infrastructure — ESLint, Prettier, Husky, Vitest, 7 new skills

Phase 1: Session log archived (1096→91 lines), D031 token access convention
Phase 2: ESLint v9 + Prettier + jsx-a11y, initial config and lint fixes
Phase 3: 7 new skills (polish, harden, normalize, clarify, typeset, quieter, adapt)
         + Vercel reference docs, updated audit/review-component refs
Phase 4: Husky + lint-staged pre-commit hooks, preflight updated to 8 checks
Phase 5: Vitest + Testing Library + /write-tests skill

- Badge.tsx colour maps unified to CSS variables (D031)
- 5 empty interface→type alias fixes (Switch, Radio, Divider, IconButton, Link)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.claude/skills/quieter/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: quieter
+description: Calmer design pass — reduces visual noise, aggressive colours, competing weights, and transactional copy. Highly FA-specific for grief-sensitive context.
+user-invocable: true
+argument-hint: "[component or area to quiet]"
+---
+
+Run a grief-sensitive design pass on a component or area, then **fix issues found**. This is assessment AND fix — diagnose anything that feels too loud, too urgent, or too transactional for a funeral planning context, then apply corrections.
+
+**Target:** $ARGUMENTS
+
+## Preparation
+
+1. Read `docs/design-system.md` for FA brand guidelines and tone
+2. Read `docs/memory/decisions-log.md` for colour and tone decisions (especially D024 for error treatment)
+3. Read the target component/area source files and stories
+4. Reference `docs/reference/impeccable/color-and-contrast.md` for colour usage principles
+5. Reference `docs/reference/impeccable/personas.md` for user archetypes (especially Jordan — confused first-timer, and Casey — distracted mobile user)
+
+**FA context reminder**: "Understated empathy — warm but not gushy. Let UI structure be the empathy." Users are often elderly, emotional, and unfamiliar with technology. They may be planning a funeral for a loved one who has just died. Design must feel like a trusted advisor, not a sales platform. Every element that demands attention should earn it. Silence and space are design tools.
+
+## Diagnostic Checks
+
+Work through each check systematically. For each issue found, note the problem, then fix it.
+
+### 1. Aggressive Colour Treatment
+
+- **Error states must NOT use aggressive red** — FA uses a softer copper/warm treatment for errors (per D024)
+- Check for bright, saturated reds (#ff0000, #e53935, MUI error.main defaults) in error messages, validation, or alerts
+- Replace with the FA copper error palette from the theme (`palette.error.main` should already be the soft treatment)
+- Warning states should also be warm, not harsh yellow/orange
+- Success states should be muted green, not vivid/celebratory
+- Check that semantic colours come from the theme, not hardcoded aggressive values
+
+### 2. High Saturation Where Muted Would Be Better
+
+- Scan for highly saturated colours that draw disproportionate attention
+- Background colours should be muted — surfaces use the warm neutral palette, not bright fills
+- Accent colours work because they are rare (60-30-10 rule) — if accent is used liberally, it stops working
+- Icons and decorative elements should use muted tones unless they serve a functional purpose
+- Check that the warm gold/copper brand palette is cohesive — no jarring colour outliers
+
+### 3. Competing Visual Weights
+
+- Look for multiple bold or heavy elements fighting for attention in the same view
+- There should be one clear primary focal point — if multiple elements scream for attention, quiet the secondary ones
+- Bold text should be used for emphasis, not as default — if everything is bold, nothing is
+- Check for multiple large/heavy headings at the same level competing with each other
+- Reduce weight on supporting elements (metadata, labels, secondary info) to let primary content breathe
+
+### 4. Insufficient Whitespace
+
+- Check padding and margins — grief-sensitive design needs generous breathing room
+- Cards, sections, and content blocks should have ample internal padding
+- Vertical spacing between sections should feel restful, not cramped
+- Dense layouts feel overwhelming for users in emotional distress — space creates calm
+- Check that spacing values come from the theme spacing scale, and lean toward the generous end
+
+### 5. Urgent Animations and Transitions
+
+- Animations should feel gentle, not snappy or urgent
+- Check for bounce/elastic easing — replace with ease-out or ease-in-out
+- Transition durations should be moderate (200-400ms for UI, longer for content reveals)
+- No attention-grabbing animations (pulse, shake, flash) — these feel demanding
+- Loading states should feel patient, not frantic
+- If an animation can be removed without losing meaning, consider removing it
+
+### 6. Transactional Copy
+
+- Copy should feel empathetic and guiding, not sales-driven or transactional
+- Check button labels: "Buy Now", "Add to Cart", "Submit" feel transactional — prefer "Continue", "Next Step", "Confirm Details"
+- Check headings: avoid language that feels like a sales funnel ("Choose Your Package", "Upgrade", "Best Value")
+- Error messages should be gentle and helpful, never blaming ("Something went wrong" not "You entered an invalid...")
+- Avoid urgency language ("Limited time", "Act now", "Don't miss out") — this is deeply inappropriate in a grief context
+- Pricing should be presented transparently, not with sales psychology (no crossed-out prices, no "savings" badges)
+- Check for placeholder/lorem text that may have a casual or inappropriate tone
+
+### 7. CTA Hierarchy
+
+- There should be ONE clear primary CTA per view/section — not multiple competing calls to action
+- Secondary actions should be visually distinct (outlined, text-only) not just smaller versions of primary buttons
+- If there are more than 2 CTAs visible simultaneously, evaluate whether some can be demoted or removed
+- The primary CTA should feel inviting, not pressuring — warm brand colour, not aggressive contrast
+- Check that button hierarchy uses theme variants correctly (contained for primary, outlined for secondary, text for tertiary)
+
+## Fix Process
+
+For each issue found:
+
+1. **Identify** the file, line, and current value
+2. **Assess emotional impact** — how does this element feel to a grieving user?
+3. **Determine the quieter alternative** — what change reduces noise while preserving function?
+4. **Apply the fix** — update colours, weights, spacing, copy, or animation values
+5. **Verify** the fix doesn't make the element invisible or non-functional — quiet does not mean hidden
+
+## Report Format
+
+After fixing, present a summary:
+
+### Quiet Pass Summary
+
+| Check | Status | Issues Found | Issues Fixed |
+|-------|--------|-------------|-------------|
+| Aggressive Colours | pass/warn/fail | N | N |
+| High Saturation | pass/warn/fail | N | N |
+| Competing Weights | pass/warn/fail | N | N |
+| Whitespace | pass/warn/fail | N | N |
+| Animations/Transitions | pass/warn/fail | N | N |
+| Transactional Copy | pass/warn/fail | N | N |
+| CTA Hierarchy | pass/warn/fail | N | N |
+
+### Emotional Tone Assessment
+
+Brief statement on the overall emotional register of the component:
+- Does it feel like a **trusted advisor** or a **sales platform**?
+- Would a grieving family member feel **supported** or **pressured**?
+- Is the design **calm** or **demanding**?
+
+### Changes Made
+
+For each fix applied:
+- **What changed**: Brief description
+- **File**: Path and relevant line(s)
+- **Before/After**: The old and new values
+- **Why**: How this change serves the grief-sensitive context
+
+### Remaining Concerns
+
+Any issues that need design input, copy review, or are outside the scope of a quieting pass.
+
+**NEVER**: Use aggressive red for error states. Add urgency language or sales psychology. Make everything equally loud. Remove functional affordances in the name of minimalism. Ignore that real people in real pain will use this interface.