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>
This commit is contained in:
116
.claude/skills/typeset/SKILL.md
Normal file
116
.claude/skills/typeset/SKILL.md
Normal file
@@ -0,0 +1,116 @@
|
||||
---
|
||||
name: typeset
|
||||
description: Typography refinement — checks hierarchy consistency, line length, line height, font weight, and mobile readability across a component or area.
|
||||
user-invocable: true
|
||||
argument-hint: "[component or area to typeset]"
|
||||
---
|
||||
|
||||
Run a typography-focused review on a component or area, then **fix issues found**. This is assessment AND fix — diagnose problems, then apply corrections.
|
||||
|
||||
**Target:** $ARGUMENTS
|
||||
|
||||
## Preparation
|
||||
|
||||
1. Read `docs/design-system.md` for FA typography conventions
|
||||
2. Read `docs/memory/token-registry.md` for the current type scale and weight decisions
|
||||
3. Read `docs/memory/decisions-log.md` for typography-related decisions (especially D017, D019)
|
||||
4. Read the target component/area source files and stories
|
||||
5. Reference `docs/reference/impeccable/typography.md` for detailed typographic guidelines
|
||||
|
||||
**FA context reminder**: Funeral Arranger serves families often in grief or distress. Many users are elderly, on mobile, and reading under emotional strain. Typography must prioritise readability and calm hierarchy over visual flair. Warmth comes through the serif display type (Noto Serif SC) at display sizes — not through decorative overuse. Body text must be effortlessly readable.
|
||||
|
||||
## Diagnostic Checks
|
||||
|
||||
Work through each check systematically. For each issue found, note the problem, then fix it.
|
||||
|
||||
### 1. Hierarchy Consistency
|
||||
|
||||
- Same semantic level must have the same visual treatment everywhere in the target
|
||||
- Heading levels should use the correct MUI typography variant (h1-h6, subtitle1/2, body1/2)
|
||||
- No more than 3-4 distinct text sizes visible at once (muddy hierarchy = too many similar sizes)
|
||||
- Size jumps between levels should be clear — avoid sizes too close together (e.g., 14px, 15px, 16px)
|
||||
- Check that the modular scale from the token system is followed consistently
|
||||
|
||||
### 2. Line Length (Measure)
|
||||
|
||||
- Body text should be constrained to 45-75 characters per line (`max-width: 65ch` is a good default)
|
||||
- If body text runs full-width on desktop, add a `max-width` using `ch` units
|
||||
- Narrow columns (sidebars, cards) may go below 45ch — tighten line-height to compensate
|
||||
- Wide text blocks strain reading comprehension, especially for elderly/distressed users
|
||||
|
||||
### 3. Line Height
|
||||
|
||||
- Body text: 1.5-1.6 line-height for comfortable reading
|
||||
- Headings: tighter line-height (1.1-1.3) since larger text needs less relative leading
|
||||
- Line-height scales inversely with line length — narrow columns need tighter leading, wide columns need more
|
||||
- Light text on dark backgrounds needs ~0.05-0.1 more line-height than normal
|
||||
- Vertical rhythm: spacing values should relate to the base line-height unit
|
||||
|
||||
### 4. Font Weight Consistency
|
||||
|
||||
- **Body weight must be Medium 500** (per D019) — check that body text is not using 400 (Regular)
|
||||
- Headings should use consistent weights within tiers (all h2s same weight, all h3s same weight)
|
||||
- Avoid more than 3 font weights in the same view — too many competing weights create noise
|
||||
- Bold should be used for emphasis, not as a default state for UI elements
|
||||
- Check that weight values come from the theme, not hardcoded
|
||||
|
||||
### 5. Display Font Usage
|
||||
|
||||
- **Noto Serif SC is for display variants only** (per D017) — hero text, display headings, featured quotes
|
||||
- Noto Serif SC must NOT be used for standard headings (h1-h6 in regular UI contexts)
|
||||
- Standard headings use the sans-serif stack (Figtree or system font)
|
||||
- If the serif font appears on a regular heading, replace it with the sans-serif variant
|
||||
|
||||
### 6. Mobile Font Size Adequacy
|
||||
|
||||
- Body text minimum 14px on mobile (16px preferred, per impeccable guidelines)
|
||||
- Small/caption text minimum 12px
|
||||
- Touch-target text (buttons, links in body) must be large enough to tap accurately
|
||||
- Check that `rem` units are used (not `px`) so text respects browser zoom settings
|
||||
- Verify no `user-scalable=no` in viewport meta (breaks accessibility)
|
||||
|
||||
### 7. Token Compliance
|
||||
|
||||
- All font sizes should come from theme.typography variants, not hardcoded values
|
||||
- All font weights should come from theme tokens
|
||||
- All line-heights should come from theme tokens
|
||||
- Font family should come from theme, never hardcoded strings
|
||||
- Check for inline `style` props that override typography tokens
|
||||
|
||||
## Fix Process
|
||||
|
||||
For each issue found:
|
||||
|
||||
1. **Identify** the file, line, and current value
|
||||
2. **Reference** the correct token/theme value it should use
|
||||
3. **Apply the fix** — update the component source to use the correct theme value
|
||||
4. **Verify** the fix maintains visual intent (don't blindly replace — ensure the result looks right)
|
||||
|
||||
## Report Format
|
||||
|
||||
After fixing, present a summary:
|
||||
|
||||
### Typography Health Summary
|
||||
|
||||
| Check | Status | Issues Found | Issues Fixed |
|
||||
|-------|--------|-------------|-------------|
|
||||
| Hierarchy Consistency | pass/warn/fail | N | N |
|
||||
| Line Length | pass/warn/fail | N | N |
|
||||
| Line Height | pass/warn/fail | N | N |
|
||||
| Font Weight | pass/warn/fail | N | N |
|
||||
| Display Font Usage | pass/warn/fail | N | N |
|
||||
| Mobile Font Size | pass/warn/fail | N | N |
|
||||
| Token Compliance | pass/warn/fail | N | N |
|
||||
|
||||
### Changes Made
|
||||
|
||||
For each fix applied:
|
||||
- **What changed**: Brief description
|
||||
- **File**: Path and relevant line(s)
|
||||
- **Before/After**: The old and new values
|
||||
|
||||
### Remaining Concerns
|
||||
|
||||
Any issues that need design input or are outside the scope of a typesetting pass.
|
||||
|
||||
**NEVER**: Hardcode font sizes in px. Use the serif display font (Noto Serif SC) for regular headings. Set body weight to 400 (Regular) — FA uses 500 (Medium). Remove typography tokens in favour of inline styles. Ignore mobile readability.
|
||||
Reference in New Issue
Block a user