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>
120 lines
4.3 KiB
Markdown
120 lines
4.3 KiB
Markdown
---
|
|
name: audit
|
|
description: 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).
|
|
user-invocable: true
|
|
argument-hint: "[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
|
|
|
|
1. Read `docs/design-system.md` for FA design conventions
|
|
2. Read the component/area source files
|
|
3. 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 `$description` fields
|
|
|
|
**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.
|