Richie
cb57bc3042
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>
4.3 KiB
name, description, user-invocable, argument-hint
| name | description | user-invocable | argument-hint |
|---|---|---|---|
| audit | Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings. Adapted from impeccable (Apache 2.0). | true | [component or area to audit] |
Run systematic technical quality checks on a component or area and generate a scored report. This is assessment-only — don't fix issues, document them.
Target: $ARGUMENTS
Preparation
- Read
docs/design-system.mdfor FA design conventions - Read the component/area source files
- Reference
docs/reference/impeccable/for detailed design guidelines when scoring
Diagnostic Scan
Score each dimension 0-4.
1. Accessibility (A11y)
Check for:
- Contrast ratios < 4.5:1 for text, < 3:1 for large text and UI components
- Missing ARIA: interactive elements without proper roles, labels, or states
- Keyboard navigation: missing focus-visible indicators, illogical tab order
- Semantic HTML: divs instead of buttons, missing landmarks, heading hierarchy
- Form issues: inputs without labels, poor error messaging
- Touch targets < 44px (critical for FA's audience — elderly, distressed)
Score: 0=Fails WCAG A, 1=Major gaps, 2=Partial effort, 3=AA mostly met, 4=AA fully met
2. Performance
Check for:
- Expensive animations: animating layout properties instead of transform/opacity
- Missing optimisation: unoptimised assets, missing lazy loading
- Bundle concerns: unnecessary imports, unused dependencies
- Render performance: unnecessary re-renders, missing memoisation
Score: 0=Severe issues, 1=Major problems, 2=Partial, 3=Mostly optimised, 4=Excellent
3. Theming & Token Compliance
Check for:
- Hardcoded colours not using theme palette or CSS variables
- Hardcoded spacing not using theme.spacing() or token values
- Hardcoded typography not using theme.typography variants
- Inconsistent token usage: wrong tier (primitive instead of semantic)
- Component tokens missing
$descriptionfields
Score: 0=Hardcoded everything, 1=Minimal tokens, 2=Inconsistent, 3=Good with minor gaps, 4=Full token compliance
4. Responsive Design
Check for:
- Fixed widths that break on mobile
- Touch targets < 44px on interactive elements
- Horizontal scroll/overflow on narrow viewports
- Text scaling: layouts that break when text size increases
- Missing responsive padding (mobile vs desktop)
Score: 0=Desktop-only, 1=Major issues, 2=Partial, 3=Good, 4=Fluid and responsive
5. Design Quality
Check against these anti-patterns (from impeccable frontend-design guidelines):
- Gray text on coloured backgrounds (looks washed out)
- Cards nested inside cards (visual noise)
- Identical card grids with no variation
- Bounce/elastic easing (dated, tacky)
- Every button styled as primary (no hierarchy)
- Redundant copy (headers restating the same info)
- Glassmorphism/blur used decoratively
- Missing interactive states (hover without focus, or vice versa)
Score: 0=Multiple anti-patterns, 1=Several issues, 2=A couple, 3=Mostly clean, 4=Intentional, distinctive design
Report Format
Audit Health Score
| # | Dimension | Score | Key Finding |
|---|---|---|---|
| 1 | Accessibility | ? | |
| 2 | Performance | ? | |
| 3 | Theming & Tokens | ? | |
| 4 | Responsive Design | ? | |
| 5 | Design Quality | ? | |
| Total | ??/20 | [Rating] |
Ratings: 18-20 Excellent, 14-17 Good, 10-13 Acceptable, 6-9 Poor, 0-5 Critical
Executive Summary
- Score and rating
- Issue count by severity (P0/P1/P2/P3)
- Top 3-5 critical issues
- Recommended next steps
Detailed Findings
Tag each issue P0-P3:
- P0 Blocking: Prevents task completion — fix immediately
- P1 Major: WCAG AA violation or significant UX issue — fix before release
- P2 Minor: Annoyance, workaround exists — fix in next pass
- P3 Polish: Nice-to-fix — address if time permits
For each issue:
- [P?] Issue name
- Location: Component, file, line
- Category: Accessibility / Performance / Theming / Responsive / Design Quality
- Impact: How it affects users
- Recommendation: How to fix it
Positive Findings
Note what's working well — good practices to maintain.
NEVER: Report issues without explaining impact. Provide generic recommendations. Skip positive findings. Mark everything as P0.