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>
This commit is contained in:
2026-03-25 16:35:39 +11:00
parent e67e8f46f7
commit cb57bc3042
18 changed files with 2367 additions and 0 deletions

View File

@@ -78,3 +78,14 @@ Result: PASS (safe to commit)
Use `PASS`, `FAIL`, or `WARN`. If any critical check fails, the result is `FAIL (do not commit)`. If only warnings, result is `PASS (safe to commit)` with warnings listed.
If `--fix` was passed, attempt to fix issues automatically (e.g., run `npm run build:tokens` for stale tokens) and re-check.
### 6. Visual QA spot-check (manual review, non-blocking)
If a component was recently modified, do a quick visual review of the source code for these common issues (adapted from impeccable /polish):
- **Transition consistency**: All interactive state changes should use `150ms ease-in-out` (FA convention). Flag mismatches.
- **Focus-visible**: Every interactive element should have a `:focus-visible` style. Flag any that rely only on hover.
- **Touch targets**: Interactive elements should have `minHeight >= 44px` for the largest size (or the mobile-intended size).
- **Spacing consistency**: Padding/gap values should use `theme.spacing()` or token CSS variables, not raw px.
These are advisory — report as `INFO` lines after the main results. Do not block commit for these.