Downloaded from vercel-labs/agent-skills — 3500+ lines of React/Next.js
performance optimization rules with code examples. Referenced by /review-component.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Formatting-only changes across all component and story files.
No logic or behaviour changes — only whitespace, line breaks, and trailing commas.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Section labels use text.secondary instead of brand-800
- Rename "Current Status" → "How Can We Help" (warmer, less programmatic)
- Revise copy: "A recent loss or one expected soon" (clarifies imminent vs pre-plan)
- Pre-planning: "Planning ahead for yourself or a loved one"
- Default selection: Immediate Need selected on load
- Fix spacing: remove minHeight from error containers so gap is consistent
- Add divider between location section and CTA
- Mobile: status cards already stack (xs: 1fr)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Container: opaque white (surface.raised), standard card shadow/radius
- Status cards: white bg + neutral border, brand border + warm bg when selected
- Fields: white bg, neutral-200 border, brand border on focus, no focus ring
- CTA: standard Button contained, no custom shadows
- Keep: overline labels in brand-800, layout structure, form logic, a11y
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Two side-by-side StatusCards (Immediate Need / Pre-planning) with warm fills
- Glassmorphism container (backdrop-blur, semi-transparent white, deep shadow)
- Overline section labels, warm tonal field backgrounds (brand-100, no border)
- Funeral type Select + location Input with pin icon, no focus ring per design
- CTA always active — validates on click, scrolls to first missing field
- WAI-ARIA roving tabindex on radiogroup, aria-labelledby via useId()
- Semantic tokens throughout (border-brand, surface-warm, text-brand, etc.)
- Critique: 33/40 (Good), Audit: 18/20 (Excellent)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- StepCircle gets `active` prop — brand-500 fill with white number (used on step 1)
- Input in step 4 now matches selectSx: bgcolor, disabled (opacity + dashed),
error border, hover, focus — all consistent with steps 1-3
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Step flow, state management, conditional logic map
- Smart defaults and CTA submit behaviour
- Props reference and sub-component index
- Guide for adding new steps
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Extend one-question-at-a-time pattern through all steps (type, service, location)
- CTA + location always visible at bottom; smart defaults for missing optional fields
- Minimum search requirements: intent + location; type/service/themes default to "all"
- Funeral types: Cremation, Burial, Water Burial (QLD only) + Explore All as TypeCard
- Service preference step (conditional): With a service / No service / I'm flexible
- Theme preferences (eco-friendly, budget-friendly, religious specialisation) as optional
sub-option within type step
- StepHeading sub-component: bodyLg centered, distinct from card labels
- CompletedRows: generous py:1.5 spacing, caption-size "Change" with aria-label
- Loading prop on CTA button, location validation (3+ chars)
- Divider under subheading for visual structure
- Main heading upgraded to h2 with display font
- Audit: 14/20 (Good), Critique: 29/40 (Good)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Complete rewrite of the interaction model:
Before: numbered steps + uppercase overline labels + cramped option cards
→ felt like a government form, not gentle guidance
After: conversational questions with generous choice cards
→ "How can we help you today?" not "1. I'M HERE TO"
Key changes:
- Questions as warm sentences, not uppercase labels
- ChoiceCards: generous padding (20px × 16px), descriptions explaining
each option, check icon on selection
- TypePills: pill-shaped buttons with proper touch targets for funeral types
- CompletedRow: "I'm here to: **Arrange a funeral now** · Change"
— explicit, accessible, no hidden pencil icon
- Only shows one question at a time — true progressive disclosure
- CTA only appears once location step is reached
- No step numbers, no badges — the vertical flow IS the progression
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mt/pt bumped from 1.5 (12px) to 2 (16px), add pb: 0.5 (4px) so
the text sits more centred between the border-top and the content below.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
PackageDetail:
- Warm header band (surface.warm) with "Package" overline, h3 name,
h5 price in brand colour — creates distinct decision zone
- Section headings bumped to h6 (16px/600) — clear hierarchy vs
LineItem body2 (14px/500)
- Divider + subtext before Extras: "These items can be added to your
package at additional cost"
- Top padding increased, content padding increased (py: 3)
- Remove redundant textTransform/letterSpacing on overline (P2 fix)
LineItem:
- Item gap increased in PackageContents story (12px → 16px)
Audit: 19/20 (Excellent). 0 P0, 0 P1.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- LineItem: add aria-label to info icon for screen readers (P1)
- PackageDetail: stack CTA buttons vertically on narrow screens (P2)
- PackageDetail: section headings use component="h3" for hierarchy (P2)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
LineItem (molecule):
- Name + optional info tooltip + optional price
- Allowance asterisk, total variant (bold + top border)
- Reusable for package contents, order summaries, invoices
ProviderCardCompact (molecule):
- Horizontal layout: image left, name + location + rating right
- Used at top of Package Select page to show selected provider
PackageDetail (organism):
- Right-side detail panel for Package Select page
- Name/price header, Make Arrangement + Compare CTAs
- Grouped LineItem sections, total row, T&C footer
- PackageSelectPage story: full page with filter chips, package
list (ServiceOption), sticky detail panel, and Navigation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- ArrangementForm reverted to planned — need more building blocks first
- Footer: extract shared overline + contact link sx, use overlineSm variant
- Footer: remove hardcoded fontSize/fontWeight on contact links
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Footer:
- Dark espresso (brand.950) bg, inverse white text
- Logo, tagline, contact (phone/email), link group columns, legal bar
- Semantic HTML: <footer>, <nav> per group, <ul> for lists
- Critique 38/40, P2 fixes applied (legal link size, nav landmarks)
ServiceSelector:
- Single-select panel for arrangement flow
- Composes ServiceOption × n + Typography + Button (radiogroup)
- Auto-disables continue when nothing selected
- 7 stories incl. InArrangementFlow with StepIndicator
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Promote all 11 atoms, 6 molecules, 1 organism from review → done
- Navigation: grey bg (surface.subtle), real FA logo SVGs, add Provider Portal
- Navigation: remove mobileTrailing prop and MobilePriceTracker story
- Add staticDirs to Storybook config for brand assets
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
AddOnOption:
- Move price to its own row below heading (was squeezed between name and switch)
- Switch pins to top-right with alignItems: flex-start
- Long headings now wrap cleanly without layout pressure
Both AddOnOption + ServiceOption:
- Add optional maxDescriptionLines prop for CSS line-clamp truncation
- "View more" / "View less" toggle appears only when text is actually truncated
- Omit prop for no limit (default, backwards compatible)
- stopPropagation on toggle so clicking it doesn't trigger card selection
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Explicit button height via input token CSS vars for pixel-perfect alignment
- Reduced InputAdornment start margin (mr: 0.5) to bring search icon closer to text
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Maps to Figma Main Nav (14:108) desktop + Mobile Header (2391:41508)
- Desktop: logo left, nav links right, optional CTA button
- Mobile: hamburger + drawer with nav items, CTA, and help footer
- Sticky header with warm surface background and border
- Composes AppBar, Link, IconButton, Button, Divider, Drawer
- 6 stories: Default, WithCTA, WithPageContent (sticky scroll demo),
Minimal, ExtendedNavigation, MobilePriceTracker
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- component-registry: 3 atoms moved from planned → review
- session-log: Session 25n continued — atoms batch build
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Logo: circle → 64px rounded rectangle (8px radius), positioned fully
inside image area with white border + shadow
- Footer removed — redundant since whole card is clickable and price
is already in content area
- Price: split "Packages from" (body2) + price (h6/500wt) for lighter
ecommerce feel, replaces blocky labelLg/700
- Verified badge bumped to medium size for visibility
- Capability badge: medium size, trailing info icon + capabilityDescription
tooltip prop for plain-language definitions on hover
- Unverified cards: 3px top accent bar, list on neutral.50 background
- Caption/CaptionSm weight: 400 → 500 system-wide (extends D019)
- Meta row: body2 → caption size for clearer tertiary hierarchy
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
User feedback:
- "Trusted Partner" → "Verified" badge text
- Override Card hover bg fill (grey blended with shadow) — shadow lift only
- Logo 48px → 56px, removed white border (shadow only)
- Tightened spacing: content padding 16→12px, gap 8→4px, footer py 12→8px
/critique findings (27/40 → fixes applied):
- P1: Price promoted from footer into content area as bold primary text
- P2: Footer simplified to "View packages >" CTA with space-between
- Image fallback changed from grey to warm brand.50
- Name truncation relaxed to maxLines={2} for mobile
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
