diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 7c6be11..4a4e4bb 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -16,10 +16,10 @@ duplicates) and MUST update it after completing one. | Component | Status | Variants | Tokens used | Notes | |-----------|--------|----------|-------------|-------| -| Button | review | contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth | button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700 | Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey. | +| Button | done | contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth | button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700 | Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey. | | IconButton | planned | contained, soft, outlined, text × small, medium, large | Reuses Button tokens | Icon-only button (close, menu, actions). Wrap MUI IconButton with FA theme. Build when Navigation/modals are needed. | -| Typography | review | displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom | typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display | Text display system. Thin MUI wrapper with maxLines truncation. | -| Input | review | medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline | input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary | External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. | +| Typography | done | displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom | typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display | Text display system. Thin MUI wrapper with maxLines truncation. | +| Input | done | medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline | input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary | External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. | | Badge | review | soft, filled × default, brand, success, warning, error, info × small, medium + icon | badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 | Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. | | Icon | planned | various sizes | | Icon wrapper component | | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 353207b..1b9a365 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -377,6 +377,40 @@ Each entry follows this structure: - Brand soft colours match Button soft (brand.200 bg, brand.700 text) for visual consistency **Next steps:** -- User to review Badge in Storybook -- Build Chip atom next (interactive variant of badge — clickable, deletable) -- Begin PriceCard molecule once Badge and Card are both approved +- ~~User to review Badge in Storybook~~ ✓ Approved (large size added) + +### Session 2026-03-25i — Impeccable integration + +**Agent(s):** Claude Opus (via conversation) + +**Work completed:** +- Researched pbakaus/impeccable (Apache 2.0) — 21 skills for frontend design quality +- Assessed fit for FA project — identified overlaps/conflicts, recommended selective integration +- Downloaded 14 reference files to `docs/reference/impeccable/`: + - 7 design guides (typography, colour, spatial, motion, interaction, responsive, ux-writing) + - 3 critique references (cognitive-load, heuristics-scoring, personas) + - 4 skill references (audit, critique, polish, frontend-design anti-patterns) +- Created `/audit` skill — technical quality scoring (0-20) across 5 dimensions, adapted for FA +- Created `/critique` skill — UX review using Nielsen's 10 heuristics (0-40), with FA-specific persona checks +- Updated `/review-component` — added interactive states checklist (8 checks) and design anti-patterns checklist (8 checks) +- Updated `/preflight` — added visual QA spot-check section (advisory, non-blocking) +- All changes are skill/docs only — zero code changes to existing components + +**Decisions made:** +- Selective integration over wholesale install — only /audit, /critique, reference material, and anti-patterns merged +- Removed impeccable's dependency chain (/frontend-design → /teach-impeccable) — FA already has CLAUDE.md + docs/memory/ for design context +- Replaced impeccable's command recommendations with FA's available skills +- Critique adapted with FA-specific personas (bereaved family member, arrangement planner) +- OKLCH recommendation noted in reference but not adopted — FA uses hex-based DTCG tokens + +**Component status at end of session:** +- **Done (5):** Button, Typography, Input, Card, Badge +- **Planned (5 atoms):** IconButton, Icon, Avatar, Divider, Chip, Link +- **Planned (5 molecules):** FormField, PriceCard, ServiceOption, SearchBar, StepIndicator +- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer + +**Next steps:** +- Review Badge in Storybook (large size was added per user request) +- Build Chip atom (interactive tags — clickable, deletable, with icon support) +- Consider running /audit or /critique on completed atoms to establish baseline scores +- Begin PriceCard molecule once Chip is done (depends on Card + Badge + Typography + Button)