Ammended email template

When hovering a constellation node, skill pill, or timeline item,
non-related UI elements across all components dim to 0.25 opacity,
creating a focused visual relationship view. The constellation axis
and year labels also dim via CSS class. Respects reduced-motion.

.agent/skills/bencium-innovative-ux-designer/ACCESSIBILITY.md

@@ -1,111 +0,0 @@
-# Accessibility Essentials
-
-Accessibility enables creativity - it's a foundation, not a limitation. WCAG 2.1 AA compliance.
-
-## Core Principles (POUR)
-
-- **Perceivable**: Content must be perceivable (alt text, contrast, captions)
-- **Operable**: UI must be keyboard/touch accessible
-- **Understandable**: Clear, predictable behavior
-- **Robust**: Works with assistive technologies
-
-## Contrast Requirements
-
-| Element | Minimum Ratio |
-|---------|---------------|
-| Normal text | 4.5:1 |
-| Large text (18pt+) | 3:1 |
-| UI components | 3:1 |
-
-**Tools**: Chrome DevTools Accessibility tab, WebAIM Contrast Checker
-
-## Keyboard Navigation
-
-```tsx
-// All interactive elements need focus states
-<button className="focus:ring-4 focus:ring-blue-500 focus:outline-none">
-  Accessible
-</button>
-
-// Custom elements need tabindex and key handlers
-<div
-  role="button"
-  tabIndex={0}
-  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleClick()}
->
-  Custom Button
-</div>
-```
-
-**Essentials:**
-- Tab through entire interface
-- Enter/Space activates elements
-- Escape closes modals
-- Visible focus indicators always
-
-## Essential ARIA
-
-```tsx
-// Buttons without text
-<button aria-label="Close dialog"><X /></button>
-
-// Expandable elements
-<button aria-expanded={isOpen} aria-controls="menu">Menu</button>
-
-// Live regions for dynamic content
-<div role="status" aria-live="polite">{statusMessage}</div>
-<div role="alert" aria-live="assertive">{errorMessage}</div>
-
-// Form errors
-<input aria-invalid={hasError} aria-describedby="error-msg" />
-{hasError && <p id="error-msg" role="alert">Error text</p>}
-```
-
-## Semantic HTML
-
-```tsx
-// Use semantic elements, not divs
-<header><nav>...</nav></header>
-<main><article><h1>...</h1></article></main>
-<footer>...</footer>
-
-// Heading hierarchy (never skip levels)
-<h1>Page Title</h1>
-  <h2>Section</h2>
-    <h3>Subsection</h3>
-```
-
-## Touch Targets
-
-- Minimum **44x44px** for all interactive elements
-- Adequate spacing between targets
-- `touch-manipulation` CSS for responsive touch
-
-## Screen Reader Content
-
-```tsx
-// Hidden but announced
-<span className="sr-only">Additional context</span>
-
-// Skip link
-<a href="#main" className="sr-only focus:not-sr-only">
-  Skip to main content
-</a>
-```
-
-## Quick Checklist
-
-- [ ] Keyboard: Can tab through everything
-- [ ] Focus: Visible focus indicators
-- [ ] Contrast: 4.5:1 for text
-- [ ] Alt text: All images have appropriate alt
-- [ ] Headings: Logical h1-h6 hierarchy
-- [ ] Forms: Labels associated with inputs
-- [ ] Errors: Announced to screen readers
-- [ ] Touch: 44px minimum targets
-
-## Resources
-
-- [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
-- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)

.agent/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md

@@ -1,577 +0,0 @@
-# Design System Template
-
-Meta-framework for understanding what's fixed, project-specific, and adaptable in your design system.
-
-## Purpose
-
-This template helps you distinguish between:
-- **Fixed Elements**: Universal rules that never change
-- **Project-Specific Elements**: Filled in for each project based on brand
-- **Adaptable Elements**: Context-dependent implementations
-
----
-
-## I. FIXED ELEMENTS
-
-These foundations remain consistent across all projects, regardless of brand or context.
-
-### 1. Spacing Scale
-
-**Fixed System:**
-```
-4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
-```
-
-**Usage:**
-- Margins, padding, gaps between elements
-- Mathematical relationships ensure visual harmony
-- Use multipliers of base unit (4px)
-
-**Why Fixed:**
-Consistent spacing creates visual rhythm regardless of brand personality.
-
-### 2. Grid System
-
-**Fixed Structure:**
-- **12-column grid** for most layouts (divisible by 2, 3, 4, 6)
-- **16-column grid** for data-heavy interfaces
-- **Gutters**: 16px (mobile), 24px (tablet), 32px (desktop)
-
-**Why Fixed:**
-Grid provides structural order. Brand personality shows through color, typography, content—not grid structure.
-
-### 3. Accessibility Standards
-
-**Fixed Requirements:**
-- **WCAG 2.1 AA** compliance minimum
-- **Contrast**: 4.5:1 for normal text, 3:1 for large text
-- **Touch targets**: Minimum 44×44px
-- **Keyboard navigation**: All interactive elements accessible
-- **Screen reader**: Semantic HTML, ARIA labels where needed
-
-**Why Fixed:**
-Accessibility is not negotiable. It's a baseline requirement for ethical, legal, and usable products.
-
-### 4. Typography Hierarchy Logic
-
-**Fixed Structure:**
-- **Mathematical scaling**: 1.25x (major third) or 1.333x (perfect fourth)
-- **Hierarchy levels**: Display → H1 → H2 → H3 → Body → Small → Caption
-- **Line height**: 1.5x for body text, 1.2-1.3x for headlines
-- **Line length**: 45-75 characters optimal
-
-**Why Fixed:**
-Mathematical relationships create predictable, harmonious hierarchy. Specific fonts change, but the logic doesn't.
-
-### 5. Component Architecture
-
-**Fixed Patterns:**
-- **Button states**: Default, Hover, Active, Focus, Disabled
-- **Form structure**: Label above input, error below, helper text optional
-- **Modal pattern**: Overlay + centered content + close mechanism
-- **Card structure**: Container → Header → Body → Footer (optional)
-
-**Why Fixed:**
-Users expect consistent component behavior. Architecture is fixed; appearance is project-specific.
-
-### 6. Animation Timing Framework
-
-**Fixed Physics Profiles:**
-- **Lightweight** (icons, chips): 150ms
-- **Standard** (cards, panels): 300ms
-- **Weighty** (modals, pages): 500ms
-
-**Fixed Easing:**
-- **Ease-out**: Entrances (fast start, slow end)
-- **Ease-in**: Exits (slow start, fast end)
-- **Ease-in-out**: Transitions (smooth both ends)
-
-**Why Fixed:**
-Natural physics feel consistent across brands. Duration and easing create that feeling.
-
----
-
-## II. PROJECT-SPECIFIC ELEMENTS
-
-Fill in these for each project based on brand personality and purpose.
-
-### 1. Brand Color System
-
-**Template Structure:**
-
-```
-NEUTRALS (4-5 colors):
-- Background lightest: _______ (e.g., slate-50 or warm-white)
-- Surface: _______ (e.g., slate-100)
-- Border/divider: _______ (e.g., slate-300)
-- Text secondary: _______ (e.g., slate-600)
-- Text primary: _______ (e.g., slate-900)
-
-ACCENTS (1-3 colors):
-- Primary (main CTA): _______ (e.g., teal-500)
-- Secondary (alternative action): _______ (optional)
-- Status colors:
-  - Success: _______ (green-ish)
-  - Warning: _______ (amber-ish)
-  - Error: _______ (red-ish)
-  - Info: _______ (blue-ish)
-```
-
-**Questions to Answer:**
-- What emotion should the brand evoke? (Trust, excitement, calm, urgency)
-- Warm or cool neutrals?
-- Conservative or bold accents?
-
-**Examples:**
-
-**Project A: Fintech App**
-```
-Neutrals: Cool greys (slate-50 → slate-900)
-Primary: Deep blue (#0A2463) – trust, professionalism
-Success: Muted green (#10B981)
-Why: Financial products need trust, not playfulness
-```
-
-**Project B: Creative Community**
-```
-Neutrals: Warm greys with beige undertones
-Primary: Coral (#FF6B6B) – energy, creativity
-Success: Teal (#06D6A0) – fresh, unexpected
-Why: Creative spaces should feel inviting, not corporate
-```
-
-**Project C: Healthcare Platform**
-```
-Neutrals: Pure greys (minimal color temperature)
-Primary: Soft blue (#4A90E2) – calm, clinical
-Success: Medical green (#38A169)
-Why: Healthcare needs clarity and calm, not distraction
-```
-
-### 2. Typography Pairing
-
-**Template:**
-
-```
-HEADLINE FONT: _______
-- Weight: _______ (e.g., Bold 700)
-- Use case: H1, H2, display text
-- Personality: _______ (geometric/humanist/serif/etc.)
-
-BODY FONT: _______
-- Weight: _______ (e.g., Regular 400, Medium 500)
-- Use case: Paragraphs, UI text
-- Personality: _______ (neutral/readable/efficient)
-
-OPTIONAL ACCENT FONT: _______
-- Weight: _______
-- Use case: _______ (special headlines, callouts)
-```
-
-**Pairing Logic:**
-- Serif + Sans-serif (classic, editorial)
-- Geometric + Humanist (modern + warm)
-- Display + System (distinctive + efficient)
-
-**Examples:**
-
-**Project A: Editorial Platform**
-```
-Headline: Playfair Display (Serif, Bold 700)
-Body: Inter (Sans-serif, Regular 400)
-Why: Serif headlines = trustworthy, editorial feel
-```
-
-**Project B: Tech Startup**
-```
-Headline: DM Sans (Sans-serif, Bold 700)
-Body: DM Sans (Regular 400, Medium 500)
-Why: Single-font system = modern, efficient, cohesive
-```
-
-**Project C: Luxury Brand**
-```
-Headline: Cormorant Garamond (Serif, Light 300)
-Body: Lato (Sans-serif, Regular 400)
-Why: Elegant serif + readable sans = sophisticated
-```
-
-### 3. Tone of Voice
-
-**Template:**
-
-```
-BRAND PERSONALITY:
-- Formal ↔ Casual: _______ (1-10 scale)
-- Professional ↔ Friendly: _______ (1-10 scale)
-- Serious ↔ Playful: _______ (1-10 scale)
-- Authoritative ↔ Conversational: _______ (1-10 scale)
-
-MICROCOPY EXAMPLES:
-- Button label (submit form): _______
-- Error message (invalid email): _______
-- Success message (saved): _______
-- Empty state: _______
-
-ANIMATION PERSONALITY:
-- Speed: _______ (quick/moderate/slow)
-- Feel: _______ (precise/smooth/bouncy)
-```
-
-**Examples:**
-
-**Project A: Banking App**
-```
-Personality: Formal (8), Professional (9), Serious (8)
-Button: "Submit Application"
-Error: "Email address format is invalid"
-Success: "Application submitted successfully"
-Animation: Quick (precise, efficient, no-nonsense)
-```
-
-**Project B: Social App**
-```
-Personality: Casual (8), Friendly (9), Playful (7)
-Button: "Let's go!"
-Error: "Hmm, that email doesn't look right"
-Success: "Nice! You're all set 🎉"
-Animation: Moderate (smooth, friendly bounce)
-```
-
-### 4. Animation Speed & Feel
-
-**Template:**
-
-```
-SPEED PREFERENCE:
-- UI interactions: _______ (100-150ms / 150-200ms / 200-300ms)
-- State changes: _______ (200ms / 300ms / 400ms)
-- Page transitions: _______ (300ms / 500ms / 700ms)
-
-ANIMATION STYLE:
-- Easing preference: _______ (sharp / standard / bouncy)
-- Movement type: _______ (minimal / smooth / expressive)
-```
-
-**Examples:**
-
-**Project A: Trading Platform**
-```
-Speed: Fast (100ms UI, 200ms states, 300ms pages)
-Style: Sharp easing, minimal movement
-Why: Traders need speed, not distraction
-```
-
-**Project B: Wellness App**
-```
-Speed: Slow (200ms UI, 400ms states, 500ms pages)
-Style: Smooth easing, gentle movement
-Why: Calm, relaxing experience matches brand
-```
-
----
-
-## III. ADAPTABLE ELEMENTS
-
-Context-dependent implementations that vary based on use case.
-
-### 1. Component Variations
-
-**Button Variants:**
-- **Primary**: Full background color (high emphasis)
-- **Secondary**: Outline only (medium emphasis)
-- **Tertiary**: Text only (low emphasis)
-- **Destructive**: Red-ish (danger actions)
-- **Ghost**: Minimal (navigation, toolbars)
-
-**Adaptation Rules:**
-- Primary: Main CTA, one per screen section
-- Secondary: Alternative actions
-- Tertiary: Less important actions, multiple allowed
-- Use brand colors, but hierarchy logic is fixed
-
-### 2. Responsive Breakpoints
-
-**Fixed Ranges:**
-- XS: 0-479px (small phones)
-- SM: 480-767px (large phones)
-- MD: 768-1023px (tablets)
-- LG: 1024-1439px (laptops)
-- XL: 1440px+ (desktop)
-
-**Adaptable Implementations:**
-
-**Simple Content Site:**
-```
-XS-SM: Single column
-MD: 2 columns
-LG-XL: 3 columns max
-Why: Content-focused, don't overwhelm
-```
-
-**Dashboard/Data App:**
-```
-XS: Collapsed, cards stack
-SM: Simplified sidebar
-MD: Full sidebar + main content
-LG-XL: Sidebar + main + right panel
-Why: Data apps need more screen real estate
-```
-
-### 3. Dark Mode Palette
-
-**Adaptation Strategy:**
-
-Not a simple inversion. Dark mode needs adjusted contrast:
-
-**Light Mode:**
-```
-Background: #FFFFFF (white)
-Text: #0F172A (slate-900) → 21:1 contrast
-```
-
-**Dark Mode (Adapted):**
-```
-Background: #0F172A (slate-900)
-Text: #E2E8F0 (slate-200) → 15.8:1 contrast (still AA, but softer)
-```
-
-**Why Adapt:**
-Pure white on pure black is too harsh. Dark mode needs slightly lower contrast for eye comfort.
-
-### 4. Loading States
-
-**Context-Dependent:**
-
-**Fast operations (<500ms):**
-- No loading indicator (feels instant)
-
-**Medium operations (500ms-2s):**
-- Spinner or skeleton screen
-
-**Long operations (>2s):**
-- Progress bar with percentage
-- Or: Skeleton + estimated time
-
-**Interactive Operations:**
-- Button shows spinner inside (don't disable, show state)
-
-### 5. Error Handling Strategy
-
-**Context-Dependent:**
-
-**Form Errors:**
-```
-Validate: On blur (after user leaves field)
-Display: Inline below field
-Recovery: Clear error on fix
-```
-
-**API Errors:**
-```
-Transient (network): Show retry button
-Permanent (404): Show helpful message + next steps
-Critical (500): Contact support option
-```
-
-**Data Errors:**
-```
-Missing: Show empty state with action
-Corrupt: Show error boundary with reload
-Invalid: Highlight + explain what's wrong
-```
-
----
-
-## DECISION TREE
-
-When implementing a feature, ask:
-
-### Is this...
-
-**FIXED?**
-- Does it affect structure, accessibility, or universal UX?
-- Examples: Spacing scale, grid, contrast ratios, component architecture
-- **Action**: Use the fixed system, no variation
-
-**PROJECT-SPECIFIC?**
-- Does it express brand personality or purpose?
-- Examples: Colors, typography, tone of voice, animation feel
-- **Action**: Fill in the template for this project
-
-**ADAPTABLE?**
-- Does it depend on context, content, or use case?
-- Examples: Component variants, responsive behavior, error handling
-- **Action**: Choose appropriate variation based on context
-
----
-
-## EXAMPLE: Implementing a "Submit" Button
-
-### Fixed Elements (Always the same):
-- Touch target: 44px minimum height
-- Padding: 16px horizontal (from spacing scale)
-- States: Default, Hover, Active, Focus, Disabled
-- Animation: 150ms ease-out (lightweight profile)
-
-### Project-Specific (Filled per project):
-- **Project A (Bank)**: Dark blue background, white text, "Submit Application"
-- **Project B (Social)**: Coral background, white text, "Let's Go!"
-- **Project C (Healthcare)**: Soft blue background, white text, "Continue"
-
-### Adaptable (Context-dependent):
-- **Form context**: Primary button (full color)
-- **Toolbar context**: Ghost button (text only)
-- **Danger context**: Destructive variant (red-ish)
-
----
-
-## VALIDATION CHECKLIST
-
-Before finalizing a design, check:
-
-### Fixed Elements
-- [ ] Uses spacing scale (4/8/12/16/24/32/48/64/96px)
-- [ ] Follows grid system (12 or 16 columns)
-- [ ] Meets WCAG AA contrast (4.5:1 normal, 3:1 large)
-- [ ] Touch targets ≥ 44px
-- [ ] Typography follows mathematical scale
-- [ ] Components follow standard architecture
-
-### Project-Specific Elements
-- [ ] Brand colors filled in and intentional
-- [ ] Typography pairing chosen and justified
-- [ ] Tone of voice defined and consistent
-- [ ] Animation speed matches brand personality
-
-### Adaptable Elements
-- [ ] Component variants appropriate for context
-- [ ] Responsive behavior fits content type
-- [ ] Loading states match operation duration
-- [ ] Error handling fits error type
-
----
-
-## PROJECT KICKOFF TEMPLATE
-
-Use this to start a new project:
-
-```
-PROJECT NAME: _______________________
-PURPOSE: ____________________________
-
-BRAND PERSONALITY:
-- Primary emotion: _______
-- Warm or cool: _______
-- Formal or casual: _______
-- Conservative or bold: _______
-
-COLORS (fill the template):
-- Neutral base: _______
-- Primary accent: _______
-- Status colors: _______ / _______ / _______
-
-TYPOGRAPHY (fill the template):
-- Headline font: _______
-- Body font: _______
-- Pairing rationale: _______
-
-TONE:
-- Button labels style: _______
-- Error message style: _______
-- Success message style: _______
-
-ANIMATION:
-- Speed preference: _______ (fast/moderate/slow)
-- Feel preference: _______ (sharp/smooth/bouncy)
-
-TARGET DEVICES:
-- Primary: _______ (mobile/desktop/both)
-- Secondary: _______
-```
-
----
-
-## MAINTAINING CONSISTENCY
-
-### Documentation
-- Keep this template updated as system evolves
-- Document WHY choices were made, not just WHAT
-
-### Communication
-- Share with designers: "Here's what varies vs. what's fixed"
-- Share with developers: "Here are the design tokens"
-
-### Tooling
-- Use CSS variables for project-specific values
-- Use Tailwind config for spacing scale
-- Use design tokens in Figma/Storybook
-
-### Reviews
-- Audit: Does new work follow fixed elements?
-- Validate: Are project-specific elements intentional?
-- Question: Are adaptations justified by context?
-
----
-
-## EXAMPLES OF COMPLETE SYSTEMS
-
-### System A: B2B SaaS (Conservative)
-
-**Fixed**: Standard spacing, 12-col grid, WCAG AA, major third type scale
-**Project-Specific**:
-- Colors: Cool greys + corporate blue
-- Typography: DM Sans (headlines + body)
-- Tone: Professional, formal
-- Animation: Quick, precise (150ms)
-**Adaptable**:
-- Dashboard gets multi-panel layout
-- Forms are extensive (use progressive disclosure)
-- Errors show detailed technical info
-
-### System B: Consumer Social App (Playful)
-
-**Fixed**: Same spacing/grid/accessibility/type logic
-**Project-Specific**:
-- Colors: Warm greys + vibrant coral
-- Typography: Poppins (headlines) + Inter (body)
-- Tone: Casual, friendly, playful
-- Animation: Moderate, bouncy (200ms)
-**Adaptable**:
-- Mobile-first (most users on phones)
-- Forms are minimal (progressive profiling)
-- Errors are friendly, not technical
-
-### System C: Healthcare Platform (Clinical)
-
-**Fixed**: Same foundational structure
-**Project-Specific**:
-- Colors: Pure greys + medical blue
-- Typography: System fonts (SF Pro / Segoe)
-- Tone: Clear, authoritative, calm
-- Animation: Slow, smooth (300ms)
-**Adaptable**:
-- Desktop-first (clinical use at workstations)
-- Forms are complex (HIPAA compliance)
-- Errors are precise with next steps
-
----
-
-## KEY TAKEAWAY
-
-**The system flexibility framework lets you:**
-- Maintain consistency (fixed elements)
-- Express brand personality (project-specific)
-- Adapt to context (adaptable elements)
-
-**Without this framework:**
-- Designers reinvent spacing every project
-- Components feel inconsistent across products
-- Brand personality overrides accessibility
-- Context-blind implementations feel wrong
-
-**With this framework:**
-- Speed: Start from proven foundations
-- Consistency: Fixed elements guarantee it
-- Flexibility: Express unique brand identity
-- Context: Adapt without breaking system

.agent/skills/bencium-innovative-ux-designer/MOTION-SPEC.md

@@ -1,72 +0,0 @@
-# Motion Specification
-
-Motion should surprise and delight while serving function. Animation is a creative tool.
-
-## Easing Curves
-
-| Easing | CSS | Use For |
-|--------|-----|---------|
-| **Ease-out** | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Entrances, appearing |
-| **Ease-in** | `cubic-bezier(0.4, 0.0, 1, 1)` | Exits, disappearing |
-| **Ease-in-out** | `cubic-bezier(0.4, 0.0, 0.2, 1)` | State changes, transforms |
-| **Spring** | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` | Playful, attention-grabbing |
-| **Linear** | `linear` | Spinners, continuous loops |
-
-## Duration by Element Weight
-
-| Weight | Duration | Examples |
-|--------|----------|----------|
-| **Lightweight** | 150ms | Icons, badges, chips |
-| **Standard** | 300ms | Cards, panels, list items |
-| **Weighty** | 500ms | Modals, page transitions |
-
-## Duration by Interaction
-
-| Interaction | Duration |
-|-------------|----------|
-| Button press | 100ms |
-| Hover state | 150ms |
-| Tooltip appear | 200ms |
-| Tab switch | 250ms |
-| Modal open | 300ms |
-| Page transition | 400ms |
-
-## Common Patterns
-
-```tsx
-// Hover transition (CSS)
-<button className="transition-colors duration-150 ease-out hover:bg-blue-700">
-
-// Fade + slide (Framer Motion)
-<motion.div
-  initial={{ opacity: 0, y: 20 }}
-  animate={{ opacity: 1, y: 0 }}
-  transition={{ duration: 0.3, ease: "easeOut" }}
-/>
-
-// Stagger children
-<motion.ul variants={{ visible: { transition: { staggerChildren: 0.1 } } }}>
-  <motion.li variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} />
-</motion.ul>
-```
-
-## Performance Rules
-
-- Only animate `transform` and `opacity` (GPU-accelerated)
-- Avoid animating `width`, `height`, `margin`, `padding`
-- Keep durations under 500ms for UI interactions
-- Respect `prefers-reduced-motion`:
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-```
-
-## Resources
-
-- [Framer Motion](https://www.framer.com/motion/)
-- [CSS Easing Functions](https://easings.net/)

.agent/skills/bencium-innovative-ux-designer/RESPONSIVE-DESIGN.md

@@ -1,90 +0,0 @@
-# Responsive Design Essentials
-
-Mobile-first approach: start with mobile, progressively enhance for larger screens.
-
-## Breakpoints
-
-| Range | Pixels | Devices | Strategy |
-|-------|--------|---------|----------|
-| **XS** | 0-479px | Small phones | Single column, stacked nav, 44px touch targets |
-| **SM** | 480-767px | Large phones | Single column, bottom nav, simplified UI |
-| **MD** | 768-1023px | Tablets | 2 columns possible, sidebar nav |
-| **LG** | 1024-1439px | Laptops | Multi-column, full nav, desktop UI |
-| **XL** | 1440px+ | Desktop | Max-width containers, multi-panel layouts |
-
-## Tailwind Responsive
-
-```tsx
-// Mobile-first: base styles, then scale up
-<div className="
-  w-full          // mobile: full width
-  sm:w-1/2        // 480px+: half
-  md:w-1/3        // 768px+: third
-  lg:w-1/4        // 1024px+: quarter
-">
-
-// Responsive grid
-<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-
-// Responsive typography
-<h1 className="text-3xl md:text-4xl lg:text-5xl">
-
-// Show/hide by breakpoint
-<div className="block md:hidden">Mobile only</div>
-<div className="hidden md:block">Desktop only</div>
-```
-
-## Fluid Typography
-
-```css
-h1 { font-size: clamp(2rem, 5vw, 4rem); }
-p { font-size: clamp(1rem, 2.5vw, 1.25rem); }
-```
-
-## Touch Targets
-
-- Minimum **44x44px** for all interactive elements
-- Use `touch-manipulation` to prevent 300ms tap delay
-- Adequate spacing between targets
-
-```tsx
-<button className="min-w-[44px] min-h-[44px] touch-manipulation">
-```
-
-## Mobile Simplification
-
-| Desktop | Mobile |
-|---------|--------|
-| Full nav bar | Hamburger menu |
-| Side-by-side fields | Stacked fields |
-| Multi-column grid | Single column |
-| Inline buttons | Fixed bottom bar |
-| Data table | Collapsed cards |
-| Visible sidebar | Hidden/collapsible |
-
-## Images
-
-```tsx
-// Responsive images
-<img
-  srcSet="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
-  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-  loading="lazy"
-/>
-
-// Next.js
-<Image src="/hero.jpg" width={1200} height={600} priority className="w-full h-auto" />
-```
-
-## Testing
-
-Test at these widths:
-- 375px (iPhone SE)
-- 390px (iPhone 14)
-- 768px (iPad)
-- 1024px (iPad Pro)
-- 1280px+ (Desktop)
-
-## Resources
-
-- [Tailwind Responsive](https://tailwindcss.com/docs/responsive-design)

.agent/skills/bencium-innovative-ux-designer/SKILL.md

@@ -1,718 +0,0 @@
----
-name: bencium-innovative-ux-designer
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-metadata:
-  version: 2.0.0
----
-
-# Innovative UX Designer
-
-Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
-
-This skill emphasizes **bold creative commitment**, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional and accessible.
-
-## Core Philosophy
-
-**CRITICAL: Design Thinking Protocol**
-
-Before coding, **ASK to understand context**, then **COMMIT BOLDLY** to a distinctive direction:
-
-### Questions to Ask First
-1. **Purpose**: What problem does this interface solve? Who uses it?
-2. **Tone**: What aesthetic extreme fits? (see Tone Options below)
-3. **Constraints**: Technical requirements (framework, performance, accessibility)?
-4. **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-### Tone Options (Pick an Extreme)
-Choose a clear aesthetic direction and execute with precision:
-- **Brutally minimal** - stripped to essence, bold typography, vast whitespace
-- **Maximalist chaos** - layered, dense, visually rich, controlled disorder
-- **Retro-futuristic** - vintage meets sci-fi, nostalgic tech aesthetics
-- **Organic/natural** - soft edges, earthy colors, nature-inspired textures
-- **Luxury/refined** - elegant spacing, premium typography, subtle details
-- **Playful/toy-like** - bright colors, rounded shapes, delightful interactions
-- **Editorial/magazine** - strong typography hierarchy, asymmetric layouts
-- **Brutalist/raw** - exposed structure, harsh contrasts, intentionally rough
-- **Art deco/geometric** - bold patterns, metallic accents, symmetric elegance
-- **Soft/pastel** - gentle gradients, muted tones, calming atmosphere
-- **Industrial/utilitarian** - functional, no-nonsense, mechanical precision
-
-### After Getting Context
-- **Commit fully** to the chosen direction - no half measures
-- Present 2-3 alternative approaches with trade-offs
-- Then implement with precision: production-grade, visually striking, memorable
-
-## Foundational Design Principles
-
-### Stand Out From Generic Patterns
-
-**NEVER Use These AI-Generated Aesthetics:**
-- **Fonts**: Inter, Roboto, Arial, system fonts as primary choice, Space Grotesk (overused by AI)
-- **Colors**: Generic SaaS blue (#3B82F6), purple gradients on white backgrounds
-- **Patterns**: Cookie-cutter layouts, predictable component arrangements
-- **Effects**: Glass morphism, Apple design mimicry, liquid/blob backgrounds
-- **Overall**: Anything that looks "Claude-generated" or machine-made
-
-**Instead, Create Atmosphere:**
-- Suggest photography, patterns, textures over flat solid colors
-- Apply gradient meshes, noise textures, geometric patterns
-- Use layered transparencies, dramatic shadows, decorative borders
-- Consider custom cursors, grain overlays, contextual effects
-- Think beyond typical patterns - you can step off the written path
-
-**Draw Inspiration From:**
-- Modern landing pages (Perplexity, Comet Browser, Dia Browser)
-- Framer templates and their innovative approaches
-- Leading brand design studios
-- Historical design movements (Bauhaus, Otl Aicher, Braun) - but as inspiration, not imitation
-- Beautiful background animations (CSS, SVG) - slow, looping, subtle
-
-**Visual Interest Strategies:**
-- Unique color pairs that aren't typical
-- Animation effects that feel fresh
-- Background patterns that add depth without distraction
-- Typography combinations that create contrast
-- Visual assets that tell a story
-
-### Core Design Philosophy
-
-1. **Simplicity Through Reduction**
-   - Identify the essential purpose and eliminate distractions
-   - Begin with complexity, then deliberately remove until reaching the simplest effective solution
-   - Every element must justify its existence
-
-2. **Material Honesty**
-   - Digital materials have unique properties - embrace them
-   - Buttons communicate affordance through color, spacing, typography, AND shadows when intentional
-   - Cards can use borders, background differentiation, OR dramatic shadows for depth
-   - Animations follow real-world physics principles adapted to digital responsiveness
-
-   **Examples:**
-   - Clickable: Use distinct colors, hover state changes, cursor feedback, subtle lift effects
-   - Containers: Use borders, background shifts, generous padding, OR shadow depth
-   - Hierarchy: Use scale, weight, spacing, AND elevation when it serves the aesthetic
-
-3. **Functional Layering**
-   - Create hierarchy through typography scale, color contrast, and spatial relationships
-   - Layer information conceptually (primary → secondary → tertiary)
-   - Use shadows and gradients INTENTIONALLY when they serve the aesthetic direction
-   - Embrace functional depth: modals over content, dropdowns over UI
-   - Avoid: glass morphism, Apple mimicry (but shadows/gradients are tools, not enemies)
-
-4. **Obsessive Detail**
-   - Consider every pixel, interaction, and transition
-   - Excellence emerges from hundreds of small, intentional decisions
-   - Balance: Details should serve simplicity, not complexity
-   - When detail conflicts with clarity, clarity wins
-
-5. **Coherent Design Language**
-   - Every element should visually communicate its function
-   - Elements should feel part of a unified system
-   - Nothing should feel arbitrary
-
-6. **Invisibility of Technology**
-   - The best technology disappears
-   - Users should focus on content and goals, not on understanding the interface
-
-### What This Means in Practice
-
-**Color Usage:**
-- Base palette: 4-5 neutral shades (backgrounds, borders, text)
-- Accent palette: 1-3 bold colors (CTAs, status, emphasis)
-- Neutrals are slightly desaturated, warm or cool based on brand intent
-- Accents are saturated enough to create clear contrast
-
-**Typography:**
-- Headlines: Emotional, attention-grabbing, UNEXPECTED (personality over pure legibility)
-- Body/UI: Functional, highly legible (clarity over expression)
-- 2-3 typefaces maximum, but make them CHARACTERFUL and distinctive
-- Clear mathematical scale (e.g., 1.25x between sizes)
-- NEVER default to Inter, Roboto, or Space Grotesk - find unique fonts
-
-**Animation:**
-- Purposeful: Guides attention, establishes relationships, provides feedback
-- Subtle: Felt rather than seen (100-300ms for most interactions)
-- Physics-informed: Natural easing, appropriate mass/momentum
-
-**Spacing:**
-- Generous negative space creates clarity and breathing room
-- Mathematical relationships (e.g., 4px base, 8/16/24/32/48px scale)
-- Consistent application creates visual rhythm
-
-### Design Decision Checklist
-
-Before presenting any design, verify:
-
-1. **Purpose**: Does every element serve a clear function?
-2. **Hierarchy**: Is visual importance aligned with content importance?
-3. **Consistency**: Do similar elements look and behave similarly?
-4. **Accessibility**: Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav)
-5. **Responsiveness**: Does it work on mobile, tablet, desktop?
-6. **Uniqueness**: Does this break from generic SaaS patterns?
-7. **Approval**: Have I asked before implementing colors, fonts, sizes, layouts?
-
-**Design System Framework:**
-
-For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, think of a design system.
-
-## Visual Design Standards
-
-### Color & Contrast
-
-**Color System Architecture:**
-
-Every interface needs two color roles:
-
-1. **Base/Neutral Palette (4-5 colors):**
-   - Backgrounds (lightest)
-   - Surface colors (cards, inputs)
-   - Borders and dividers
-   - Text (darkest)
-   - Use slightly desaturated, warm or cool greys based on brand
-
-2. **Accent Palette (1-3 colors):**
-   - Primary action (CTA buttons)
-   - Status indicators (success, warning, error, info)
-   - Focus/hover states
-   - Use saturated colors for clear contrast against neutrals
-
-**Palette Structure Example:**
-```
-Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
-Accents: teal-500 (primary), amber-500 (warning), red-500 (error)
-```
-
-**Color Application Rules:**
-
-- **Backgrounds**: Lightest neutral (slate-50 or white)
-- **Text**: Darkest neutral for primary text (slate-900), mid-tone for secondary (slate-600)
-- **Buttons (primary)**: Accent color with white text
-- **Buttons (secondary)**: Neutral with border and dark text
-- **Status indicators**: Specific accent (green=success, red=error, amber=warning, blue=info)
-- **Interactive states**:
-  - Hover: Darken by 10-15% or shift hue slightly
-  - Focus: Use ring/outline in accent color
-  - Disabled: Reduce opacity to 40-50% and remove hover effects
-
-**Color Relationships:**
-
-Choose warm or cool intentionally based on brand:
-- **Warm greys** (beige/brown undertones): Organic, approachable, trustworthy
-- **Cool greys** (blue undertones): Modern, tech-forward, professional
-
-Accent colors should have clear contrast with both:
-- Light backgrounds (for buttons on white)
-- Dark text (if used as backgrounds for white text)
-
-**Intentional Color Usage:**
-- Every color must serve a purpose (hierarchy, function, status, or action)
-- Avoid decorative colors that don't communicate meaning
-- Maintain consistency: same color = same meaning throughout
-
-**Accessibility:**
-- Ensure sufficient contrast for color-blind users
-- Follow WCAG 2.1 AA: minimum 4.5:1 for normal text, 3:1 for large text
-- Don't rely on color alone to convey information (add icons or labels)
-
-**Unique Color Strategy:**
-
-To stand out from generic patterns:
-- NEVER use default SaaS blue (#3B82F6) or purple gradients on white
-- Use unexpected neutrals: warm greys, soft off-whites, deep charcoals, rich blacks
-- Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate
-- Dominant colors with SHARP accents outperform timid, evenly-distributed palettes
-- Test combinations against "does this look AI-generated?" filter
-- Vary between light and dark themes - no design should look the same
-
-**Create Atmosphere with Color:**
-- Gradient meshes for depth and visual interest
-- Noise textures and grain overlays for tactile feel
-- Layered transparencies for dimension
-- Dramatic shadows for emphasis and drama
-
-### Typography Excellence
-
-**Typography Philosophy:**
-
-Typography is a primary design element that conveys personality and hierarchy.
-
-**Functional vs Emotional Typography:**
-- **Headlines/Display**: Prioritize emotion, personality, attention (legibility secondary)
-- **Body Text**: Prioritize legibility, reading comfort, accessibility
-- **UI/Labels**: Prioritize clarity, scannability, consistency
-
-**Font Selection:**
-- Use 2-3 typefaces maximum, but make them UNEXPECTED and characterful
-- Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700)
-- Prefer variable fonts for fine-tuned control and performance
-
-**NEVER Use These Fonts as Primary:**
-- Inter (overused by AI and generic SaaS)
-- Roboto (too generic)
-- Arial/Helvetica (default fallback vibes)
-- Space Grotesk (AI generation favorite)
-- System fonts as primary choice (only as fallback)
-
-**Font Version Usage:**
-- **Display version**: Headlines and hero text only - BE BOLD
-- **Text version**: Paragraphs and long-form content - legibility matters
-- **Caption/Micro**: Small UI labels (1-2 lines, non-critical info)
-
-**Find Distinctive Fonts:**
-- Google Fonts for web - but dig deeper than page 1
-- Type foundries for unique options
-- Choose fonts that serve your CHOSEN AESTHETIC DIRECTION
-- Pair distinctive display font with refined body font
-
-**Typographic Scale:**
-
-Use mathematical relationships for size hierarchy:
-- **Ratio**: Major third (1.25x) for moderate contrast, Perfect fourth (1.333x) for dramatic
-- **Base size**: 16px (1rem) for body text
-- **Example scale (1.25x)**:
-  ```
-  xs:   0.64rem (10px)
-  sm:   0.8rem  (13px)
-  base: 1rem    (16px)
-  lg:   1.25rem (20px)
-  xl:   1.563rem (25px)
-  2xl:  1.953rem (31px)
-  3xl:  2.441rem (39px)
-  4xl:  3.052rem (49px)
-  5xl:  3.815rem (61px)
-  ```
-
-**Typographic Hierarchy:**
-- Create clear visual distinction between levels
-- Headlines, subheadings, body, captions should each have distinct size/weight
-- Use combination of size, weight, and color for hierarchy
-
-**Spacing & Readability:**
-- **Line height**: 1.5x font size for body text (e.g., 16px text = 24px line-height)
-- **Line length**: 45-75 characters optimal for readability (60-70 ideal)
-- **Paragraph spacing**: 1-1.5em between paragraphs
-- **Letter spacing (tracking)**:
-  - Larger text (headlines): Slightly tighter (-0.02em to -0.05em)
-  - Normal text (body): Default (0)
-  - Small text (captions): Slightly looser (+0.01em to +0.03em)
-  - General rule: As size increases, reduce tracking; as size decreases, increase tracking
-
-**Font Pairing Logic:**
-
-When using multiple typefaces, create contrast through:
-- **Category contrast**: Serif + Sans-serif (classic, clear distinction)
-- **Weight contrast**: Light + Bold (dynamic, energetic)
-- **Personality contrast**: Geometric + Humanist (modern + warm)
-
-Examples:
-- Serif headlines + Sans body (editorial, trustworthy)
-- Display headlines + System body (distinctive + efficient)
-- Bold sans headlines + Light sans body (modern, clean)
-
-**UI Typography:**
-
-Specific guidance for interface elements:
-- **Button text**: Semi-Bold (600), 14-16px, consistent casing (all-caps OR title case)
-- **Form labels**: Regular (400), 14px, positioned above input
-- **Form input text**: Regular (400), 16px minimum (prevents iOS zoom on focus)
-- **Placeholder text**: Light (300) or desaturated color, same size as input
-- **Error messages**: Regular (400), 12-14px, color-coded (red-ish)
-
-**Responsive Typography:**
-
-Scale type sizes across breakpoints:
-```tsx
-// Example with Tailwind
-<h1 className="text-3xl md:text-4xl lg:text-5xl">
-  Responsive Headline
-</h1>
-
-// Or with CSS clamp (fluid)
-h1 {
-  font-size: clamp(2rem, 5vw, 4rem);
-}
-```
-
-Reduce sizes on mobile (20-30% smaller than desktop)
-Reduce hierarchy levels on small screens (fewer distinct sizes)
-
-### Layout & Spatial Design
-
-**Compositional Balance:**
-- Every screen should feel balanced
-- Pay attention to visual weight and negative space
-- Use generous negative space to focus attention
-- Add sufficient margins and paddings for professional, spacious look
-
-**Grid Discipline:**
-- Maintain consistent underlying grid system
-- Create sense of order while allowing meaningful exceptions
-- Use grid/flex wrappers with `gap` for spacing
-- Prioritize wrappers over direct margins/padding on children
-
-**Spatial Relationships:**
-- Group related elements through proximity, alignment, and shared attributes
-- Use size, color, and spacing to highlight important elements
-- Guide user focus through visual hierarchy
-
-**Attention Guidance:**
-- Design interfaces that guide user attention effectively
-- Avoid cluttered interfaces where elements compete
-- Create clear paths through the content
-
-## Interaction Design
-
-
-**Motion Specification:**
-
-For detailed motion specs, see MOTION-SPEC.md (easing curves, duration tables, state-specific animations, implementation patterns).
-
-### User Experience Patterns
-
-**Core UX Principles:**
-
-1. **Direct Manipulation**
-   - Users interact directly with content, not through abstract controls
-   - Examples:
-     - Drag & drop to reorder items (not up/down buttons)
-     - Inline editing (click to edit, not separate form)
-     - Sliders for ranges (not numeric input with +/-)
-     - Pinch/zoom gestures on mobile (not +/- buttons)
-
-2. **Immediate Feedback**
-   - Every interaction provides instantaneous visual feedback (within 100ms)
-   - Types of feedback:
-     - **Visual**: Button pressed state, hover effects, color changes
-     - **Haptic**: Vibration on mobile (submit, error, success)
-     - **Audio**: Subtle sounds for critical actions (optional, user-controlled)
-     - **Loading**: Skeleton screens, spinners for >300ms operations
-     - **Success**: Checkmarks, green highlights, toast notifications
-     - **Error**: Red highlights, inline error messages, shake animations
-
-3. **Consistent Behavior**
-   - Similar-looking elements behave similarly
-   - Examples:
-     - **Visual consistency**: All primary buttons have same colors, sizes, hover states
-     - **Behavioral consistency**: All modals close via X button, ESC key, and outside click
-     - **Interaction consistency**: All drag targets have same hover state and drop feedback
-     - **Pattern consistency**: All forms validate on blur and submit
-
-4. **Forgiveness**
-   - Make errors difficult, but recovery easy
-   - **Prevention strategies**:
-     - Disable invalid actions (grey out unavailable buttons)
-     - Validate inputs inline (before submission)
-     - Confirm destructive actions (delete, overwrite)
-     - Auto-save in background (drafts, progress)
-   - **Recovery strategies**:
-     - Undo/redo for all state changes
-     - Soft deletes (trash/archive before permanent delete)
-     - Clear error messages with actionable fixes
-     - Preserve user input on errors (don't clear forms)
-
-5. **Progressive Disclosure**
-   - Reveal details as needed rather than overwhelming users
-   - Levels of disclosure:
-     - **Summary**: Show essential info by default (card title, price, rating)
-     - **Details**: Expand to show more info (description, specs, reviews)
-     - **Advanced**: Hide complex options behind "Advanced settings" toggle
-   - Examples:
-     - Accordion: Start collapsed, expand on click
-     - Search filters: Show 3-5 common filters, hide rest behind "More filters"
-     - Settings: Basic settings visible, advanced behind "Show advanced"
-
-**Modern UX Patterns:**
-
-1. **Conversational Interfaces**
-
-   Prioritize natural language interaction where appropriate:
-
-   **Four types:**
-   - **Pure chat**: Full conversation (AI assistants, support bots)
-   - **Command palette**: Text-based shortcuts (Cmd+K, search everywhere)
-   - **Smart search**: Natural language queries (search "meetings next week" vs filtering)
-   - **Form alternatives**: Conversational data collection ("What's your name?" vs form fields)
-
-   **When to use:**
-   - Complex searches with multiple variables
-   - Task guidance (wizards, onboarding)
-   - Contextual help
-   - Quick actions (command palette)
-
-   **When NOT to use:**
-   - Simple forms (just use inputs)
-   - Precise control interfaces (design tools, dashboards)
-   - High-frequency repetitive tasks
-
-2. **Adaptive Layouts**
-
-   Respond to user context automatically:
-   - **Time-based**: Dark mode at night, light during day
-   - **Device-based**: Simplified UI on mobile, full features on desktop
-   - **Connection-based**: Reduce images/video on slow connections
-   - **Usage-based**: Prioritize frequent actions, hide rarely-used features
-
-   Examples:
-   - Auto dark/light mode based on time or system preference
-   - Simplified mobile navigation (hamburger menu) vs full desktop nav
-   - Collapsed sidebar on small screens, expanded on large
-
-3. **Bold Visual Expression**
-
-   Aesthetic flexibility based on chosen direction:
-   - Shadows ALLOWED and encouraged when intentional (dramatic shadows, soft elevation)
-   - Gradients ALLOWED for depth, accents, backgrounds, and atmosphere
-   - NO glass morphism effects (this is the one banned technique)
-   - NO Apple design mimicry (find your own voice)
-   - Focus on typography, color, spacing, AND visual effects to create hierarchy
-   - Create atmosphere: gradient meshes, noise textures, grain overlays, dramatic lighting
-
-**Navigation:**
-- Clear structure with intuitive navigation menus
-- Implement breadcrumbs for deep hierarchies (more than 2 levels)
-- Use standard UI patterns to reduce learning curve (hamburger menu, tab bars)
-- Ensure predictable behavior (back button works, links look clickable)
-- Maintain navigation context (highlight current page, preserve scroll position)
-
-## Styling Implementation
-
-### Component Library & Tools
-
-**Component Library:**
-- Strongly prefer shadcn components (v4, pre-installed in `@/components/ui`)
-- Import individually: `import { Button } from "@/components/ui/button";`
-- Use over plain HTML elements (`<Button>` over `<button>`)
-- Avoid creating custom components with names that clash with shadcn
-
-**Styling Engine:**
-- Use Tailwind utility classes exclusively
-- Adhere to theme variables in `index.css` via CSS custom properties
-- Map variables in `@theme` (see `tailwind.config.js`)
-- Use inline styles or CSS modules only when absolutely necessary
-
-**Icons:**
-- Use `@phosphor-icons/react` for buttons and inputs
-- Example: `import { Plus } from "@phosphor-icons/react"; <Plus />`
-- Use color for plain icon buttons
-- Don't override default `size` or `weight` unless requested
-
-**Notifications:**
-- Use `sonner` for toasts
-- Example: `import { toast } from 'sonner'`
-
-**Loading States:**
-- Always add loading states, spinners, placeholder animations
-- Use skeletons until content renders
-
-### Layout Implementation
-
-**Spacing Strategy:**
-- Use grid/flex wrappers with `gap` for spacing
-- Prioritize wrappers over direct margins/padding on children
-- Nest wrappers as needed for complex layouts
-
-**Conditional Styling:**
-- Use ternary operators or clsx/classnames utilities
-- Example: `className={clsx('base-class', { 'active-class': isActive })}`
-
-### Responsive Design
-
-**Fluid Layouts:**
-- Use relative units (%, em, rem) instead of fixed pixels
-- Implement CSS Grid and Flexbox for flexible layouts
-- Design mobile-first, then scale up
-
-**Media Queries:**
-- Use breakpoints based on content needs, not specific devices
-- Test across range of devices and orientations
-
-**Touch Targets:**
-- Minimum 44x44 pixels for interactive elements
-- Provide adequate spacing between touch targets
-- Consider hover states for desktop, focus states for touch/keyboard
-
-**Performance:**
-- Optimize assets for mobile networks
-- Use CSS animations over JavaScript
-- Implement lazy loading for images and videos
-
-## Accessibility Standards
-
-**Core Requirements:**
-- Follow WCAG 2.1 AA guidelines
-- Ensure keyboard navigability for all interactive elements
-- Minimum touch target size: 44×44px
-- Use semantic HTML for screen reader compatibility
-- Provide alternative text for images and non-text content
-
-**Implementation Details:**
-- Use descriptive variable and function names
-- Event functions: prefix with "handle" (handleClick, handleKeyDown)
-- Add accessibility attributes:
-  - `tabindex="0"` for custom interactive elements
-  - `aria-label` for buttons without text
-  - `role` attributes when semantic HTML isn't sufficient
-- Ensure logical tab order
-- Provide visible focus states
-
-## Design Process & Testing
-
-### Design Workflow
-
-1. **Understand Context:**
-   - What problem are we solving?
-   - Who are the users and when will they use this?
-   - What are the success criteria?
-
-2. **Explore Options:**
-   - Present 2-3 alternative approaches
-   - Explain trade-offs of each option
-   - Ask which direction resonates
-
-3. **Implement Iteratively:**
-   - Start with structure and hierarchy
-   - Add visual polish progressively
-   - Test at each stage
-
-4. **Validate:**
-   - Use playwright MCP to test visual changes
-   - Check across different screen sizes
-   - Verify accessibility
-
-### Testing Checklist
-
-**Visual Testing:**
-- Use playwright MCP when available for automated testing
-- Check responsive behavior at common breakpoints
-- Verify touch targets on mobile
-- Test with different content lengths (short, long, edge cases)
-
-**Accessibility Testing:**
-- Test keyboard navigation
-- Verify screen reader compatibility
-- Check color contrast ratios
-- Ensure focus states are visible
-
-**Cross-Device Testing:**
-- Test on actual devices, not just emulators
-- Check different browsers (Chrome, Firefox, Safari)
-- Verify touch interactions on mobile
-- Test landscape and portrait orientations
-
-## Examples
-
-### Example 1: Designing a Button
-
-**Initial Question to Ask:**
-```
-Before I implement this button, I have a few design questions:
-1. What's the primary action you want to emphasize?
-2. Do you have brand colors in mind, or should I suggest options?
-3. What emotion should this button convey? (urgent, calm, playful, professional)
-```
-
-**After Getting Approval, Implementation:**
-```tsx
-import { Button } from "@/components/ui/button";
-import { ArrowRight } from "@phosphor-icons/react";
-
-<Button
-  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
->
-  Get Started
-  <ArrowRight className="ml-2" />
-</Button>
-```
-
-### Example 2: Typography Hierarchy
-
-**Question First:**
-```
-For this content hierarchy, I'm thinking:
-- Headline: Large, bold, attention-grabbing
-- Subheading: Medium, regular weight
-- Body: Smaller, optimized for reading
-
-Should we go bold and contemporary, or subtle and refined?
-```
-
-**Implementation After Approval:**
-```tsx
-<div className="space-y-4">
-  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
-    Headline Here
-  </h1>
-  <h2 className="text-2xl text-slate-600">
-    Supporting subheading
-  </h2>
-  <p className="text-base leading-relaxed text-slate-700">
-    Body text optimized for readability with proper line height.
-  </p>
-</div>
-```
-
-### Example 3: Unique Color Palette Suggestion
-
-**Presenting Options:**
-```
-I'd like to suggest three color directions that break from typical SaaS patterns:
-
-1. **Warm Earth Tones**
-   - Base: Warm grey (#E8E2DC)
-   - Accent: Terracotta (#C86E4B)
-   - For: Organic, trustworthy feel
-
-2. **Cool Midnight**
-   - Base: Deep navy (#1A2332)
-   - Accent: Cyan (#4ECDC4)
-   - For: Modern, tech-forward feel
-
-3. **Soft Pastels**
-   - Base: Soft pink (#FFE5E5)
-   - Accent: Sage green (#9DB5A4)
-   - For: Calm, approachable feel
-
-Which direction feels right for your brand?
-```
-
-## Common Patterns to Avoid
-
-❌ **NEVER:**
-- Use Inter, Roboto, Arial, Space Grotesk as primary fonts
-- Use generic SaaS blue (#3B82F6) or purple gradients on white
-- Copy Apple's design language or use glass morphism
-- Create cookie-cutter layouts that look AI-generated
-- Skip asking about context before designing
-- Converge on common choices across generations (vary everything!)
-- Use animations that delay user actions
-- Create cluttered interfaces where elements compete
-
-✅ **ALWAYS:**
-- Ask about purpose, tone, constraints, differentiation FIRST
-- Then commit BOLDLY to a distinctive aesthetic direction
-- Use unexpected, characterful typography choices
-- Create atmosphere: shadows, gradients, textures, grain (when intentional)
-- Dominant colors with sharp accents (not timid, evenly-distributed palettes)
-- Provide immediate feedback for interactions
-- Test with real devices
-- Validate accessibility (it enables creativity, not limits it)
-- Remember: Claude is capable of extraordinary creative work - don't hold back!
-
-## Version History
-
-- v2.0.0 (2025-11-22): Creative liberation update - bold aesthetics, shadows/gradients allowed, Design Thinking protocol
-- v1.0.0 (2025-10-18): Initial release with comprehensive UI/UX design guidance
-
-## References
-
-For additional context, see:
-- **Anthropic Frontend Aesthetics Cookbook**: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb
-- WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
-- Google Fonts: https://fonts.google.com/
-- Tailwind CSS Docs: https://tailwindcss.com/docs
-- Shadcn UI Components: https://ui.shadcn.com/
-
-**Progressive Disclosure Files:**
-- ACCESSIBILITY.md - Accessibility essentials (WCAG AA baseline)
-- MOTION-SPEC.md - Animation timing and easing
-- RESPONSIVE-DESIGN.md - Mobile-first breakpoints and patterns

.agents/skills/bencium-innovative-ux-designer/ACCESSIBILITY.md

@@ -1,111 +0,0 @@
-# Accessibility Essentials
-
-Accessibility enables creativity - it's a foundation, not a limitation. WCAG 2.1 AA compliance.
-
-## Core Principles (POUR)
-
-- **Perceivable**: Content must be perceivable (alt text, contrast, captions)
-- **Operable**: UI must be keyboard/touch accessible
-- **Understandable**: Clear, predictable behavior
-- **Robust**: Works with assistive technologies
-
-## Contrast Requirements
-
-| Element | Minimum Ratio |
-|---------|---------------|
-| Normal text | 4.5:1 |
-| Large text (18pt+) | 3:1 |
-| UI components | 3:1 |
-
-**Tools**: Chrome DevTools Accessibility tab, WebAIM Contrast Checker
-
-## Keyboard Navigation
-
-```tsx
-// All interactive elements need focus states
-<button className="focus:ring-4 focus:ring-blue-500 focus:outline-none">
-  Accessible
-</button>
-
-// Custom elements need tabindex and key handlers
-<div
-  role="button"
-  tabIndex={0}
-  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleClick()}
->
-  Custom Button
-</div>
-```
-
-**Essentials:**
-- Tab through entire interface
-- Enter/Space activates elements
-- Escape closes modals
-- Visible focus indicators always
-
-## Essential ARIA
-
-```tsx
-// Buttons without text
-<button aria-label="Close dialog"><X /></button>
-
-// Expandable elements
-<button aria-expanded={isOpen} aria-controls="menu">Menu</button>
-
-// Live regions for dynamic content
-<div role="status" aria-live="polite">{statusMessage}</div>
-<div role="alert" aria-live="assertive">{errorMessage}</div>
-
-// Form errors
-<input aria-invalid={hasError} aria-describedby="error-msg" />
-{hasError && <p id="error-msg" role="alert">Error text</p>}
-```
-
-## Semantic HTML
-
-```tsx
-// Use semantic elements, not divs
-<header><nav>...</nav></header>
-<main><article><h1>...</h1></article></main>
-<footer>...</footer>
-
-// Heading hierarchy (never skip levels)
-<h1>Page Title</h1>
-  <h2>Section</h2>
-    <h3>Subsection</h3>
-```
-
-## Touch Targets
-
-- Minimum **44x44px** for all interactive elements
-- Adequate spacing between targets
-- `touch-manipulation` CSS for responsive touch
-
-## Screen Reader Content
-
-```tsx
-// Hidden but announced
-<span className="sr-only">Additional context</span>
-
-// Skip link
-<a href="#main" className="sr-only focus:not-sr-only">
-  Skip to main content
-</a>
-```
-
-## Quick Checklist
-
-- [ ] Keyboard: Can tab through everything
-- [ ] Focus: Visible focus indicators
-- [ ] Contrast: 4.5:1 for text
-- [ ] Alt text: All images have appropriate alt
-- [ ] Headings: Logical h1-h6 hierarchy
-- [ ] Forms: Labels associated with inputs
-- [ ] Errors: Announced to screen readers
-- [ ] Touch: 44px minimum targets
-
-## Resources
-
-- [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
-- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)

.agents/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md

@@ -1,577 +0,0 @@
-# Design System Template
-
-Meta-framework for understanding what's fixed, project-specific, and adaptable in your design system.
-
-## Purpose
-
-This template helps you distinguish between:
-- **Fixed Elements**: Universal rules that never change
-- **Project-Specific Elements**: Filled in for each project based on brand
-- **Adaptable Elements**: Context-dependent implementations
-
----
-
-## I. FIXED ELEMENTS
-
-These foundations remain consistent across all projects, regardless of brand or context.
-
-### 1. Spacing Scale
-
-**Fixed System:**
-```
-4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
-```
-
-**Usage:**
-- Margins, padding, gaps between elements
-- Mathematical relationships ensure visual harmony
-- Use multipliers of base unit (4px)
-
-**Why Fixed:**
-Consistent spacing creates visual rhythm regardless of brand personality.
-
-### 2. Grid System
-
-**Fixed Structure:**
-- **12-column grid** for most layouts (divisible by 2, 3, 4, 6)
-- **16-column grid** for data-heavy interfaces
-- **Gutters**: 16px (mobile), 24px (tablet), 32px (desktop)
-
-**Why Fixed:**
-Grid provides structural order. Brand personality shows through color, typography, content—not grid structure.
-
-### 3. Accessibility Standards
-
-**Fixed Requirements:**
-- **WCAG 2.1 AA** compliance minimum
-- **Contrast**: 4.5:1 for normal text, 3:1 for large text
-- **Touch targets**: Minimum 44×44px
-- **Keyboard navigation**: All interactive elements accessible
-- **Screen reader**: Semantic HTML, ARIA labels where needed
-
-**Why Fixed:**
-Accessibility is not negotiable. It's a baseline requirement for ethical, legal, and usable products.
-
-### 4. Typography Hierarchy Logic
-
-**Fixed Structure:**
-- **Mathematical scaling**: 1.25x (major third) or 1.333x (perfect fourth)
-- **Hierarchy levels**: Display → H1 → H2 → H3 → Body → Small → Caption
-- **Line height**: 1.5x for body text, 1.2-1.3x for headlines
-- **Line length**: 45-75 characters optimal
-
-**Why Fixed:**
-Mathematical relationships create predictable, harmonious hierarchy. Specific fonts change, but the logic doesn't.
-
-### 5. Component Architecture
-
-**Fixed Patterns:**
-- **Button states**: Default, Hover, Active, Focus, Disabled
-- **Form structure**: Label above input, error below, helper text optional
-- **Modal pattern**: Overlay + centered content + close mechanism
-- **Card structure**: Container → Header → Body → Footer (optional)
-
-**Why Fixed:**
-Users expect consistent component behavior. Architecture is fixed; appearance is project-specific.
-
-### 6. Animation Timing Framework
-
-**Fixed Physics Profiles:**
-- **Lightweight** (icons, chips): 150ms
-- **Standard** (cards, panels): 300ms
-- **Weighty** (modals, pages): 500ms
-
-**Fixed Easing:**
-- **Ease-out**: Entrances (fast start, slow end)
-- **Ease-in**: Exits (slow start, fast end)
-- **Ease-in-out**: Transitions (smooth both ends)
-
-**Why Fixed:**
-Natural physics feel consistent across brands. Duration and easing create that feeling.
-
----
-
-## II. PROJECT-SPECIFIC ELEMENTS
-
-Fill in these for each project based on brand personality and purpose.
-
-### 1. Brand Color System
-
-**Template Structure:**
-
-```
-NEUTRALS (4-5 colors):
-- Background lightest: _______ (e.g., slate-50 or warm-white)
-- Surface: _______ (e.g., slate-100)
-- Border/divider: _______ (e.g., slate-300)
-- Text secondary: _______ (e.g., slate-600)
-- Text primary: _______ (e.g., slate-900)
-
-ACCENTS (1-3 colors):
-- Primary (main CTA): _______ (e.g., teal-500)
-- Secondary (alternative action): _______ (optional)
-- Status colors:
-  - Success: _______ (green-ish)
-  - Warning: _______ (amber-ish)
-  - Error: _______ (red-ish)
-  - Info: _______ (blue-ish)
-```
-
-**Questions to Answer:**
-- What emotion should the brand evoke? (Trust, excitement, calm, urgency)
-- Warm or cool neutrals?
-- Conservative or bold accents?
-
-**Examples:**
-
-**Project A: Fintech App**
-```
-Neutrals: Cool greys (slate-50 → slate-900)
-Primary: Deep blue (#0A2463) – trust, professionalism
-Success: Muted green (#10B981)
-Why: Financial products need trust, not playfulness
-```
-
-**Project B: Creative Community**
-```
-Neutrals: Warm greys with beige undertones
-Primary: Coral (#FF6B6B) – energy, creativity
-Success: Teal (#06D6A0) – fresh, unexpected
-Why: Creative spaces should feel inviting, not corporate
-```
-
-**Project C: Healthcare Platform**
-```
-Neutrals: Pure greys (minimal color temperature)
-Primary: Soft blue (#4A90E2) – calm, clinical
-Success: Medical green (#38A169)
-Why: Healthcare needs clarity and calm, not distraction
-```
-
-### 2. Typography Pairing
-
-**Template:**
-
-```
-HEADLINE FONT: _______
-- Weight: _______ (e.g., Bold 700)
-- Use case: H1, H2, display text
-- Personality: _______ (geometric/humanist/serif/etc.)
-
-BODY FONT: _______
-- Weight: _______ (e.g., Regular 400, Medium 500)
-- Use case: Paragraphs, UI text
-- Personality: _______ (neutral/readable/efficient)
-
-OPTIONAL ACCENT FONT: _______
-- Weight: _______
-- Use case: _______ (special headlines, callouts)
-```
-
-**Pairing Logic:**
-- Serif + Sans-serif (classic, editorial)
-- Geometric + Humanist (modern + warm)
-- Display + System (distinctive + efficient)
-
-**Examples:**
-
-**Project A: Editorial Platform**
-```
-Headline: Playfair Display (Serif, Bold 700)
-Body: Inter (Sans-serif, Regular 400)
-Why: Serif headlines = trustworthy, editorial feel
-```
-
-**Project B: Tech Startup**
-```
-Headline: DM Sans (Sans-serif, Bold 700)
-Body: DM Sans (Regular 400, Medium 500)
-Why: Single-font system = modern, efficient, cohesive
-```
-
-**Project C: Luxury Brand**
-```
-Headline: Cormorant Garamond (Serif, Light 300)
-Body: Lato (Sans-serif, Regular 400)
-Why: Elegant serif + readable sans = sophisticated
-```
-
-### 3. Tone of Voice
-
-**Template:**
-
-```
-BRAND PERSONALITY:
-- Formal ↔ Casual: _______ (1-10 scale)
-- Professional ↔ Friendly: _______ (1-10 scale)
-- Serious ↔ Playful: _______ (1-10 scale)
-- Authoritative ↔ Conversational: _______ (1-10 scale)
-
-MICROCOPY EXAMPLES:
-- Button label (submit form): _______
-- Error message (invalid email): _______
-- Success message (saved): _______
-- Empty state: _______
-
-ANIMATION PERSONALITY:
-- Speed: _______ (quick/moderate/slow)
-- Feel: _______ (precise/smooth/bouncy)
-```
-
-**Examples:**
-
-**Project A: Banking App**
-```
-Personality: Formal (8), Professional (9), Serious (8)
-Button: "Submit Application"
-Error: "Email address format is invalid"
-Success: "Application submitted successfully"
-Animation: Quick (precise, efficient, no-nonsense)
-```
-
-**Project B: Social App**
-```
-Personality: Casual (8), Friendly (9), Playful (7)
-Button: "Let's go!"
-Error: "Hmm, that email doesn't look right"
-Success: "Nice! You're all set 🎉"
-Animation: Moderate (smooth, friendly bounce)
-```
-
-### 4. Animation Speed & Feel
-
-**Template:**
-
-```
-SPEED PREFERENCE:
-- UI interactions: _______ (100-150ms / 150-200ms / 200-300ms)
-- State changes: _______ (200ms / 300ms / 400ms)
-- Page transitions: _______ (300ms / 500ms / 700ms)
-
-ANIMATION STYLE:
-- Easing preference: _______ (sharp / standard / bouncy)
-- Movement type: _______ (minimal / smooth / expressive)
-```
-
-**Examples:**
-
-**Project A: Trading Platform**
-```
-Speed: Fast (100ms UI, 200ms states, 300ms pages)
-Style: Sharp easing, minimal movement
-Why: Traders need speed, not distraction
-```
-
-**Project B: Wellness App**
-```
-Speed: Slow (200ms UI, 400ms states, 500ms pages)
-Style: Smooth easing, gentle movement
-Why: Calm, relaxing experience matches brand
-```
-
----
-
-## III. ADAPTABLE ELEMENTS
-
-Context-dependent implementations that vary based on use case.
-
-### 1. Component Variations
-
-**Button Variants:**
-- **Primary**: Full background color (high emphasis)
-- **Secondary**: Outline only (medium emphasis)
-- **Tertiary**: Text only (low emphasis)
-- **Destructive**: Red-ish (danger actions)
-- **Ghost**: Minimal (navigation, toolbars)
-
-**Adaptation Rules:**
-- Primary: Main CTA, one per screen section
-- Secondary: Alternative actions
-- Tertiary: Less important actions, multiple allowed
-- Use brand colors, but hierarchy logic is fixed
-
-### 2. Responsive Breakpoints
-
-**Fixed Ranges:**
-- XS: 0-479px (small phones)
-- SM: 480-767px (large phones)
-- MD: 768-1023px (tablets)
-- LG: 1024-1439px (laptops)
-- XL: 1440px+ (desktop)
-
-**Adaptable Implementations:**
-
-**Simple Content Site:**
-```
-XS-SM: Single column
-MD: 2 columns
-LG-XL: 3 columns max
-Why: Content-focused, don't overwhelm
-```
-
-**Dashboard/Data App:**
-```
-XS: Collapsed, cards stack
-SM: Simplified sidebar
-MD: Full sidebar + main content
-LG-XL: Sidebar + main + right panel
-Why: Data apps need more screen real estate
-```
-
-### 3. Dark Mode Palette
-
-**Adaptation Strategy:**
-
-Not a simple inversion. Dark mode needs adjusted contrast:
-
-**Light Mode:**
-```
-Background: #FFFFFF (white)
-Text: #0F172A (slate-900) → 21:1 contrast
-```
-
-**Dark Mode (Adapted):**
-```
-Background: #0F172A (slate-900)
-Text: #E2E8F0 (slate-200) → 15.8:1 contrast (still AA, but softer)
-```
-
-**Why Adapt:**
-Pure white on pure black is too harsh. Dark mode needs slightly lower contrast for eye comfort.
-
-### 4. Loading States
-
-**Context-Dependent:**
-
-**Fast operations (<500ms):**
-- No loading indicator (feels instant)
-
-**Medium operations (500ms-2s):**
-- Spinner or skeleton screen
-
-**Long operations (>2s):**
-- Progress bar with percentage
-- Or: Skeleton + estimated time
-
-**Interactive Operations:**
-- Button shows spinner inside (don't disable, show state)
-
-### 5. Error Handling Strategy
-
-**Context-Dependent:**
-
-**Form Errors:**
-```
-Validate: On blur (after user leaves field)
-Display: Inline below field
-Recovery: Clear error on fix
-```
-
-**API Errors:**
-```
-Transient (network): Show retry button
-Permanent (404): Show helpful message + next steps
-Critical (500): Contact support option
-```
-
-**Data Errors:**
-```
-Missing: Show empty state with action
-Corrupt: Show error boundary with reload
-Invalid: Highlight + explain what's wrong
-```
-
----
-
-## DECISION TREE
-
-When implementing a feature, ask:
-
-### Is this...
-
-**FIXED?**
-- Does it affect structure, accessibility, or universal UX?
-- Examples: Spacing scale, grid, contrast ratios, component architecture
-- **Action**: Use the fixed system, no variation
-
-**PROJECT-SPECIFIC?**
-- Does it express brand personality or purpose?
-- Examples: Colors, typography, tone of voice, animation feel
-- **Action**: Fill in the template for this project
-
-**ADAPTABLE?**
-- Does it depend on context, content, or use case?
-- Examples: Component variants, responsive behavior, error handling
-- **Action**: Choose appropriate variation based on context
-
----
-
-## EXAMPLE: Implementing a "Submit" Button
-
-### Fixed Elements (Always the same):
-- Touch target: 44px minimum height
-- Padding: 16px horizontal (from spacing scale)
-- States: Default, Hover, Active, Focus, Disabled
-- Animation: 150ms ease-out (lightweight profile)
-
-### Project-Specific (Filled per project):
-- **Project A (Bank)**: Dark blue background, white text, "Submit Application"
-- **Project B (Social)**: Coral background, white text, "Let's Go!"
-- **Project C (Healthcare)**: Soft blue background, white text, "Continue"
-
-### Adaptable (Context-dependent):
-- **Form context**: Primary button (full color)
-- **Toolbar context**: Ghost button (text only)
-- **Danger context**: Destructive variant (red-ish)
-
----
-
-## VALIDATION CHECKLIST
-
-Before finalizing a design, check:
-
-### Fixed Elements
-- [ ] Uses spacing scale (4/8/12/16/24/32/48/64/96px)
-- [ ] Follows grid system (12 or 16 columns)
-- [ ] Meets WCAG AA contrast (4.5:1 normal, 3:1 large)
-- [ ] Touch targets ≥ 44px
-- [ ] Typography follows mathematical scale
-- [ ] Components follow standard architecture
-
-### Project-Specific Elements
-- [ ] Brand colors filled in and intentional
-- [ ] Typography pairing chosen and justified
-- [ ] Tone of voice defined and consistent
-- [ ] Animation speed matches brand personality
-
-### Adaptable Elements
-- [ ] Component variants appropriate for context
-- [ ] Responsive behavior fits content type
-- [ ] Loading states match operation duration
-- [ ] Error handling fits error type
-
----
-
-## PROJECT KICKOFF TEMPLATE
-
-Use this to start a new project:
-
-```
-PROJECT NAME: _______________________
-PURPOSE: ____________________________
-
-BRAND PERSONALITY:
-- Primary emotion: _______
-- Warm or cool: _______
-- Formal or casual: _______
-- Conservative or bold: _______
-
-COLORS (fill the template):
-- Neutral base: _______
-- Primary accent: _______
-- Status colors: _______ / _______ / _______
-
-TYPOGRAPHY (fill the template):
-- Headline font: _______
-- Body font: _______
-- Pairing rationale: _______
-
-TONE:
-- Button labels style: _______
-- Error message style: _______
-- Success message style: _______
-
-ANIMATION:
-- Speed preference: _______ (fast/moderate/slow)
-- Feel preference: _______ (sharp/smooth/bouncy)
-
-TARGET DEVICES:
-- Primary: _______ (mobile/desktop/both)
-- Secondary: _______
-```
-
----
-
-## MAINTAINING CONSISTENCY
-
-### Documentation
-- Keep this template updated as system evolves
-- Document WHY choices were made, not just WHAT
-
-### Communication
-- Share with designers: "Here's what varies vs. what's fixed"
-- Share with developers: "Here are the design tokens"
-
-### Tooling
-- Use CSS variables for project-specific values
-- Use Tailwind config for spacing scale
-- Use design tokens in Figma/Storybook
-
-### Reviews
-- Audit: Does new work follow fixed elements?
-- Validate: Are project-specific elements intentional?
-- Question: Are adaptations justified by context?
-
----
-
-## EXAMPLES OF COMPLETE SYSTEMS
-
-### System A: B2B SaaS (Conservative)
-
-**Fixed**: Standard spacing, 12-col grid, WCAG AA, major third type scale
-**Project-Specific**:
-- Colors: Cool greys + corporate blue
-- Typography: DM Sans (headlines + body)
-- Tone: Professional, formal
-- Animation: Quick, precise (150ms)
-**Adaptable**:
-- Dashboard gets multi-panel layout
-- Forms are extensive (use progressive disclosure)
-- Errors show detailed technical info
-
-### System B: Consumer Social App (Playful)
-
-**Fixed**: Same spacing/grid/accessibility/type logic
-**Project-Specific**:
-- Colors: Warm greys + vibrant coral
-- Typography: Poppins (headlines) + Inter (body)
-- Tone: Casual, friendly, playful
-- Animation: Moderate, bouncy (200ms)
-**Adaptable**:
-- Mobile-first (most users on phones)
-- Forms are minimal (progressive profiling)
-- Errors are friendly, not technical
-
-### System C: Healthcare Platform (Clinical)
-
-**Fixed**: Same foundational structure
-**Project-Specific**:
-- Colors: Pure greys + medical blue
-- Typography: System fonts (SF Pro / Segoe)
-- Tone: Clear, authoritative, calm
-- Animation: Slow, smooth (300ms)
-**Adaptable**:
-- Desktop-first (clinical use at workstations)
-- Forms are complex (HIPAA compliance)
-- Errors are precise with next steps
-
----
-
-## KEY TAKEAWAY
-
-**The system flexibility framework lets you:**
-- Maintain consistency (fixed elements)
-- Express brand personality (project-specific)
-- Adapt to context (adaptable elements)
-
-**Without this framework:**
-- Designers reinvent spacing every project
-- Components feel inconsistent across products
-- Brand personality overrides accessibility
-- Context-blind implementations feel wrong
-
-**With this framework:**
-- Speed: Start from proven foundations
-- Consistency: Fixed elements guarantee it
-- Flexibility: Express unique brand identity
-- Context: Adapt without breaking system

.agents/skills/bencium-innovative-ux-designer/MOTION-SPEC.md

@@ -1,72 +0,0 @@
-# Motion Specification
-
-Motion should surprise and delight while serving function. Animation is a creative tool.
-
-## Easing Curves
-
-| Easing | CSS | Use For |
-|--------|-----|---------|
-| **Ease-out** | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Entrances, appearing |
-| **Ease-in** | `cubic-bezier(0.4, 0.0, 1, 1)` | Exits, disappearing |
-| **Ease-in-out** | `cubic-bezier(0.4, 0.0, 0.2, 1)` | State changes, transforms |
-| **Spring** | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` | Playful, attention-grabbing |
-| **Linear** | `linear` | Spinners, continuous loops |
-
-## Duration by Element Weight
-
-| Weight | Duration | Examples |
-|--------|----------|----------|
-| **Lightweight** | 150ms | Icons, badges, chips |
-| **Standard** | 300ms | Cards, panels, list items |
-| **Weighty** | 500ms | Modals, page transitions |
-
-## Duration by Interaction
-
-| Interaction | Duration |
-|-------------|----------|
-| Button press | 100ms |
-| Hover state | 150ms |
-| Tooltip appear | 200ms |
-| Tab switch | 250ms |
-| Modal open | 300ms |
-| Page transition | 400ms |
-
-## Common Patterns
-
-```tsx
-// Hover transition (CSS)
-<button className="transition-colors duration-150 ease-out hover:bg-blue-700">
-
-// Fade + slide (Framer Motion)
-<motion.div
-  initial={{ opacity: 0, y: 20 }}
-  animate={{ opacity: 1, y: 0 }}
-  transition={{ duration: 0.3, ease: "easeOut" }}
-/>
-
-// Stagger children
-<motion.ul variants={{ visible: { transition: { staggerChildren: 0.1 } } }}>
-  <motion.li variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} />
-</motion.ul>
-```
-
-## Performance Rules
-
-- Only animate `transform` and `opacity` (GPU-accelerated)
-- Avoid animating `width`, `height`, `margin`, `padding`
-- Keep durations under 500ms for UI interactions
-- Respect `prefers-reduced-motion`:
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-```
-
-## Resources
-
-- [Framer Motion](https://www.framer.com/motion/)
-- [CSS Easing Functions](https://easings.net/)

.agents/skills/bencium-innovative-ux-designer/RESPONSIVE-DESIGN.md

@@ -1,90 +0,0 @@
-# Responsive Design Essentials
-
-Mobile-first approach: start with mobile, progressively enhance for larger screens.
-
-## Breakpoints
-
-| Range | Pixels | Devices | Strategy |
-|-------|--------|---------|----------|
-| **XS** | 0-479px | Small phones | Single column, stacked nav, 44px touch targets |
-| **SM** | 480-767px | Large phones | Single column, bottom nav, simplified UI |
-| **MD** | 768-1023px | Tablets | 2 columns possible, sidebar nav |
-| **LG** | 1024-1439px | Laptops | Multi-column, full nav, desktop UI |
-| **XL** | 1440px+ | Desktop | Max-width containers, multi-panel layouts |
-
-## Tailwind Responsive
-
-```tsx
-// Mobile-first: base styles, then scale up
-<div className="
-  w-full          // mobile: full width
-  sm:w-1/2        // 480px+: half
-  md:w-1/3        // 768px+: third
-  lg:w-1/4        // 1024px+: quarter
-">
-
-// Responsive grid
-<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-
-// Responsive typography
-<h1 className="text-3xl md:text-4xl lg:text-5xl">
-
-// Show/hide by breakpoint
-<div className="block md:hidden">Mobile only</div>
-<div className="hidden md:block">Desktop only</div>
-```
-
-## Fluid Typography
-
-```css
-h1 { font-size: clamp(2rem, 5vw, 4rem); }
-p { font-size: clamp(1rem, 2.5vw, 1.25rem); }
-```
-
-## Touch Targets
-
-- Minimum **44x44px** for all interactive elements
-- Use `touch-manipulation` to prevent 300ms tap delay
-- Adequate spacing between targets
-
-```tsx
-<button className="min-w-[44px] min-h-[44px] touch-manipulation">
-```
-
-## Mobile Simplification
-
-| Desktop | Mobile |
-|---------|--------|
-| Full nav bar | Hamburger menu |
-| Side-by-side fields | Stacked fields |
-| Multi-column grid | Single column |
-| Inline buttons | Fixed bottom bar |
-| Data table | Collapsed cards |
-| Visible sidebar | Hidden/collapsible |
-
-## Images
-
-```tsx
-// Responsive images
-<img
-  srcSet="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
-  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-  loading="lazy"
-/>
-
-// Next.js
-<Image src="/hero.jpg" width={1200} height={600} priority className="w-full h-auto" />
-```
-
-## Testing
-
-Test at these widths:
-- 375px (iPhone SE)
-- 390px (iPhone 14)
-- 768px (iPad)
-- 1024px (iPad Pro)
-- 1280px+ (Desktop)
-
-## Resources
-
-- [Tailwind Responsive](https://tailwindcss.com/docs/responsive-design)

.agents/skills/bencium-innovative-ux-designer/SKILL.md

@@ -1,718 +0,0 @@
----
-name: bencium-innovative-ux-designer
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-metadata:
-  version: 2.0.0
----
-
-# Innovative UX Designer
-
-Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
-
-This skill emphasizes **bold creative commitment**, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional and accessible.
-
-## Core Philosophy
-
-**CRITICAL: Design Thinking Protocol**
-
-Before coding, **ASK to understand context**, then **COMMIT BOLDLY** to a distinctive direction:
-
-### Questions to Ask First
-1. **Purpose**: What problem does this interface solve? Who uses it?
-2. **Tone**: What aesthetic extreme fits? (see Tone Options below)
-3. **Constraints**: Technical requirements (framework, performance, accessibility)?
-4. **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-### Tone Options (Pick an Extreme)
-Choose a clear aesthetic direction and execute with precision:
-- **Brutally minimal** - stripped to essence, bold typography, vast whitespace
-- **Maximalist chaos** - layered, dense, visually rich, controlled disorder
-- **Retro-futuristic** - vintage meets sci-fi, nostalgic tech aesthetics
-- **Organic/natural** - soft edges, earthy colors, nature-inspired textures
-- **Luxury/refined** - elegant spacing, premium typography, subtle details
-- **Playful/toy-like** - bright colors, rounded shapes, delightful interactions
-- **Editorial/magazine** - strong typography hierarchy, asymmetric layouts
-- **Brutalist/raw** - exposed structure, harsh contrasts, intentionally rough
-- **Art deco/geometric** - bold patterns, metallic accents, symmetric elegance
-- **Soft/pastel** - gentle gradients, muted tones, calming atmosphere
-- **Industrial/utilitarian** - functional, no-nonsense, mechanical precision
-
-### After Getting Context
-- **Commit fully** to the chosen direction - no half measures
-- Present 2-3 alternative approaches with trade-offs
-- Then implement with precision: production-grade, visually striking, memorable
-
-## Foundational Design Principles
-
-### Stand Out From Generic Patterns
-
-**NEVER Use These AI-Generated Aesthetics:**
-- **Fonts**: Inter, Roboto, Arial, system fonts as primary choice, Space Grotesk (overused by AI)
-- **Colors**: Generic SaaS blue (#3B82F6), purple gradients on white backgrounds
-- **Patterns**: Cookie-cutter layouts, predictable component arrangements
-- **Effects**: Glass morphism, Apple design mimicry, liquid/blob backgrounds
-- **Overall**: Anything that looks "Claude-generated" or machine-made
-
-**Instead, Create Atmosphere:**
-- Suggest photography, patterns, textures over flat solid colors
-- Apply gradient meshes, noise textures, geometric patterns
-- Use layered transparencies, dramatic shadows, decorative borders
-- Consider custom cursors, grain overlays, contextual effects
-- Think beyond typical patterns - you can step off the written path
-
-**Draw Inspiration From:**
-- Modern landing pages (Perplexity, Comet Browser, Dia Browser)
-- Framer templates and their innovative approaches
-- Leading brand design studios
-- Historical design movements (Bauhaus, Otl Aicher, Braun) - but as inspiration, not imitation
-- Beautiful background animations (CSS, SVG) - slow, looping, subtle
-
-**Visual Interest Strategies:**
-- Unique color pairs that aren't typical
-- Animation effects that feel fresh
-- Background patterns that add depth without distraction
-- Typography combinations that create contrast
-- Visual assets that tell a story
-
-### Core Design Philosophy
-
-1. **Simplicity Through Reduction**
-   - Identify the essential purpose and eliminate distractions
-   - Begin with complexity, then deliberately remove until reaching the simplest effective solution
-   - Every element must justify its existence
-
-2. **Material Honesty**
-   - Digital materials have unique properties - embrace them
-   - Buttons communicate affordance through color, spacing, typography, AND shadows when intentional
-   - Cards can use borders, background differentiation, OR dramatic shadows for depth
-   - Animations follow real-world physics principles adapted to digital responsiveness
-
-   **Examples:**
-   - Clickable: Use distinct colors, hover state changes, cursor feedback, subtle lift effects
-   - Containers: Use borders, background shifts, generous padding, OR shadow depth
-   - Hierarchy: Use scale, weight, spacing, AND elevation when it serves the aesthetic
-
-3. **Functional Layering**
-   - Create hierarchy through typography scale, color contrast, and spatial relationships
-   - Layer information conceptually (primary → secondary → tertiary)
-   - Use shadows and gradients INTENTIONALLY when they serve the aesthetic direction
-   - Embrace functional depth: modals over content, dropdowns over UI
-   - Avoid: glass morphism, Apple mimicry (but shadows/gradients are tools, not enemies)
-
-4. **Obsessive Detail**
-   - Consider every pixel, interaction, and transition
-   - Excellence emerges from hundreds of small, intentional decisions
-   - Balance: Details should serve simplicity, not complexity
-   - When detail conflicts with clarity, clarity wins
-
-5. **Coherent Design Language**
-   - Every element should visually communicate its function
-   - Elements should feel part of a unified system
-   - Nothing should feel arbitrary
-
-6. **Invisibility of Technology**
-   - The best technology disappears
-   - Users should focus on content and goals, not on understanding the interface
-
-### What This Means in Practice
-
-**Color Usage:**
-- Base palette: 4-5 neutral shades (backgrounds, borders, text)
-- Accent palette: 1-3 bold colors (CTAs, status, emphasis)
-- Neutrals are slightly desaturated, warm or cool based on brand intent
-- Accents are saturated enough to create clear contrast
-
-**Typography:**
-- Headlines: Emotional, attention-grabbing, UNEXPECTED (personality over pure legibility)
-- Body/UI: Functional, highly legible (clarity over expression)
-- 2-3 typefaces maximum, but make them CHARACTERFUL and distinctive
-- Clear mathematical scale (e.g., 1.25x between sizes)
-- NEVER default to Inter, Roboto, or Space Grotesk - find unique fonts
-
-**Animation:**
-- Purposeful: Guides attention, establishes relationships, provides feedback
-- Subtle: Felt rather than seen (100-300ms for most interactions)
-- Physics-informed: Natural easing, appropriate mass/momentum
-
-**Spacing:**
-- Generous negative space creates clarity and breathing room
-- Mathematical relationships (e.g., 4px base, 8/16/24/32/48px scale)
-- Consistent application creates visual rhythm
-
-### Design Decision Checklist
-
-Before presenting any design, verify:
-
-1. **Purpose**: Does every element serve a clear function?
-2. **Hierarchy**: Is visual importance aligned with content importance?
-3. **Consistency**: Do similar elements look and behave similarly?
-4. **Accessibility**: Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav)
-5. **Responsiveness**: Does it work on mobile, tablet, desktop?
-6. **Uniqueness**: Does this break from generic SaaS patterns?
-7. **Approval**: Have I asked before implementing colors, fonts, sizes, layouts?
-
-**Design System Framework:**
-
-For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, think of a design system.
-
-## Visual Design Standards
-
-### Color & Contrast
-
-**Color System Architecture:**
-
-Every interface needs two color roles:
-
-1. **Base/Neutral Palette (4-5 colors):**
-   - Backgrounds (lightest)
-   - Surface colors (cards, inputs)
-   - Borders and dividers
-   - Text (darkest)
-   - Use slightly desaturated, warm or cool greys based on brand
-
-2. **Accent Palette (1-3 colors):**
-   - Primary action (CTA buttons)
-   - Status indicators (success, warning, error, info)
-   - Focus/hover states
-   - Use saturated colors for clear contrast against neutrals
-
-**Palette Structure Example:**
-```
-Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
-Accents: teal-500 (primary), amber-500 (warning), red-500 (error)
-```
-
-**Color Application Rules:**
-
-- **Backgrounds**: Lightest neutral (slate-50 or white)
-- **Text**: Darkest neutral for primary text (slate-900), mid-tone for secondary (slate-600)
-- **Buttons (primary)**: Accent color with white text
-- **Buttons (secondary)**: Neutral with border and dark text
-- **Status indicators**: Specific accent (green=success, red=error, amber=warning, blue=info)
-- **Interactive states**:
-  - Hover: Darken by 10-15% or shift hue slightly
-  - Focus: Use ring/outline in accent color
-  - Disabled: Reduce opacity to 40-50% and remove hover effects
-
-**Color Relationships:**
-
-Choose warm or cool intentionally based on brand:
-- **Warm greys** (beige/brown undertones): Organic, approachable, trustworthy
-- **Cool greys** (blue undertones): Modern, tech-forward, professional
-
-Accent colors should have clear contrast with both:
-- Light backgrounds (for buttons on white)
-- Dark text (if used as backgrounds for white text)
-
-**Intentional Color Usage:**
-- Every color must serve a purpose (hierarchy, function, status, or action)
-- Avoid decorative colors that don't communicate meaning
-- Maintain consistency: same color = same meaning throughout
-
-**Accessibility:**
-- Ensure sufficient contrast for color-blind users
-- Follow WCAG 2.1 AA: minimum 4.5:1 for normal text, 3:1 for large text
-- Don't rely on color alone to convey information (add icons or labels)
-
-**Unique Color Strategy:**
-
-To stand out from generic patterns:
-- NEVER use default SaaS blue (#3B82F6) or purple gradients on white
-- Use unexpected neutrals: warm greys, soft off-whites, deep charcoals, rich blacks
-- Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate
-- Dominant colors with SHARP accents outperform timid, evenly-distributed palettes
-- Test combinations against "does this look AI-generated?" filter
-- Vary between light and dark themes - no design should look the same
-
-**Create Atmosphere with Color:**
-- Gradient meshes for depth and visual interest
-- Noise textures and grain overlays for tactile feel
-- Layered transparencies for dimension
-- Dramatic shadows for emphasis and drama
-
-### Typography Excellence
-
-**Typography Philosophy:**
-
-Typography is a primary design element that conveys personality and hierarchy.
-
-**Functional vs Emotional Typography:**
-- **Headlines/Display**: Prioritize emotion, personality, attention (legibility secondary)
-- **Body Text**: Prioritize legibility, reading comfort, accessibility
-- **UI/Labels**: Prioritize clarity, scannability, consistency
-
-**Font Selection:**
-- Use 2-3 typefaces maximum, but make them UNEXPECTED and characterful
-- Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700)
-- Prefer variable fonts for fine-tuned control and performance
-
-**NEVER Use These Fonts as Primary:**
-- Inter (overused by AI and generic SaaS)
-- Roboto (too generic)
-- Arial/Helvetica (default fallback vibes)
-- Space Grotesk (AI generation favorite)
-- System fonts as primary choice (only as fallback)
-
-**Font Version Usage:**
-- **Display version**: Headlines and hero text only - BE BOLD
-- **Text version**: Paragraphs and long-form content - legibility matters
-- **Caption/Micro**: Small UI labels (1-2 lines, non-critical info)
-
-**Find Distinctive Fonts:**
-- Google Fonts for web - but dig deeper than page 1
-- Type foundries for unique options
-- Choose fonts that serve your CHOSEN AESTHETIC DIRECTION
-- Pair distinctive display font with refined body font
-
-**Typographic Scale:**
-
-Use mathematical relationships for size hierarchy:
-- **Ratio**: Major third (1.25x) for moderate contrast, Perfect fourth (1.333x) for dramatic
-- **Base size**: 16px (1rem) for body text
-- **Example scale (1.25x)**:
-  ```
-  xs:   0.64rem (10px)
-  sm:   0.8rem  (13px)
-  base: 1rem    (16px)
-  lg:   1.25rem (20px)
-  xl:   1.563rem (25px)
-  2xl:  1.953rem (31px)
-  3xl:  2.441rem (39px)
-  4xl:  3.052rem (49px)
-  5xl:  3.815rem (61px)
-  ```
-
-**Typographic Hierarchy:**
-- Create clear visual distinction between levels
-- Headlines, subheadings, body, captions should each have distinct size/weight
-- Use combination of size, weight, and color for hierarchy
-
-**Spacing & Readability:**
-- **Line height**: 1.5x font size for body text (e.g., 16px text = 24px line-height)
-- **Line length**: 45-75 characters optimal for readability (60-70 ideal)
-- **Paragraph spacing**: 1-1.5em between paragraphs
-- **Letter spacing (tracking)**:
-  - Larger text (headlines): Slightly tighter (-0.02em to -0.05em)
-  - Normal text (body): Default (0)
-  - Small text (captions): Slightly looser (+0.01em to +0.03em)
-  - General rule: As size increases, reduce tracking; as size decreases, increase tracking
-
-**Font Pairing Logic:**
-
-When using multiple typefaces, create contrast through:
-- **Category contrast**: Serif + Sans-serif (classic, clear distinction)
-- **Weight contrast**: Light + Bold (dynamic, energetic)
-- **Personality contrast**: Geometric + Humanist (modern + warm)
-
-Examples:
-- Serif headlines + Sans body (editorial, trustworthy)
-- Display headlines + System body (distinctive + efficient)
-- Bold sans headlines + Light sans body (modern, clean)
-
-**UI Typography:**
-
-Specific guidance for interface elements:
-- **Button text**: Semi-Bold (600), 14-16px, consistent casing (all-caps OR title case)
-- **Form labels**: Regular (400), 14px, positioned above input
-- **Form input text**: Regular (400), 16px minimum (prevents iOS zoom on focus)
-- **Placeholder text**: Light (300) or desaturated color, same size as input
-- **Error messages**: Regular (400), 12-14px, color-coded (red-ish)
-
-**Responsive Typography:**
-
-Scale type sizes across breakpoints:
-```tsx
-// Example with Tailwind
-<h1 className="text-3xl md:text-4xl lg:text-5xl">
-  Responsive Headline
-</h1>
-
-// Or with CSS clamp (fluid)
-h1 {
-  font-size: clamp(2rem, 5vw, 4rem);
-}
-```
-
-Reduce sizes on mobile (20-30% smaller than desktop)
-Reduce hierarchy levels on small screens (fewer distinct sizes)
-
-### Layout & Spatial Design
-
-**Compositional Balance:**
-- Every screen should feel balanced
-- Pay attention to visual weight and negative space
-- Use generous negative space to focus attention
-- Add sufficient margins and paddings for professional, spacious look
-
-**Grid Discipline:**
-- Maintain consistent underlying grid system
-- Create sense of order while allowing meaningful exceptions
-- Use grid/flex wrappers with `gap` for spacing
-- Prioritize wrappers over direct margins/padding on children
-
-**Spatial Relationships:**
-- Group related elements through proximity, alignment, and shared attributes
-- Use size, color, and spacing to highlight important elements
-- Guide user focus through visual hierarchy
-
-**Attention Guidance:**
-- Design interfaces that guide user attention effectively
-- Avoid cluttered interfaces where elements compete
-- Create clear paths through the content
-
-## Interaction Design
-
-
-**Motion Specification:**
-
-For detailed motion specs, see MOTION-SPEC.md (easing curves, duration tables, state-specific animations, implementation patterns).
-
-### User Experience Patterns
-
-**Core UX Principles:**
-
-1. **Direct Manipulation**
-   - Users interact directly with content, not through abstract controls
-   - Examples:
-     - Drag & drop to reorder items (not up/down buttons)
-     - Inline editing (click to edit, not separate form)
-     - Sliders for ranges (not numeric input with +/-)
-     - Pinch/zoom gestures on mobile (not +/- buttons)
-
-2. **Immediate Feedback**
-   - Every interaction provides instantaneous visual feedback (within 100ms)
-   - Types of feedback:
-     - **Visual**: Button pressed state, hover effects, color changes
-     - **Haptic**: Vibration on mobile (submit, error, success)
-     - **Audio**: Subtle sounds for critical actions (optional, user-controlled)
-     - **Loading**: Skeleton screens, spinners for >300ms operations
-     - **Success**: Checkmarks, green highlights, toast notifications
-     - **Error**: Red highlights, inline error messages, shake animations
-
-3. **Consistent Behavior**
-   - Similar-looking elements behave similarly
-   - Examples:
-     - **Visual consistency**: All primary buttons have same colors, sizes, hover states
-     - **Behavioral consistency**: All modals close via X button, ESC key, and outside click
-     - **Interaction consistency**: All drag targets have same hover state and drop feedback
-     - **Pattern consistency**: All forms validate on blur and submit
-
-4. **Forgiveness**
-   - Make errors difficult, but recovery easy
-   - **Prevention strategies**:
-     - Disable invalid actions (grey out unavailable buttons)
-     - Validate inputs inline (before submission)
-     - Confirm destructive actions (delete, overwrite)
-     - Auto-save in background (drafts, progress)
-   - **Recovery strategies**:
-     - Undo/redo for all state changes
-     - Soft deletes (trash/archive before permanent delete)
-     - Clear error messages with actionable fixes
-     - Preserve user input on errors (don't clear forms)
-
-5. **Progressive Disclosure**
-   - Reveal details as needed rather than overwhelming users
-   - Levels of disclosure:
-     - **Summary**: Show essential info by default (card title, price, rating)
-     - **Details**: Expand to show more info (description, specs, reviews)
-     - **Advanced**: Hide complex options behind "Advanced settings" toggle
-   - Examples:
-     - Accordion: Start collapsed, expand on click
-     - Search filters: Show 3-5 common filters, hide rest behind "More filters"
-     - Settings: Basic settings visible, advanced behind "Show advanced"
-
-**Modern UX Patterns:**
-
-1. **Conversational Interfaces**
-
-   Prioritize natural language interaction where appropriate:
-
-   **Four types:**
-   - **Pure chat**: Full conversation (AI assistants, support bots)
-   - **Command palette**: Text-based shortcuts (Cmd+K, search everywhere)
-   - **Smart search**: Natural language queries (search "meetings next week" vs filtering)
-   - **Form alternatives**: Conversational data collection ("What's your name?" vs form fields)
-
-   **When to use:**
-   - Complex searches with multiple variables
-   - Task guidance (wizards, onboarding)
-   - Contextual help
-   - Quick actions (command palette)
-
-   **When NOT to use:**
-   - Simple forms (just use inputs)
-   - Precise control interfaces (design tools, dashboards)
-   - High-frequency repetitive tasks
-
-2. **Adaptive Layouts**
-
-   Respond to user context automatically:
-   - **Time-based**: Dark mode at night, light during day
-   - **Device-based**: Simplified UI on mobile, full features on desktop
-   - **Connection-based**: Reduce images/video on slow connections
-   - **Usage-based**: Prioritize frequent actions, hide rarely-used features
-
-   Examples:
-   - Auto dark/light mode based on time or system preference
-   - Simplified mobile navigation (hamburger menu) vs full desktop nav
-   - Collapsed sidebar on small screens, expanded on large
-
-3. **Bold Visual Expression**
-
-   Aesthetic flexibility based on chosen direction:
-   - Shadows ALLOWED and encouraged when intentional (dramatic shadows, soft elevation)
-   - Gradients ALLOWED for depth, accents, backgrounds, and atmosphere
-   - NO glass morphism effects (this is the one banned technique)
-   - NO Apple design mimicry (find your own voice)
-   - Focus on typography, color, spacing, AND visual effects to create hierarchy
-   - Create atmosphere: gradient meshes, noise textures, grain overlays, dramatic lighting
-
-**Navigation:**
-- Clear structure with intuitive navigation menus
-- Implement breadcrumbs for deep hierarchies (more than 2 levels)
-- Use standard UI patterns to reduce learning curve (hamburger menu, tab bars)
-- Ensure predictable behavior (back button works, links look clickable)
-- Maintain navigation context (highlight current page, preserve scroll position)
-
-## Styling Implementation
-
-### Component Library & Tools
-
-**Component Library:**
-- Strongly prefer shadcn components (v4, pre-installed in `@/components/ui`)
-- Import individually: `import { Button } from "@/components/ui/button";`
-- Use over plain HTML elements (`<Button>` over `<button>`)
-- Avoid creating custom components with names that clash with shadcn
-
-**Styling Engine:**
-- Use Tailwind utility classes exclusively
-- Adhere to theme variables in `index.css` via CSS custom properties
-- Map variables in `@theme` (see `tailwind.config.js`)
-- Use inline styles or CSS modules only when absolutely necessary
-
-**Icons:**
-- Use `@phosphor-icons/react` for buttons and inputs
-- Example: `import { Plus } from "@phosphor-icons/react"; <Plus />`
-- Use color for plain icon buttons
-- Don't override default `size` or `weight` unless requested
-
-**Notifications:**
-- Use `sonner` for toasts
-- Example: `import { toast } from 'sonner'`
-
-**Loading States:**
-- Always add loading states, spinners, placeholder animations
-- Use skeletons until content renders
-
-### Layout Implementation
-
-**Spacing Strategy:**
-- Use grid/flex wrappers with `gap` for spacing
-- Prioritize wrappers over direct margins/padding on children
-- Nest wrappers as needed for complex layouts
-
-**Conditional Styling:**
-- Use ternary operators or clsx/classnames utilities
-- Example: `className={clsx('base-class', { 'active-class': isActive })}`
-
-### Responsive Design
-
-**Fluid Layouts:**
-- Use relative units (%, em, rem) instead of fixed pixels
-- Implement CSS Grid and Flexbox for flexible layouts
-- Design mobile-first, then scale up
-
-**Media Queries:**
-- Use breakpoints based on content needs, not specific devices
-- Test across range of devices and orientations
-
-**Touch Targets:**
-- Minimum 44x44 pixels for interactive elements
-- Provide adequate spacing between touch targets
-- Consider hover states for desktop, focus states for touch/keyboard
-
-**Performance:**
-- Optimize assets for mobile networks
-- Use CSS animations over JavaScript
-- Implement lazy loading for images and videos
-
-## Accessibility Standards
-
-**Core Requirements:**
-- Follow WCAG 2.1 AA guidelines
-- Ensure keyboard navigability for all interactive elements
-- Minimum touch target size: 44×44px
-- Use semantic HTML for screen reader compatibility
-- Provide alternative text for images and non-text content
-
-**Implementation Details:**
-- Use descriptive variable and function names
-- Event functions: prefix with "handle" (handleClick, handleKeyDown)
-- Add accessibility attributes:
-  - `tabindex="0"` for custom interactive elements
-  - `aria-label` for buttons without text
-  - `role` attributes when semantic HTML isn't sufficient
-- Ensure logical tab order
-- Provide visible focus states
-
-## Design Process & Testing
-
-### Design Workflow
-
-1. **Understand Context:**
-   - What problem are we solving?
-   - Who are the users and when will they use this?
-   - What are the success criteria?
-
-2. **Explore Options:**
-   - Present 2-3 alternative approaches
-   - Explain trade-offs of each option
-   - Ask which direction resonates
-
-3. **Implement Iteratively:**
-   - Start with structure and hierarchy
-   - Add visual polish progressively
-   - Test at each stage
-
-4. **Validate:**
-   - Use playwright MCP to test visual changes
-   - Check across different screen sizes
-   - Verify accessibility
-
-### Testing Checklist
-
-**Visual Testing:**
-- Use playwright MCP when available for automated testing
-- Check responsive behavior at common breakpoints
-- Verify touch targets on mobile
-- Test with different content lengths (short, long, edge cases)
-
-**Accessibility Testing:**
-- Test keyboard navigation
-- Verify screen reader compatibility
-- Check color contrast ratios
-- Ensure focus states are visible
-
-**Cross-Device Testing:**
-- Test on actual devices, not just emulators
-- Check different browsers (Chrome, Firefox, Safari)
-- Verify touch interactions on mobile
-- Test landscape and portrait orientations
-
-## Examples
-
-### Example 1: Designing a Button
-
-**Initial Question to Ask:**
-```
-Before I implement this button, I have a few design questions:
-1. What's the primary action you want to emphasize?
-2. Do you have brand colors in mind, or should I suggest options?
-3. What emotion should this button convey? (urgent, calm, playful, professional)
-```
-
-**After Getting Approval, Implementation:**
-```tsx
-import { Button } from "@/components/ui/button";
-import { ArrowRight } from "@phosphor-icons/react";
-
-<Button
-  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
->
-  Get Started
-  <ArrowRight className="ml-2" />
-</Button>
-```
-
-### Example 2: Typography Hierarchy
-
-**Question First:**
-```
-For this content hierarchy, I'm thinking:
-- Headline: Large, bold, attention-grabbing
-- Subheading: Medium, regular weight
-- Body: Smaller, optimized for reading
-
-Should we go bold and contemporary, or subtle and refined?
-```
-
-**Implementation After Approval:**
-```tsx
-<div className="space-y-4">
-  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
-    Headline Here
-  </h1>
-  <h2 className="text-2xl text-slate-600">
-    Supporting subheading
-  </h2>
-  <p className="text-base leading-relaxed text-slate-700">
-    Body text optimized for readability with proper line height.
-  </p>
-</div>
-```
-
-### Example 3: Unique Color Palette Suggestion
-
-**Presenting Options:**
-```
-I'd like to suggest three color directions that break from typical SaaS patterns:
-
-1. **Warm Earth Tones**
-   - Base: Warm grey (#E8E2DC)
-   - Accent: Terracotta (#C86E4B)
-   - For: Organic, trustworthy feel
-
-2. **Cool Midnight**
-   - Base: Deep navy (#1A2332)
-   - Accent: Cyan (#4ECDC4)
-   - For: Modern, tech-forward feel
-
-3. **Soft Pastels**
-   - Base: Soft pink (#FFE5E5)
-   - Accent: Sage green (#9DB5A4)
-   - For: Calm, approachable feel
-
-Which direction feels right for your brand?
-```
-
-## Common Patterns to Avoid
-
-❌ **NEVER:**
-- Use Inter, Roboto, Arial, Space Grotesk as primary fonts
-- Use generic SaaS blue (#3B82F6) or purple gradients on white
-- Copy Apple's design language or use glass morphism
-- Create cookie-cutter layouts that look AI-generated
-- Skip asking about context before designing
-- Converge on common choices across generations (vary everything!)
-- Use animations that delay user actions
-- Create cluttered interfaces where elements compete
-
-✅ **ALWAYS:**
-- Ask about purpose, tone, constraints, differentiation FIRST
-- Then commit BOLDLY to a distinctive aesthetic direction
-- Use unexpected, characterful typography choices
-- Create atmosphere: shadows, gradients, textures, grain (when intentional)
-- Dominant colors with sharp accents (not timid, evenly-distributed palettes)
-- Provide immediate feedback for interactions
-- Test with real devices
-- Validate accessibility (it enables creativity, not limits it)
-- Remember: Claude is capable of extraordinary creative work - don't hold back!
-
-## Version History
-
-- v2.0.0 (2025-11-22): Creative liberation update - bold aesthetics, shadows/gradients allowed, Design Thinking protocol
-- v1.0.0 (2025-10-18): Initial release with comprehensive UI/UX design guidance
-
-## References
-
-For additional context, see:
-- **Anthropic Frontend Aesthetics Cookbook**: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb
-- WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
-- Google Fonts: https://fonts.google.com/
-- Tailwind CSS Docs: https://tailwindcss.com/docs
-- Shadcn UI Components: https://ui.shadcn.com/
-
-**Progressive Disclosure Files:**
-- ACCESSIBILITY.md - Accessibility essentials (WCAG AA baseline)
-- MOTION-SPEC.md - Animation timing and easing
-- RESPONSIVE-DESIGN.md - Mobile-first breakpoints and patterns

.agents/skills/interactive-portfolio/SKILL.md

@@ -1,223 +0,0 @@
----
-name: interactive-portfolio
-description: "Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio."
-source: vibeship-spawner-skills (Apache 2.0)
----
-
-# Interactive Portfolio
-
-**Role**: Portfolio Experience Designer
-
-You know a portfolio isn't a resume - it's a first impression that needs
-to convert. You balance creativity with usability. You understand that
-hiring managers spend 30 seconds on each portfolio. You make those 30
-seconds count. You help people stand out without being gimmicky.
-
-## Capabilities
-
-- Portfolio architecture
-- Project showcase design
-- Interactive case studies
-- Personal branding for devs/designers
-- Contact conversion
-- Portfolio performance
-- Work presentation
-- Testimonial integration
-
-## Patterns
-
-### Portfolio Architecture
-
-Structure that works for portfolios
-
-**When to use**: When planning portfolio structure
-
-```javascript
-## Portfolio Architecture
-
-### The 30-Second Test
-In 30 seconds, visitors should know:
-1. Who you are
-2. What you do
-3. Your best work
-4. How to contact you
-
-### Essential Sections
-| Section | Purpose | Priority |
-|---------|---------|----------|
-| Hero | Hook + identity | Critical |
-| Work/Projects | Prove skills | Critical |
-| About | Personality + story | Important |
-| Contact | Convert interest | Critical |
-| Testimonials | Social proof | Nice to have |
-| Blog/Writing | Thought leadership | Optional |
-
-### Navigation Patterns
-```
-Option 1: Single page scroll
-- Best for: Designers, creatives
-- Works well with animations
-- Mobile friendly
-
-Option 2: Multi-page
-- Best for: Lots of projects
-- Individual case study pages
-- Better for SEO
-
-Option 3: Hybrid
-- Main sections on one page
-- Detailed case studies separate
-- Best of both worlds
-```
-
-### Hero Section Formula
-```
-[Your name]
-[What you do in one line]
-[One line that differentiates you]
-[CTA: View Work / Contact]
-```
-```
-
-### Project Showcase
-
-How to present work effectively
-
-**When to use**: When building project sections
-
-```javascript
-## Project Showcase
-
-### Project Card Elements
-| Element | Purpose |
-|---------|---------|
-| Thumbnail | Visual hook |
-| Title | What it is |
-| One-liner | What you did |
-| Tech/tags | Quick scan |
-| Results | Proof of impact |
-
-### Case Study Structure
-```
-1. Hero image/video
-2. Project overview (2-3 sentences)
-3. The challenge
-4. Your role
-5. Process highlights
-6. Key decisions
-7. Results/impact
-8. Learnings (optional)
-9. Links (live, GitHub, etc.)
-```
-
-### Showing Impact
-| Instead of | Write |
-|------------|-------|
-| "Built a website" | "Increased conversions 40%" |
-| "Designed UI" | "Reduced user drop-off 25%" |
-| "Developed features" | "Shipped to 50K users" |
-
-### Visual Presentation
-- Device mockups for web/mobile
-- Before/after comparisons
-- Process artifacts (wireframes, etc.)
-- Video walkthroughs for complex work
-- Hover effects for engagement
-```
-
-### Developer Portfolio Specifics
-
-What works for dev portfolios
-
-**When to use**: When building developer portfolio
-
-```javascript
-## Developer Portfolio
-
-### What Hiring Managers Look For
-1. Code quality (GitHub link)
-2. Real projects (not just tutorials)
-3. Problem-solving ability
-4. Communication skills
-5. Technical depth
-
-### Must-Haves
-- GitHub profile link (cleaned up)
-- Live project links
-- Tech stack for each project
-- Your specific contribution (for team projects)
-
-### Project Selection
-| Include | Avoid |
-|---------|-------|
-| Real problems solved | Tutorial clones |
-| Side projects with users | Incomplete projects |
-| Open source contributions | "Coming soon" |
-| Technical challenges | Basic CRUD apps |
-
-### Technical Showcase
-```javascript
-// Show code snippets that demonstrate:
-- Clean architecture decisions
-- Performance optimizations
-- Clever solutions
-- Testing approach
-```
-
-### Blog/Writing
-- Technical deep dives
-- Problem-solving stories
-- Learning journeys
-- Shows communication skills
-```
-
-## Anti-Patterns
-
-### ❌ Template Portfolio
-
-**Why bad**: Looks like everyone else.
-No memorable impression.
-Doesn't show creativity.
-Easy to forget.
-
-**Instead**: Add personal touches.
-Custom design elements.
-Unique project presentations.
-Your voice in the copy.
-
-### ❌ All Style No Substance
-
-**Why bad**: Fancy animations, weak projects.
-Style over substance.
-Hiring managers see through it.
-No proof of skills.
-
-**Instead**: Projects first, style second.
-Real work with real impact.
-Quality over quantity.
-Depth over breadth.
-
-### ❌ Resume Website
-
-**Why bad**: Boring, forgettable.
-Doesn't use the medium.
-No personality.
-Lists instead of stories.
-
-**Instead**: Show, don't tell.
-Visual case studies.
-Interactive elements.
-Personality throughout.
-
-## ⚠️ Sharp Edges
-
-| Issue | Severity | Solution |
-|-------|----------|----------|
-| Portfolio more complex than your actual work | medium | ## Right-Sizing Your Portfolio |
-| Portfolio looks great on desktop, broken on mobile | high | ## Mobile-First Portfolio |
-| Visitors don't know what to do next | medium | ## Portfolio CTAs |
-| Portfolio shows old or irrelevant work | medium | ## Portfolio Freshness |
-
-## Related Skills
-
-Works well with: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

.claude/settings.local.json

@@ -1,34 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(powershell -Command \"$lines = Get-Content ''4-vitals-monitor.html''; $before = $lines[0..1757]; $after = $lines[2028..\\($lines.Length-1\\)]; \\($before + $after\\) | Set-Content ''4-vitals-monitor.html'' -Encoding UTF8\")",
-      "Bash(powershell -Command \"$lines = Get-Content ''4-vitals-monitor.html''; $before = $lines[0..1757]; $after = $lines[2028..\\($lines.Length-1\\)]; $result = $before + $after; $result | Set-Content ''4-vitals-monitor.html'' -Encoding UTF8\")",
-      "Bash(powershell -ExecutionPolicy Bypass -File:*)",
-      "Bash(del \"C:\\\\Users\\\\Andy\\\\Ralph Local\\\\Tasks\\\\cv-4-vitals-monitor\\\\remove-lines.ps1\")",
-      "Bash(start \"\" \"C:\\\\Users\\\\Andy\\\\Ralph Local\\\\Tasks\\\\cv-4-vitals-monitor\\\\4-vitals-monitor.html\")",
-      "Bash(npx skills find:*)",
-      "WebSearch",
-      "Bash(ls \"C:\\\\Users\\\\Andy\\\\Ralph Local\\\\Tasks\\\\New CV website\\\\designs\"\" 2>nul || echo \"Directory does not exist \")",
-      "Bash(npm run typecheck:*)",
-      "Bash(npm run dev:*)",
-      "Bash(npm run build:*)",
-      "Bash(dir:*)",
-      "mcp__playwright__browser_snapshot",
-      "mcp__playwright__browser_navigate",
-      "mcp__playwright__browser_take_screenshot",
-      "Bash(npm run lint:*)",
-      "Bash(curl:*)",
-      "mcp__playwright__browser_click",
-      "mcp__playwright__browser_wait_for",
-      "mcp__playwright__browser_evaluate",
-      "Bash(git add:*)",
-      "Bash(git commit -m \"$\\(cat <<''EOF''\nTask 4: Rebuild PatientBanner with premium fonts, tooltip, and animations\n\n- Replace font-inter with font-ui \\(Elvaro Grotesque\\) throughout banner\n- Add custom NHSNumberWithTooltip with Framer Motion animated reveal\n- Add AnimatePresence crossfade between full/condensed banner states\n- Animate mobile overflow menu enter/exit\n- Add SkipButton to App.tsx for boot/ECG phase skip\n- Add shadow-pmr-banner, focus ring styles, prefers-reduced-motion support\n- Fix mobile banner to use patient data instead of hardcoded values\n\nCo-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>\nEOF\n\\)\")",
-      "Bash(git commit:*)",
-      "Bash(ls:*)",
-      "Bash(tasklist:*)",
-      "Bash(npx -y serve -l 3333 .)",
-      "Bash(npx serve:*)",
-      "Bash(timeout /t 3 /nobreak)"
-    ]
-  }
-}

.claude/skills/bencium-innovative-ux-designer/ACCESSIBILITY.md

@@ -1,111 +0,0 @@
-# Accessibility Essentials
-
-Accessibility enables creativity - it's a foundation, not a limitation. WCAG 2.1 AA compliance.
-
-## Core Principles (POUR)
-
-- **Perceivable**: Content must be perceivable (alt text, contrast, captions)
-- **Operable**: UI must be keyboard/touch accessible
-- **Understandable**: Clear, predictable behavior
-- **Robust**: Works with assistive technologies
-
-## Contrast Requirements
-
-| Element | Minimum Ratio |
-|---------|---------------|
-| Normal text | 4.5:1 |
-| Large text (18pt+) | 3:1 |
-| UI components | 3:1 |
-
-**Tools**: Chrome DevTools Accessibility tab, WebAIM Contrast Checker
-
-## Keyboard Navigation
-
-```tsx
-// All interactive elements need focus states
-<button className="focus:ring-4 focus:ring-blue-500 focus:outline-none">
-  Accessible
-</button>
-
-// Custom elements need tabindex and key handlers
-<div
-  role="button"
-  tabIndex={0}
-  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleClick()}
->
-  Custom Button
-</div>
-```
-
-**Essentials:**
-- Tab through entire interface
-- Enter/Space activates elements
-- Escape closes modals
-- Visible focus indicators always
-
-## Essential ARIA
-
-```tsx
-// Buttons without text
-<button aria-label="Close dialog"><X /></button>
-
-// Expandable elements
-<button aria-expanded={isOpen} aria-controls="menu">Menu</button>
-
-// Live regions for dynamic content
-<div role="status" aria-live="polite">{statusMessage}</div>
-<div role="alert" aria-live="assertive">{errorMessage}</div>
-
-// Form errors
-<input aria-invalid={hasError} aria-describedby="error-msg" />
-{hasError && <p id="error-msg" role="alert">Error text</p>}
-```
-
-## Semantic HTML
-
-```tsx
-// Use semantic elements, not divs
-<header><nav>...</nav></header>
-<main><article><h1>...</h1></article></main>
-<footer>...</footer>
-
-// Heading hierarchy (never skip levels)
-<h1>Page Title</h1>
-  <h2>Section</h2>
-    <h3>Subsection</h3>
-```
-
-## Touch Targets
-
-- Minimum **44x44px** for all interactive elements
-- Adequate spacing between targets
-- `touch-manipulation` CSS for responsive touch
-
-## Screen Reader Content
-
-```tsx
-// Hidden but announced
-<span className="sr-only">Additional context</span>
-
-// Skip link
-<a href="#main" className="sr-only focus:not-sr-only">
-  Skip to main content
-</a>
-```
-
-## Quick Checklist
-
-- [ ] Keyboard: Can tab through everything
-- [ ] Focus: Visible focus indicators
-- [ ] Contrast: 4.5:1 for text
-- [ ] Alt text: All images have appropriate alt
-- [ ] Headings: Logical h1-h6 hierarchy
-- [ ] Forms: Labels associated with inputs
-- [ ] Errors: Announced to screen readers
-- [ ] Touch: 44px minimum targets
-
-## Resources
-
-- [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
-- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)

.claude/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md

@@ -1,577 +0,0 @@
-# Design System Template
-
-Meta-framework for understanding what's fixed, project-specific, and adaptable in your design system.
-
-## Purpose
-
-This template helps you distinguish between:
-- **Fixed Elements**: Universal rules that never change
-- **Project-Specific Elements**: Filled in for each project based on brand
-- **Adaptable Elements**: Context-dependent implementations
-
----
-
-## I. FIXED ELEMENTS
-
-These foundations remain consistent across all projects, regardless of brand or context.
-
-### 1. Spacing Scale
-
-**Fixed System:**
-```
-4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
-```
-
-**Usage:**
-- Margins, padding, gaps between elements
-- Mathematical relationships ensure visual harmony
-- Use multipliers of base unit (4px)
-
-**Why Fixed:**
-Consistent spacing creates visual rhythm regardless of brand personality.
-
-### 2. Grid System
-
-**Fixed Structure:**
-- **12-column grid** for most layouts (divisible by 2, 3, 4, 6)
-- **16-column grid** for data-heavy interfaces
-- **Gutters**: 16px (mobile), 24px (tablet), 32px (desktop)
-
-**Why Fixed:**
-Grid provides structural order. Brand personality shows through color, typography, content—not grid structure.
-
-### 3. Accessibility Standards
-
-**Fixed Requirements:**
-- **WCAG 2.1 AA** compliance minimum
-- **Contrast**: 4.5:1 for normal text, 3:1 for large text
-- **Touch targets**: Minimum 44×44px
-- **Keyboard navigation**: All interactive elements accessible
-- **Screen reader**: Semantic HTML, ARIA labels where needed
-
-**Why Fixed:**
-Accessibility is not negotiable. It's a baseline requirement for ethical, legal, and usable products.
-
-### 4. Typography Hierarchy Logic
-
-**Fixed Structure:**
-- **Mathematical scaling**: 1.25x (major third) or 1.333x (perfect fourth)
-- **Hierarchy levels**: Display → H1 → H2 → H3 → Body → Small → Caption
-- **Line height**: 1.5x for body text, 1.2-1.3x for headlines
-- **Line length**: 45-75 characters optimal
-
-**Why Fixed:**
-Mathematical relationships create predictable, harmonious hierarchy. Specific fonts change, but the logic doesn't.
-
-### 5. Component Architecture
-
-**Fixed Patterns:**
-- **Button states**: Default, Hover, Active, Focus, Disabled
-- **Form structure**: Label above input, error below, helper text optional
-- **Modal pattern**: Overlay + centered content + close mechanism
-- **Card structure**: Container → Header → Body → Footer (optional)
-
-**Why Fixed:**
-Users expect consistent component behavior. Architecture is fixed; appearance is project-specific.
-
-### 6. Animation Timing Framework
-
-**Fixed Physics Profiles:**
-- **Lightweight** (icons, chips): 150ms
-- **Standard** (cards, panels): 300ms
-- **Weighty** (modals, pages): 500ms
-
-**Fixed Easing:**
-- **Ease-out**: Entrances (fast start, slow end)
-- **Ease-in**: Exits (slow start, fast end)
-- **Ease-in-out**: Transitions (smooth both ends)
-
-**Why Fixed:**
-Natural physics feel consistent across brands. Duration and easing create that feeling.
-
----
-
-## II. PROJECT-SPECIFIC ELEMENTS
-
-Fill in these for each project based on brand personality and purpose.
-
-### 1. Brand Color System
-
-**Template Structure:**
-
-```
-NEUTRALS (4-5 colors):
-- Background lightest: _______ (e.g., slate-50 or warm-white)
-- Surface: _______ (e.g., slate-100)
-- Border/divider: _______ (e.g., slate-300)
-- Text secondary: _______ (e.g., slate-600)
-- Text primary: _______ (e.g., slate-900)
-
-ACCENTS (1-3 colors):
-- Primary (main CTA): _______ (e.g., teal-500)
-- Secondary (alternative action): _______ (optional)
-- Status colors:
-  - Success: _______ (green-ish)
-  - Warning: _______ (amber-ish)
-  - Error: _______ (red-ish)
-  - Info: _______ (blue-ish)
-```
-
-**Questions to Answer:**
-- What emotion should the brand evoke? (Trust, excitement, calm, urgency)
-- Warm or cool neutrals?
-- Conservative or bold accents?
-
-**Examples:**
-
-**Project A: Fintech App**
-```
-Neutrals: Cool greys (slate-50 → slate-900)
-Primary: Deep blue (#0A2463) – trust, professionalism
-Success: Muted green (#10B981)
-Why: Financial products need trust, not playfulness
-```
-
-**Project B: Creative Community**
-```
-Neutrals: Warm greys with beige undertones
-Primary: Coral (#FF6B6B) – energy, creativity
-Success: Teal (#06D6A0) – fresh, unexpected
-Why: Creative spaces should feel inviting, not corporate
-```
-
-**Project C: Healthcare Platform**
-```
-Neutrals: Pure greys (minimal color temperature)
-Primary: Soft blue (#4A90E2) – calm, clinical
-Success: Medical green (#38A169)
-Why: Healthcare needs clarity and calm, not distraction
-```
-
-### 2. Typography Pairing
-
-**Template:**
-
-```
-HEADLINE FONT: _______
-- Weight: _______ (e.g., Bold 700)
-- Use case: H1, H2, display text
-- Personality: _______ (geometric/humanist/serif/etc.)
-
-BODY FONT: _______
-- Weight: _______ (e.g., Regular 400, Medium 500)
-- Use case: Paragraphs, UI text
-- Personality: _______ (neutral/readable/efficient)
-
-OPTIONAL ACCENT FONT: _______
-- Weight: _______
-- Use case: _______ (special headlines, callouts)
-```
-
-**Pairing Logic:**
-- Serif + Sans-serif (classic, editorial)
-- Geometric + Humanist (modern + warm)
-- Display + System (distinctive + efficient)
-
-**Examples:**
-
-**Project A: Editorial Platform**
-```
-Headline: Playfair Display (Serif, Bold 700)
-Body: Inter (Sans-serif, Regular 400)
-Why: Serif headlines = trustworthy, editorial feel
-```
-
-**Project B: Tech Startup**
-```
-Headline: DM Sans (Sans-serif, Bold 700)
-Body: DM Sans (Regular 400, Medium 500)
-Why: Single-font system = modern, efficient, cohesive
-```
-
-**Project C: Luxury Brand**
-```
-Headline: Cormorant Garamond (Serif, Light 300)
-Body: Lato (Sans-serif, Regular 400)
-Why: Elegant serif + readable sans = sophisticated
-```
-
-### 3. Tone of Voice
-
-**Template:**
-
-```
-BRAND PERSONALITY:
-- Formal ↔ Casual: _______ (1-10 scale)
-- Professional ↔ Friendly: _______ (1-10 scale)
-- Serious ↔ Playful: _______ (1-10 scale)
-- Authoritative ↔ Conversational: _______ (1-10 scale)
-
-MICROCOPY EXAMPLES:
-- Button label (submit form): _______
-- Error message (invalid email): _______
-- Success message (saved): _______
-- Empty state: _______
-
-ANIMATION PERSONALITY:
-- Speed: _______ (quick/moderate/slow)
-- Feel: _______ (precise/smooth/bouncy)
-```
-
-**Examples:**
-
-**Project A: Banking App**
-```
-Personality: Formal (8), Professional (9), Serious (8)
-Button: "Submit Application"
-Error: "Email address format is invalid"
-Success: "Application submitted successfully"
-Animation: Quick (precise, efficient, no-nonsense)
-```
-
-**Project B: Social App**
-```
-Personality: Casual (8), Friendly (9), Playful (7)
-Button: "Let's go!"
-Error: "Hmm, that email doesn't look right"
-Success: "Nice! You're all set 🎉"
-Animation: Moderate (smooth, friendly bounce)
-```
-
-### 4. Animation Speed & Feel
-
-**Template:**
-
-```
-SPEED PREFERENCE:
-- UI interactions: _______ (100-150ms / 150-200ms / 200-300ms)
-- State changes: _______ (200ms / 300ms / 400ms)
-- Page transitions: _______ (300ms / 500ms / 700ms)
-
-ANIMATION STYLE:
-- Easing preference: _______ (sharp / standard / bouncy)
-- Movement type: _______ (minimal / smooth / expressive)
-```
-
-**Examples:**
-
-**Project A: Trading Platform**
-```
-Speed: Fast (100ms UI, 200ms states, 300ms pages)
-Style: Sharp easing, minimal movement
-Why: Traders need speed, not distraction
-```
-
-**Project B: Wellness App**
-```
-Speed: Slow (200ms UI, 400ms states, 500ms pages)
-Style: Smooth easing, gentle movement
-Why: Calm, relaxing experience matches brand
-```
-
----
-
-## III. ADAPTABLE ELEMENTS
-
-Context-dependent implementations that vary based on use case.
-
-### 1. Component Variations
-
-**Button Variants:**
-- **Primary**: Full background color (high emphasis)
-- **Secondary**: Outline only (medium emphasis)
-- **Tertiary**: Text only (low emphasis)
-- **Destructive**: Red-ish (danger actions)
-- **Ghost**: Minimal (navigation, toolbars)
-
-**Adaptation Rules:**
-- Primary: Main CTA, one per screen section
-- Secondary: Alternative actions
-- Tertiary: Less important actions, multiple allowed
-- Use brand colors, but hierarchy logic is fixed
-
-### 2. Responsive Breakpoints
-
-**Fixed Ranges:**
-- XS: 0-479px (small phones)
-- SM: 480-767px (large phones)
-- MD: 768-1023px (tablets)
-- LG: 1024-1439px (laptops)
-- XL: 1440px+ (desktop)
-
-**Adaptable Implementations:**
-
-**Simple Content Site:**
-```
-XS-SM: Single column
-MD: 2 columns
-LG-XL: 3 columns max
-Why: Content-focused, don't overwhelm
-```
-
-**Dashboard/Data App:**
-```
-XS: Collapsed, cards stack
-SM: Simplified sidebar
-MD: Full sidebar + main content
-LG-XL: Sidebar + main + right panel
-Why: Data apps need more screen real estate
-```
-
-### 3. Dark Mode Palette
-
-**Adaptation Strategy:**
-
-Not a simple inversion. Dark mode needs adjusted contrast:
-
-**Light Mode:**
-```
-Background: #FFFFFF (white)
-Text: #0F172A (slate-900) → 21:1 contrast
-```
-
-**Dark Mode (Adapted):**
-```
-Background: #0F172A (slate-900)
-Text: #E2E8F0 (slate-200) → 15.8:1 contrast (still AA, but softer)
-```
-
-**Why Adapt:**
-Pure white on pure black is too harsh. Dark mode needs slightly lower contrast for eye comfort.
-
-### 4. Loading States
-
-**Context-Dependent:**
-
-**Fast operations (<500ms):**
-- No loading indicator (feels instant)
-
-**Medium operations (500ms-2s):**
-- Spinner or skeleton screen
-
-**Long operations (>2s):**
-- Progress bar with percentage
-- Or: Skeleton + estimated time
-
-**Interactive Operations:**
-- Button shows spinner inside (don't disable, show state)
-
-### 5. Error Handling Strategy
-
-**Context-Dependent:**
-
-**Form Errors:**
-```
-Validate: On blur (after user leaves field)
-Display: Inline below field
-Recovery: Clear error on fix
-```
-
-**API Errors:**
-```
-Transient (network): Show retry button
-Permanent (404): Show helpful message + next steps
-Critical (500): Contact support option
-```
-
-**Data Errors:**
-```
-Missing: Show empty state with action
-Corrupt: Show error boundary with reload
-Invalid: Highlight + explain what's wrong
-```
-
----
-
-## DECISION TREE
-
-When implementing a feature, ask:
-
-### Is this...
-
-**FIXED?**
-- Does it affect structure, accessibility, or universal UX?
-- Examples: Spacing scale, grid, contrast ratios, component architecture
-- **Action**: Use the fixed system, no variation
-
-**PROJECT-SPECIFIC?**
-- Does it express brand personality or purpose?
-- Examples: Colors, typography, tone of voice, animation feel
-- **Action**: Fill in the template for this project
-
-**ADAPTABLE?**
-- Does it depend on context, content, or use case?
-- Examples: Component variants, responsive behavior, error handling
-- **Action**: Choose appropriate variation based on context
-
----
-
-## EXAMPLE: Implementing a "Submit" Button
-
-### Fixed Elements (Always the same):
-- Touch target: 44px minimum height
-- Padding: 16px horizontal (from spacing scale)
-- States: Default, Hover, Active, Focus, Disabled
-- Animation: 150ms ease-out (lightweight profile)
-
-### Project-Specific (Filled per project):
-- **Project A (Bank)**: Dark blue background, white text, "Submit Application"
-- **Project B (Social)**: Coral background, white text, "Let's Go!"
-- **Project C (Healthcare)**: Soft blue background, white text, "Continue"
-
-### Adaptable (Context-dependent):
-- **Form context**: Primary button (full color)
-- **Toolbar context**: Ghost button (text only)
-- **Danger context**: Destructive variant (red-ish)
-
----
-
-## VALIDATION CHECKLIST
-
-Before finalizing a design, check:
-
-### Fixed Elements
-- [ ] Uses spacing scale (4/8/12/16/24/32/48/64/96px)
-- [ ] Follows grid system (12 or 16 columns)
-- [ ] Meets WCAG AA contrast (4.5:1 normal, 3:1 large)
-- [ ] Touch targets ≥ 44px
-- [ ] Typography follows mathematical scale
-- [ ] Components follow standard architecture
-
-### Project-Specific Elements
-- [ ] Brand colors filled in and intentional
-- [ ] Typography pairing chosen and justified
-- [ ] Tone of voice defined and consistent
-- [ ] Animation speed matches brand personality
-
-### Adaptable Elements
-- [ ] Component variants appropriate for context
-- [ ] Responsive behavior fits content type
-- [ ] Loading states match operation duration
-- [ ] Error handling fits error type
-
----
-
-## PROJECT KICKOFF TEMPLATE
-
-Use this to start a new project:
-
-```
-PROJECT NAME: _______________________
-PURPOSE: ____________________________
-
-BRAND PERSONALITY:
-- Primary emotion: _______
-- Warm or cool: _______
-- Formal or casual: _______
-- Conservative or bold: _______
-
-COLORS (fill the template):
-- Neutral base: _______
-- Primary accent: _______
-- Status colors: _______ / _______ / _______
-
-TYPOGRAPHY (fill the template):
-- Headline font: _______
-- Body font: _______
-- Pairing rationale: _______
-
-TONE:
-- Button labels style: _______
-- Error message style: _______
-- Success message style: _______
-
-ANIMATION:
-- Speed preference: _______ (fast/moderate/slow)
-- Feel preference: _______ (sharp/smooth/bouncy)
-
-TARGET DEVICES:
-- Primary: _______ (mobile/desktop/both)
-- Secondary: _______
-```
-
----
-
-## MAINTAINING CONSISTENCY
-
-### Documentation
-- Keep this template updated as system evolves
-- Document WHY choices were made, not just WHAT
-
-### Communication
-- Share with designers: "Here's what varies vs. what's fixed"
-- Share with developers: "Here are the design tokens"
-
-### Tooling
-- Use CSS variables for project-specific values
-- Use Tailwind config for spacing scale
-- Use design tokens in Figma/Storybook
-
-### Reviews
-- Audit: Does new work follow fixed elements?
-- Validate: Are project-specific elements intentional?
-- Question: Are adaptations justified by context?
-
----
-
-## EXAMPLES OF COMPLETE SYSTEMS
-
-### System A: B2B SaaS (Conservative)
-
-**Fixed**: Standard spacing, 12-col grid, WCAG AA, major third type scale
-**Project-Specific**:
-- Colors: Cool greys + corporate blue
-- Typography: DM Sans (headlines + body)
-- Tone: Professional, formal
-- Animation: Quick, precise (150ms)
-**Adaptable**:
-- Dashboard gets multi-panel layout
-- Forms are extensive (use progressive disclosure)
-- Errors show detailed technical info
-
-### System B: Consumer Social App (Playful)
-
-**Fixed**: Same spacing/grid/accessibility/type logic
-**Project-Specific**:
-- Colors: Warm greys + vibrant coral
-- Typography: Poppins (headlines) + Inter (body)
-- Tone: Casual, friendly, playful
-- Animation: Moderate, bouncy (200ms)
-**Adaptable**:
-- Mobile-first (most users on phones)
-- Forms are minimal (progressive profiling)
-- Errors are friendly, not technical
-
-### System C: Healthcare Platform (Clinical)
-
-**Fixed**: Same foundational structure
-**Project-Specific**:
-- Colors: Pure greys + medical blue
-- Typography: System fonts (SF Pro / Segoe)
-- Tone: Clear, authoritative, calm
-- Animation: Slow, smooth (300ms)
-**Adaptable**:
-- Desktop-first (clinical use at workstations)
-- Forms are complex (HIPAA compliance)
-- Errors are precise with next steps
-
----
-
-## KEY TAKEAWAY
-
-**The system flexibility framework lets you:**
-- Maintain consistency (fixed elements)
-- Express brand personality (project-specific)
-- Adapt to context (adaptable elements)
-
-**Without this framework:**
-- Designers reinvent spacing every project
-- Components feel inconsistent across products
-- Brand personality overrides accessibility
-- Context-blind implementations feel wrong
-
-**With this framework:**
-- Speed: Start from proven foundations
-- Consistency: Fixed elements guarantee it
-- Flexibility: Express unique brand identity
-- Context: Adapt without breaking system

.claude/skills/bencium-innovative-ux-designer/MOTION-SPEC.md

@@ -1,72 +0,0 @@
-# Motion Specification
-
-Motion should surprise and delight while serving function. Animation is a creative tool.
-
-## Easing Curves
-
-| Easing | CSS | Use For |
-|--------|-----|---------|
-| **Ease-out** | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Entrances, appearing |
-| **Ease-in** | `cubic-bezier(0.4, 0.0, 1, 1)` | Exits, disappearing |
-| **Ease-in-out** | `cubic-bezier(0.4, 0.0, 0.2, 1)` | State changes, transforms |
-| **Spring** | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` | Playful, attention-grabbing |
-| **Linear** | `linear` | Spinners, continuous loops |
-
-## Duration by Element Weight
-
-| Weight | Duration | Examples |
-|--------|----------|----------|
-| **Lightweight** | 150ms | Icons, badges, chips |
-| **Standard** | 300ms | Cards, panels, list items |
-| **Weighty** | 500ms | Modals, page transitions |
-
-## Duration by Interaction
-
-| Interaction | Duration |
-|-------------|----------|
-| Button press | 100ms |
-| Hover state | 150ms |
-| Tooltip appear | 200ms |
-| Tab switch | 250ms |
-| Modal open | 300ms |
-| Page transition | 400ms |
-
-## Common Patterns
-
-```tsx
-// Hover transition (CSS)
-<button className="transition-colors duration-150 ease-out hover:bg-blue-700">
-
-// Fade + slide (Framer Motion)
-<motion.div
-  initial={{ opacity: 0, y: 20 }}
-  animate={{ opacity: 1, y: 0 }}
-  transition={{ duration: 0.3, ease: "easeOut" }}
-/>
-
-// Stagger children
-<motion.ul variants={{ visible: { transition: { staggerChildren: 0.1 } } }}>
-  <motion.li variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} />
-</motion.ul>
-```
-
-## Performance Rules
-
-- Only animate `transform` and `opacity` (GPU-accelerated)
-- Avoid animating `width`, `height`, `margin`, `padding`
-- Keep durations under 500ms for UI interactions
-- Respect `prefers-reduced-motion`:
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-```
-
-## Resources
-
-- [Framer Motion](https://www.framer.com/motion/)
-- [CSS Easing Functions](https://easings.net/)

.claude/skills/bencium-innovative-ux-designer/RESPONSIVE-DESIGN.md

@@ -1,90 +0,0 @@
-# Responsive Design Essentials
-
-Mobile-first approach: start with mobile, progressively enhance for larger screens.
-
-## Breakpoints
-
-| Range | Pixels | Devices | Strategy |
-|-------|--------|---------|----------|
-| **XS** | 0-479px | Small phones | Single column, stacked nav, 44px touch targets |
-| **SM** | 480-767px | Large phones | Single column, bottom nav, simplified UI |
-| **MD** | 768-1023px | Tablets | 2 columns possible, sidebar nav |
-| **LG** | 1024-1439px | Laptops | Multi-column, full nav, desktop UI |
-| **XL** | 1440px+ | Desktop | Max-width containers, multi-panel layouts |
-
-## Tailwind Responsive
-
-```tsx
-// Mobile-first: base styles, then scale up
-<div className="
-  w-full          // mobile: full width
-  sm:w-1/2        // 480px+: half
-  md:w-1/3        // 768px+: third
-  lg:w-1/4        // 1024px+: quarter
-">
-
-// Responsive grid
-<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-
-// Responsive typography
-<h1 className="text-3xl md:text-4xl lg:text-5xl">
-
-// Show/hide by breakpoint
-<div className="block md:hidden">Mobile only</div>
-<div className="hidden md:block">Desktop only</div>
-```
-
-## Fluid Typography
-
-```css
-h1 { font-size: clamp(2rem, 5vw, 4rem); }
-p { font-size: clamp(1rem, 2.5vw, 1.25rem); }
-```
-
-## Touch Targets
-
-- Minimum **44x44px** for all interactive elements
-- Use `touch-manipulation` to prevent 300ms tap delay
-- Adequate spacing between targets
-
-```tsx
-<button className="min-w-[44px] min-h-[44px] touch-manipulation">
-```
-
-## Mobile Simplification
-
-| Desktop | Mobile |
-|---------|--------|
-| Full nav bar | Hamburger menu |
-| Side-by-side fields | Stacked fields |
-| Multi-column grid | Single column |
-| Inline buttons | Fixed bottom bar |
-| Data table | Collapsed cards |
-| Visible sidebar | Hidden/collapsible |
-
-## Images
-
-```tsx
-// Responsive images
-<img
-  srcSet="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
-  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-  loading="lazy"
-/>
-
-// Next.js
-<Image src="/hero.jpg" width={1200} height={600} priority className="w-full h-auto" />
-```
-
-## Testing
-
-Test at these widths:
-- 375px (iPhone SE)
-- 390px (iPhone 14)
-- 768px (iPad)
-- 1024px (iPad Pro)
-- 1280px+ (Desktop)
-
-## Resources
-
-- [Tailwind Responsive](https://tailwindcss.com/docs/responsive-design)

.claude/skills/bencium-innovative-ux-designer/SKILL.md

@@ -1,718 +0,0 @@
----
-name: bencium-innovative-ux-designer
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-metadata:
-  version: 2.0.0
----
-
-# Innovative UX Designer
-
-Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
-
-This skill emphasizes **bold creative commitment**, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional and accessible.
-
-## Core Philosophy
-
-**CRITICAL: Design Thinking Protocol**
-
-Before coding, **ASK to understand context**, then **COMMIT BOLDLY** to a distinctive direction:
-
-### Questions to Ask First
-1. **Purpose**: What problem does this interface solve? Who uses it?
-2. **Tone**: What aesthetic extreme fits? (see Tone Options below)
-3. **Constraints**: Technical requirements (framework, performance, accessibility)?
-4. **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-### Tone Options (Pick an Extreme)
-Choose a clear aesthetic direction and execute with precision:
-- **Brutally minimal** - stripped to essence, bold typography, vast whitespace
-- **Maximalist chaos** - layered, dense, visually rich, controlled disorder
-- **Retro-futuristic** - vintage meets sci-fi, nostalgic tech aesthetics
-- **Organic/natural** - soft edges, earthy colors, nature-inspired textures
-- **Luxury/refined** - elegant spacing, premium typography, subtle details
-- **Playful/toy-like** - bright colors, rounded shapes, delightful interactions
-- **Editorial/magazine** - strong typography hierarchy, asymmetric layouts
-- **Brutalist/raw** - exposed structure, harsh contrasts, intentionally rough
-- **Art deco/geometric** - bold patterns, metallic accents, symmetric elegance
-- **Soft/pastel** - gentle gradients, muted tones, calming atmosphere
-- **Industrial/utilitarian** - functional, no-nonsense, mechanical precision
-
-### After Getting Context
-- **Commit fully** to the chosen direction - no half measures
-- Present 2-3 alternative approaches with trade-offs
-- Then implement with precision: production-grade, visually striking, memorable
-
-## Foundational Design Principles
-
-### Stand Out From Generic Patterns
-
-**NEVER Use These AI-Generated Aesthetics:**
-- **Fonts**: Inter, Roboto, Arial, system fonts as primary choice, Space Grotesk (overused by AI)
-- **Colors**: Generic SaaS blue (#3B82F6), purple gradients on white backgrounds
-- **Patterns**: Cookie-cutter layouts, predictable component arrangements
-- **Effects**: Glass morphism, Apple design mimicry, liquid/blob backgrounds
-- **Overall**: Anything that looks "Claude-generated" or machine-made
-
-**Instead, Create Atmosphere:**
-- Suggest photography, patterns, textures over flat solid colors
-- Apply gradient meshes, noise textures, geometric patterns
-- Use layered transparencies, dramatic shadows, decorative borders
-- Consider custom cursors, grain overlays, contextual effects
-- Think beyond typical patterns - you can step off the written path
-
-**Draw Inspiration From:**
-- Modern landing pages (Perplexity, Comet Browser, Dia Browser)
-- Framer templates and their innovative approaches
-- Leading brand design studios
-- Historical design movements (Bauhaus, Otl Aicher, Braun) - but as inspiration, not imitation
-- Beautiful background animations (CSS, SVG) - slow, looping, subtle
-
-**Visual Interest Strategies:**
-- Unique color pairs that aren't typical
-- Animation effects that feel fresh
-- Background patterns that add depth without distraction
-- Typography combinations that create contrast
-- Visual assets that tell a story
-
-### Core Design Philosophy
-
-1. **Simplicity Through Reduction**
-   - Identify the essential purpose and eliminate distractions
-   - Begin with complexity, then deliberately remove until reaching the simplest effective solution
-   - Every element must justify its existence
-
-2. **Material Honesty**
-   - Digital materials have unique properties - embrace them
-   - Buttons communicate affordance through color, spacing, typography, AND shadows when intentional
-   - Cards can use borders, background differentiation, OR dramatic shadows for depth
-   - Animations follow real-world physics principles adapted to digital responsiveness
-
-   **Examples:**
-   - Clickable: Use distinct colors, hover state changes, cursor feedback, subtle lift effects
-   - Containers: Use borders, background shifts, generous padding, OR shadow depth
-   - Hierarchy: Use scale, weight, spacing, AND elevation when it serves the aesthetic
-
-3. **Functional Layering**
-   - Create hierarchy through typography scale, color contrast, and spatial relationships
-   - Layer information conceptually (primary → secondary → tertiary)
-   - Use shadows and gradients INTENTIONALLY when they serve the aesthetic direction
-   - Embrace functional depth: modals over content, dropdowns over UI
-   - Avoid: glass morphism, Apple mimicry (but shadows/gradients are tools, not enemies)
-
-4. **Obsessive Detail**
-   - Consider every pixel, interaction, and transition
-   - Excellence emerges from hundreds of small, intentional decisions
-   - Balance: Details should serve simplicity, not complexity
-   - When detail conflicts with clarity, clarity wins
-
-5. **Coherent Design Language**
-   - Every element should visually communicate its function
-   - Elements should feel part of a unified system
-   - Nothing should feel arbitrary
-
-6. **Invisibility of Technology**
-   - The best technology disappears
-   - Users should focus on content and goals, not on understanding the interface
-
-### What This Means in Practice
-
-**Color Usage:**
-- Base palette: 4-5 neutral shades (backgrounds, borders, text)
-- Accent palette: 1-3 bold colors (CTAs, status, emphasis)
-- Neutrals are slightly desaturated, warm or cool based on brand intent
-- Accents are saturated enough to create clear contrast
-
-**Typography:**
-- Headlines: Emotional, attention-grabbing, UNEXPECTED (personality over pure legibility)
-- Body/UI: Functional, highly legible (clarity over expression)
-- 2-3 typefaces maximum, but make them CHARACTERFUL and distinctive
-- Clear mathematical scale (e.g., 1.25x between sizes)
-- NEVER default to Inter, Roboto, or Space Grotesk - find unique fonts
-
-**Animation:**
-- Purposeful: Guides attention, establishes relationships, provides feedback
-- Subtle: Felt rather than seen (100-300ms for most interactions)
-- Physics-informed: Natural easing, appropriate mass/momentum
-
-**Spacing:**
-- Generous negative space creates clarity and breathing room
-- Mathematical relationships (e.g., 4px base, 8/16/24/32/48px scale)
-- Consistent application creates visual rhythm
-
-### Design Decision Checklist
-
-Before presenting any design, verify:
-
-1. **Purpose**: Does every element serve a clear function?
-2. **Hierarchy**: Is visual importance aligned with content importance?
-3. **Consistency**: Do similar elements look and behave similarly?
-4. **Accessibility**: Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav)
-5. **Responsiveness**: Does it work on mobile, tablet, desktop?
-6. **Uniqueness**: Does this break from generic SaaS patterns?
-7. **Approval**: Have I asked before implementing colors, fonts, sizes, layouts?
-
-**Design System Framework:**
-
-For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, think of a design system.
-
-## Visual Design Standards
-
-### Color & Contrast
-
-**Color System Architecture:**
-
-Every interface needs two color roles:
-
-1. **Base/Neutral Palette (4-5 colors):**
-   - Backgrounds (lightest)
-   - Surface colors (cards, inputs)
-   - Borders and dividers
-   - Text (darkest)
-   - Use slightly desaturated, warm or cool greys based on brand
-
-2. **Accent Palette (1-3 colors):**
-   - Primary action (CTA buttons)
-   - Status indicators (success, warning, error, info)
-   - Focus/hover states
-   - Use saturated colors for clear contrast against neutrals
-
-**Palette Structure Example:**
-```
-Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
-Accents: teal-500 (primary), amber-500 (warning), red-500 (error)
-```
-
-**Color Application Rules:**
-
-- **Backgrounds**: Lightest neutral (slate-50 or white)
-- **Text**: Darkest neutral for primary text (slate-900), mid-tone for secondary (slate-600)
-- **Buttons (primary)**: Accent color with white text
-- **Buttons (secondary)**: Neutral with border and dark text
-- **Status indicators**: Specific accent (green=success, red=error, amber=warning, blue=info)
-- **Interactive states**:
-  - Hover: Darken by 10-15% or shift hue slightly
-  - Focus: Use ring/outline in accent color
-  - Disabled: Reduce opacity to 40-50% and remove hover effects
-
-**Color Relationships:**
-
-Choose warm or cool intentionally based on brand:
-- **Warm greys** (beige/brown undertones): Organic, approachable, trustworthy
-- **Cool greys** (blue undertones): Modern, tech-forward, professional
-
-Accent colors should have clear contrast with both:
-- Light backgrounds (for buttons on white)
-- Dark text (if used as backgrounds for white text)
-
-**Intentional Color Usage:**
-- Every color must serve a purpose (hierarchy, function, status, or action)
-- Avoid decorative colors that don't communicate meaning
-- Maintain consistency: same color = same meaning throughout
-
-**Accessibility:**
-- Ensure sufficient contrast for color-blind users
-- Follow WCAG 2.1 AA: minimum 4.5:1 for normal text, 3:1 for large text
-- Don't rely on color alone to convey information (add icons or labels)
-
-**Unique Color Strategy:**
-
-To stand out from generic patterns:
-- NEVER use default SaaS blue (#3B82F6) or purple gradients on white
-- Use unexpected neutrals: warm greys, soft off-whites, deep charcoals, rich blacks
-- Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate
-- Dominant colors with SHARP accents outperform timid, evenly-distributed palettes
-- Test combinations against "does this look AI-generated?" filter
-- Vary between light and dark themes - no design should look the same
-
-**Create Atmosphere with Color:**
-- Gradient meshes for depth and visual interest
-- Noise textures and grain overlays for tactile feel
-- Layered transparencies for dimension
-- Dramatic shadows for emphasis and drama
-
-### Typography Excellence
-
-**Typography Philosophy:**
-
-Typography is a primary design element that conveys personality and hierarchy.
-
-**Functional vs Emotional Typography:**
-- **Headlines/Display**: Prioritize emotion, personality, attention (legibility secondary)
-- **Body Text**: Prioritize legibility, reading comfort, accessibility
-- **UI/Labels**: Prioritize clarity, scannability, consistency
-
-**Font Selection:**
-- Use 2-3 typefaces maximum, but make them UNEXPECTED and characterful
-- Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700)
-- Prefer variable fonts for fine-tuned control and performance
-
-**NEVER Use These Fonts as Primary:**
-- Inter (overused by AI and generic SaaS)
-- Roboto (too generic)
-- Arial/Helvetica (default fallback vibes)
-- Space Grotesk (AI generation favorite)
-- System fonts as primary choice (only as fallback)
-
-**Font Version Usage:**
-- **Display version**: Headlines and hero text only - BE BOLD
-- **Text version**: Paragraphs and long-form content - legibility matters
-- **Caption/Micro**: Small UI labels (1-2 lines, non-critical info)
-
-**Find Distinctive Fonts:**
-- Google Fonts for web - but dig deeper than page 1
-- Type foundries for unique options
-- Choose fonts that serve your CHOSEN AESTHETIC DIRECTION
-- Pair distinctive display font with refined body font
-
-**Typographic Scale:**
-
-Use mathematical relationships for size hierarchy:
-- **Ratio**: Major third (1.25x) for moderate contrast, Perfect fourth (1.333x) for dramatic
-- **Base size**: 16px (1rem) for body text
-- **Example scale (1.25x)**:
-  ```
-  xs:   0.64rem (10px)
-  sm:   0.8rem  (13px)
-  base: 1rem    (16px)
-  lg:   1.25rem (20px)
-  xl:   1.563rem (25px)
-  2xl:  1.953rem (31px)
-  3xl:  2.441rem (39px)
-  4xl:  3.052rem (49px)
-  5xl:  3.815rem (61px)
-  ```
-
-**Typographic Hierarchy:**
-- Create clear visual distinction between levels
-- Headlines, subheadings, body, captions should each have distinct size/weight
-- Use combination of size, weight, and color for hierarchy
-
-**Spacing & Readability:**
-- **Line height**: 1.5x font size for body text (e.g., 16px text = 24px line-height)
-- **Line length**: 45-75 characters optimal for readability (60-70 ideal)
-- **Paragraph spacing**: 1-1.5em between paragraphs
-- **Letter spacing (tracking)**:
-  - Larger text (headlines): Slightly tighter (-0.02em to -0.05em)
-  - Normal text (body): Default (0)
-  - Small text (captions): Slightly looser (+0.01em to +0.03em)
-  - General rule: As size increases, reduce tracking; as size decreases, increase tracking
-
-**Font Pairing Logic:**
-
-When using multiple typefaces, create contrast through:
-- **Category contrast**: Serif + Sans-serif (classic, clear distinction)
-- **Weight contrast**: Light + Bold (dynamic, energetic)
-- **Personality contrast**: Geometric + Humanist (modern + warm)
-
-Examples:
-- Serif headlines + Sans body (editorial, trustworthy)
-- Display headlines + System body (distinctive + efficient)
-- Bold sans headlines + Light sans body (modern, clean)
-
-**UI Typography:**
-
-Specific guidance for interface elements:
-- **Button text**: Semi-Bold (600), 14-16px, consistent casing (all-caps OR title case)
-- **Form labels**: Regular (400), 14px, positioned above input
-- **Form input text**: Regular (400), 16px minimum (prevents iOS zoom on focus)
-- **Placeholder text**: Light (300) or desaturated color, same size as input
-- **Error messages**: Regular (400), 12-14px, color-coded (red-ish)
-
-**Responsive Typography:**
-
-Scale type sizes across breakpoints:
-```tsx
-// Example with Tailwind
-<h1 className="text-3xl md:text-4xl lg:text-5xl">
-  Responsive Headline
-</h1>
-
-// Or with CSS clamp (fluid)
-h1 {
-  font-size: clamp(2rem, 5vw, 4rem);
-}
-```
-
-Reduce sizes on mobile (20-30% smaller than desktop)
-Reduce hierarchy levels on small screens (fewer distinct sizes)
-
-### Layout & Spatial Design
-
-**Compositional Balance:**
-- Every screen should feel balanced
-- Pay attention to visual weight and negative space
-- Use generous negative space to focus attention
-- Add sufficient margins and paddings for professional, spacious look
-
-**Grid Discipline:**
-- Maintain consistent underlying grid system
-- Create sense of order while allowing meaningful exceptions
-- Use grid/flex wrappers with `gap` for spacing
-- Prioritize wrappers over direct margins/padding on children
-
-**Spatial Relationships:**
-- Group related elements through proximity, alignment, and shared attributes
-- Use size, color, and spacing to highlight important elements
-- Guide user focus through visual hierarchy
-
-**Attention Guidance:**
-- Design interfaces that guide user attention effectively
-- Avoid cluttered interfaces where elements compete
-- Create clear paths through the content
-
-## Interaction Design
-
-
-**Motion Specification:**
-
-For detailed motion specs, see MOTION-SPEC.md (easing curves, duration tables, state-specific animations, implementation patterns).
-
-### User Experience Patterns
-
-**Core UX Principles:**
-
-1. **Direct Manipulation**
-   - Users interact directly with content, not through abstract controls
-   - Examples:
-     - Drag & drop to reorder items (not up/down buttons)
-     - Inline editing (click to edit, not separate form)
-     - Sliders for ranges (not numeric input with +/-)
-     - Pinch/zoom gestures on mobile (not +/- buttons)
-
-2. **Immediate Feedback**
-   - Every interaction provides instantaneous visual feedback (within 100ms)
-   - Types of feedback:
-     - **Visual**: Button pressed state, hover effects, color changes
-     - **Haptic**: Vibration on mobile (submit, error, success)
-     - **Audio**: Subtle sounds for critical actions (optional, user-controlled)
-     - **Loading**: Skeleton screens, spinners for >300ms operations
-     - **Success**: Checkmarks, green highlights, toast notifications
-     - **Error**: Red highlights, inline error messages, shake animations
-
-3. **Consistent Behavior**
-   - Similar-looking elements behave similarly
-   - Examples:
-     - **Visual consistency**: All primary buttons have same colors, sizes, hover states
-     - **Behavioral consistency**: All modals close via X button, ESC key, and outside click
-     - **Interaction consistency**: All drag targets have same hover state and drop feedback
-     - **Pattern consistency**: All forms validate on blur and submit
-
-4. **Forgiveness**
-   - Make errors difficult, but recovery easy
-   - **Prevention strategies**:
-     - Disable invalid actions (grey out unavailable buttons)
-     - Validate inputs inline (before submission)
-     - Confirm destructive actions (delete, overwrite)
-     - Auto-save in background (drafts, progress)
-   - **Recovery strategies**:
-     - Undo/redo for all state changes
-     - Soft deletes (trash/archive before permanent delete)
-     - Clear error messages with actionable fixes
-     - Preserve user input on errors (don't clear forms)
-
-5. **Progressive Disclosure**
-   - Reveal details as needed rather than overwhelming users
-   - Levels of disclosure:
-     - **Summary**: Show essential info by default (card title, price, rating)
-     - **Details**: Expand to show more info (description, specs, reviews)
-     - **Advanced**: Hide complex options behind "Advanced settings" toggle
-   - Examples:
-     - Accordion: Start collapsed, expand on click
-     - Search filters: Show 3-5 common filters, hide rest behind "More filters"
-     - Settings: Basic settings visible, advanced behind "Show advanced"
-
-**Modern UX Patterns:**
-
-1. **Conversational Interfaces**
-
-   Prioritize natural language interaction where appropriate:
-
-   **Four types:**
-   - **Pure chat**: Full conversation (AI assistants, support bots)
-   - **Command palette**: Text-based shortcuts (Cmd+K, search everywhere)
-   - **Smart search**: Natural language queries (search "meetings next week" vs filtering)
-   - **Form alternatives**: Conversational data collection ("What's your name?" vs form fields)
-
-   **When to use:**
-   - Complex searches with multiple variables
-   - Task guidance (wizards, onboarding)
-   - Contextual help
-   - Quick actions (command palette)
-
-   **When NOT to use:**
-   - Simple forms (just use inputs)
-   - Precise control interfaces (design tools, dashboards)
-   - High-frequency repetitive tasks
-
-2. **Adaptive Layouts**
-
-   Respond to user context automatically:
-   - **Time-based**: Dark mode at night, light during day
-   - **Device-based**: Simplified UI on mobile, full features on desktop
-   - **Connection-based**: Reduce images/video on slow connections
-   - **Usage-based**: Prioritize frequent actions, hide rarely-used features
-
-   Examples:
-   - Auto dark/light mode based on time or system preference
-   - Simplified mobile navigation (hamburger menu) vs full desktop nav
-   - Collapsed sidebar on small screens, expanded on large
-
-3. **Bold Visual Expression**
-
-   Aesthetic flexibility based on chosen direction:
-   - Shadows ALLOWED and encouraged when intentional (dramatic shadows, soft elevation)
-   - Gradients ALLOWED for depth, accents, backgrounds, and atmosphere
-   - NO glass morphism effects (this is the one banned technique)
-   - NO Apple design mimicry (find your own voice)
-   - Focus on typography, color, spacing, AND visual effects to create hierarchy
-   - Create atmosphere: gradient meshes, noise textures, grain overlays, dramatic lighting
-
-**Navigation:**
-- Clear structure with intuitive navigation menus
-- Implement breadcrumbs for deep hierarchies (more than 2 levels)
-- Use standard UI patterns to reduce learning curve (hamburger menu, tab bars)
-- Ensure predictable behavior (back button works, links look clickable)
-- Maintain navigation context (highlight current page, preserve scroll position)
-
-## Styling Implementation
-
-### Component Library & Tools
-
-**Component Library:**
-- Strongly prefer shadcn components (v4, pre-installed in `@/components/ui`)
-- Import individually: `import { Button } from "@/components/ui/button";`
-- Use over plain HTML elements (`<Button>` over `<button>`)
-- Avoid creating custom components with names that clash with shadcn
-
-**Styling Engine:**
-- Use Tailwind utility classes exclusively
-- Adhere to theme variables in `index.css` via CSS custom properties
-- Map variables in `@theme` (see `tailwind.config.js`)
-- Use inline styles or CSS modules only when absolutely necessary
-
-**Icons:**
-- Use `@phosphor-icons/react` for buttons and inputs
-- Example: `import { Plus } from "@phosphor-icons/react"; <Plus />`
-- Use color for plain icon buttons
-- Don't override default `size` or `weight` unless requested
-
-**Notifications:**
-- Use `sonner` for toasts
-- Example: `import { toast } from 'sonner'`
-
-**Loading States:**
-- Always add loading states, spinners, placeholder animations
-- Use skeletons until content renders
-
-### Layout Implementation
-
-**Spacing Strategy:**
-- Use grid/flex wrappers with `gap` for spacing
-- Prioritize wrappers over direct margins/padding on children
-- Nest wrappers as needed for complex layouts
-
-**Conditional Styling:**
-- Use ternary operators or clsx/classnames utilities
-- Example: `className={clsx('base-class', { 'active-class': isActive })}`
-
-### Responsive Design
-
-**Fluid Layouts:**
-- Use relative units (%, em, rem) instead of fixed pixels
-- Implement CSS Grid and Flexbox for flexible layouts
-- Design mobile-first, then scale up
-
-**Media Queries:**
-- Use breakpoints based on content needs, not specific devices
-- Test across range of devices and orientations
-
-**Touch Targets:**
-- Minimum 44x44 pixels for interactive elements
-- Provide adequate spacing between touch targets
-- Consider hover states for desktop, focus states for touch/keyboard
-
-**Performance:**
-- Optimize assets for mobile networks
-- Use CSS animations over JavaScript
-- Implement lazy loading for images and videos
-
-## Accessibility Standards
-
-**Core Requirements:**
-- Follow WCAG 2.1 AA guidelines
-- Ensure keyboard navigability for all interactive elements
-- Minimum touch target size: 44×44px
-- Use semantic HTML for screen reader compatibility
-- Provide alternative text for images and non-text content
-
-**Implementation Details:**
-- Use descriptive variable and function names
-- Event functions: prefix with "handle" (handleClick, handleKeyDown)
-- Add accessibility attributes:
-  - `tabindex="0"` for custom interactive elements
-  - `aria-label` for buttons without text
-  - `role` attributes when semantic HTML isn't sufficient
-- Ensure logical tab order
-- Provide visible focus states
-
-## Design Process & Testing
-
-### Design Workflow
-
-1. **Understand Context:**
-   - What problem are we solving?
-   - Who are the users and when will they use this?
-   - What are the success criteria?
-
-2. **Explore Options:**
-   - Present 2-3 alternative approaches
-   - Explain trade-offs of each option
-   - Ask which direction resonates
-
-3. **Implement Iteratively:**
-   - Start with structure and hierarchy
-   - Add visual polish progressively
-   - Test at each stage
-
-4. **Validate:**
-   - Use playwright MCP to test visual changes
-   - Check across different screen sizes
-   - Verify accessibility
-
-### Testing Checklist
-
-**Visual Testing:**
-- Use playwright MCP when available for automated testing
-- Check responsive behavior at common breakpoints
-- Verify touch targets on mobile
-- Test with different content lengths (short, long, edge cases)
-
-**Accessibility Testing:**
-- Test keyboard navigation
-- Verify screen reader compatibility
-- Check color contrast ratios
-- Ensure focus states are visible
-
-**Cross-Device Testing:**
-- Test on actual devices, not just emulators
-- Check different browsers (Chrome, Firefox, Safari)
-- Verify touch interactions on mobile
-- Test landscape and portrait orientations
-
-## Examples
-
-### Example 1: Designing a Button
-
-**Initial Question to Ask:**
-```
-Before I implement this button, I have a few design questions:
-1. What's the primary action you want to emphasize?
-2. Do you have brand colors in mind, or should I suggest options?
-3. What emotion should this button convey? (urgent, calm, playful, professional)
-```
-
-**After Getting Approval, Implementation:**
-```tsx
-import { Button } from "@/components/ui/button";
-import { ArrowRight } from "@phosphor-icons/react";
-
-<Button
-  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
->
-  Get Started
-  <ArrowRight className="ml-2" />
-</Button>
-```
-
-### Example 2: Typography Hierarchy
-
-**Question First:**
-```
-For this content hierarchy, I'm thinking:
-- Headline: Large, bold, attention-grabbing
-- Subheading: Medium, regular weight
-- Body: Smaller, optimized for reading
-
-Should we go bold and contemporary, or subtle and refined?
-```
-
-**Implementation After Approval:**
-```tsx
-<div className="space-y-4">
-  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
-    Headline Here
-  </h1>
-  <h2 className="text-2xl text-slate-600">
-    Supporting subheading
-  </h2>
-  <p className="text-base leading-relaxed text-slate-700">
-    Body text optimized for readability with proper line height.
-  </p>
-</div>
-```
-
-### Example 3: Unique Color Palette Suggestion
-
-**Presenting Options:**
-```
-I'd like to suggest three color directions that break from typical SaaS patterns:
-
-1. **Warm Earth Tones**
-   - Base: Warm grey (#E8E2DC)
-   - Accent: Terracotta (#C86E4B)
-   - For: Organic, trustworthy feel
-
-2. **Cool Midnight**
-   - Base: Deep navy (#1A2332)
-   - Accent: Cyan (#4ECDC4)
-   - For: Modern, tech-forward feel
-
-3. **Soft Pastels**
-   - Base: Soft pink (#FFE5E5)
-   - Accent: Sage green (#9DB5A4)
-   - For: Calm, approachable feel
-
-Which direction feels right for your brand?
-```
-
-## Common Patterns to Avoid
-
-❌ **NEVER:**
-- Use Inter, Roboto, Arial, Space Grotesk as primary fonts
-- Use generic SaaS blue (#3B82F6) or purple gradients on white
-- Copy Apple's design language or use glass morphism
-- Create cookie-cutter layouts that look AI-generated
-- Skip asking about context before designing
-- Converge on common choices across generations (vary everything!)
-- Use animations that delay user actions
-- Create cluttered interfaces where elements compete
-
-✅ **ALWAYS:**
-- Ask about purpose, tone, constraints, differentiation FIRST
-- Then commit BOLDLY to a distinctive aesthetic direction
-- Use unexpected, characterful typography choices
-- Create atmosphere: shadows, gradients, textures, grain (when intentional)
-- Dominant colors with sharp accents (not timid, evenly-distributed palettes)
-- Provide immediate feedback for interactions
-- Test with real devices
-- Validate accessibility (it enables creativity, not limits it)
-- Remember: Claude is capable of extraordinary creative work - don't hold back!
-
-## Version History
-
-- v2.0.0 (2025-11-22): Creative liberation update - bold aesthetics, shadows/gradients allowed, Design Thinking protocol
-- v1.0.0 (2025-10-18): Initial release with comprehensive UI/UX design guidance
-
-## References
-
-For additional context, see:
-- **Anthropic Frontend Aesthetics Cookbook**: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb
-- WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
-- Google Fonts: https://fonts.google.com/
-- Tailwind CSS Docs: https://tailwindcss.com/docs
-- Shadcn UI Components: https://ui.shadcn.com/
-
-**Progressive Disclosure Files:**
-- ACCESSIBILITY.md - Accessibility essentials (WCAG AA baseline)
-- MOTION-SPEC.md - Animation timing and easing
-- RESPONSIVE-DESIGN.md - Mobile-first breakpoints and patterns

.claude/skills/interactive-portfolio/SKILL.md

@@ -1,223 +0,0 @@
----
-name: interactive-portfolio
-description: "Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio."
-source: vibeship-spawner-skills (Apache 2.0)
----
-
-# Interactive Portfolio
-
-**Role**: Portfolio Experience Designer
-
-You know a portfolio isn't a resume - it's a first impression that needs
-to convert. You balance creativity with usability. You understand that
-hiring managers spend 30 seconds on each portfolio. You make those 30
-seconds count. You help people stand out without being gimmicky.
-
-## Capabilities
-
-- Portfolio architecture
-- Project showcase design
-- Interactive case studies
-- Personal branding for devs/designers
-- Contact conversion
-- Portfolio performance
-- Work presentation
-- Testimonial integration
-
-## Patterns
-
-### Portfolio Architecture
-
-Structure that works for portfolios
-
-**When to use**: When planning portfolio structure
-
-```javascript
-## Portfolio Architecture
-
-### The 30-Second Test
-In 30 seconds, visitors should know:
-1. Who you are
-2. What you do
-3. Your best work
-4. How to contact you
-
-### Essential Sections
-| Section | Purpose | Priority |
-|---------|---------|----------|
-| Hero | Hook + identity | Critical |
-| Work/Projects | Prove skills | Critical |
-| About | Personality + story | Important |
-| Contact | Convert interest | Critical |
-| Testimonials | Social proof | Nice to have |
-| Blog/Writing | Thought leadership | Optional |
-
-### Navigation Patterns
-```
-Option 1: Single page scroll
-- Best for: Designers, creatives
-- Works well with animations
-- Mobile friendly
-
-Option 2: Multi-page
-- Best for: Lots of projects
-- Individual case study pages
-- Better for SEO
-
-Option 3: Hybrid
-- Main sections on one page
-- Detailed case studies separate
-- Best of both worlds
-```
-
-### Hero Section Formula
-```
-[Your name]
-[What you do in one line]
-[One line that differentiates you]
-[CTA: View Work / Contact]
-```
-```
-
-### Project Showcase
-
-How to present work effectively
-
-**When to use**: When building project sections
-
-```javascript
-## Project Showcase
-
-### Project Card Elements
-| Element | Purpose |
-|---------|---------|
-| Thumbnail | Visual hook |
-| Title | What it is |
-| One-liner | What you did |
-| Tech/tags | Quick scan |
-| Results | Proof of impact |
-
-### Case Study Structure
-```
-1. Hero image/video
-2. Project overview (2-3 sentences)
-3. The challenge
-4. Your role
-5. Process highlights
-6. Key decisions
-7. Results/impact
-8. Learnings (optional)
-9. Links (live, GitHub, etc.)
-```
-
-### Showing Impact
-| Instead of | Write |
-|------------|-------|
-| "Built a website" | "Increased conversions 40%" |
-| "Designed UI" | "Reduced user drop-off 25%" |
-| "Developed features" | "Shipped to 50K users" |
-
-### Visual Presentation
-- Device mockups for web/mobile
-- Before/after comparisons
-- Process artifacts (wireframes, etc.)
-- Video walkthroughs for complex work
-- Hover effects for engagement
-```
-
-### Developer Portfolio Specifics
-
-What works for dev portfolios
-
-**When to use**: When building developer portfolio
-
-```javascript
-## Developer Portfolio
-
-### What Hiring Managers Look For
-1. Code quality (GitHub link)
-2. Real projects (not just tutorials)
-3. Problem-solving ability
-4. Communication skills
-5. Technical depth
-
-### Must-Haves
-- GitHub profile link (cleaned up)
-- Live project links
-- Tech stack for each project
-- Your specific contribution (for team projects)
-
-### Project Selection
-| Include | Avoid |
-|---------|-------|
-| Real problems solved | Tutorial clones |
-| Side projects with users | Incomplete projects |
-| Open source contributions | "Coming soon" |
-| Technical challenges | Basic CRUD apps |
-
-### Technical Showcase
-```javascript
-// Show code snippets that demonstrate:
-- Clean architecture decisions
-- Performance optimizations
-- Clever solutions
-- Testing approach
-```
-
-### Blog/Writing
-- Technical deep dives
-- Problem-solving stories
-- Learning journeys
-- Shows communication skills
-```
-
-## Anti-Patterns
-
-### ❌ Template Portfolio
-
-**Why bad**: Looks like everyone else.
-No memorable impression.
-Doesn't show creativity.
-Easy to forget.
-
-**Instead**: Add personal touches.
-Custom design elements.
-Unique project presentations.
-Your voice in the copy.
-
-### ❌ All Style No Substance
-
-**Why bad**: Fancy animations, weak projects.
-Style over substance.
-Hiring managers see through it.
-No proof of skills.
-
-**Instead**: Projects first, style second.
-Real work with real impact.
-Quality over quantity.
-Depth over breadth.
-
-### ❌ Resume Website
-
-**Why bad**: Boring, forgettable.
-Doesn't use the medium.
-No personality.
-Lists instead of stories.
-
-**Instead**: Show, don't tell.
-Visual case studies.
-Interactive elements.
-Personality throughout.
-
-## ⚠️ Sharp Edges
-
-| Issue | Severity | Solution |
-|-------|----------|----------|
-| Portfolio more complex than your actual work | medium | ## Right-Sizing Your Portfolio |
-| Portfolio looks great on desktop, broken on mobile | high | ## Mobile-First Portfolio |
-| Visitors don't know what to do next | medium | ## Portfolio CTAs |
-| Portfolio shows old or irrelevant work | medium | ## Portfolio Freshness |
-
-## Related Skills
-
-Works well with: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

.gitignore

@@ -7,9 +7,16 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Environment
+.env
+
+# Dependencies
 node_modules
+
+# Build output
 dist
 dist-ssr
+dist-server
 *.local
 
 # Editor directories and files
@@ -26,7 +33,40 @@ dist-ssr
 # TypeScript
 *.tsbuildinfo
 
-#Playwrite Screenshots
+# Playwright screenshots
 *.png
+!public/meta.png
 
-nul
+# AI agent tooling
+.claude/
+.codex/
+.ralph/
+.playwright-mcp/
+AGENTS.md
+PROMPT.md
+hats.yml
+ralph.yml
+scripts/ralph/
+scripts/benchmark-results/
+
+# Reference / personal materials
+References/
+
+# Font source archives (used fonts are in public/fonts/)
+Fonts/
+
+# Logo animation source (Remotion)
+LogoAnimation/
+
+# Design notes
+carousel-design-debate*.md
+
+# Misc
+*:Zone.Identifier
+__MACOSX
+andy-charlwood-cv@0.0.0
+lighthouse.pdf
+logo/
+graph.png
+node
+nul

.playwright-mcp/http-server

@@ -1,278 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-var chalk     = require('chalk'),
-    os         = require('os'),
-    httpServer = require('../lib/http-server'),
-    portfinder = require('portfinder'),
-    opener     = require('opener'),
-
-    fs         = require('fs'),
-    url        = require('url');
-var argv = require('minimist')(process.argv.slice(2), {
-  alias: {
-    tls: 'ssl'
-  }
-});
-var ifaces = os.networkInterfaces();
-
-process.title = 'http-server';
-
-if (argv.h || argv.help) {
-  console.log([
-    'usage: http-server [path] [options]',
-    '',
-    'options:',
-    '  -p --port    Port to use. If 0, look for open port. [8080]',
-    '  -a           Address to use [0.0.0.0]',
-    '  -d           Show directory listings [true]',
-    '  -i           Display autoIndex [true]',
-    '  -g --gzip    Serve gzip files when possible [false]',
-    '  -b --brotli  Serve brotli files when possible [false]',
-    '               If both brotli and gzip are enabled, brotli takes precedence',
-    '  -e --ext     Default file extension if none supplied [none]',
-    '  -s --silent  Suppress log messages from output',
-    '  --cors[=headers]   Enable CORS via the "Access-Control-Allow-Origin" header',
-    '                     Optionally provide CORS headers list separated by commas',
-    '  -o [path]    Open browser window after starting the server.',
-    '               Optionally provide a URL path to open the browser window to.',
-    '  -c           Cache time (max-age) in seconds [3600], e.g. -c10 for 10 seconds.',
-    '               To disable caching, use -c-1.',
-    '  -t           Connections timeout in seconds [120], e.g. -t60 for 1 minute.',
-    '               To disable timeout, use -t0',
-    '  -U --utc     Use UTC time format in log messages.',
-    '  --log-ip     Enable logging of the client\'s IP address',
-    '',
-    '  -P --proxy       Fallback proxy if the request cannot be resolved. e.g.: http://someurl.com',
-    '  --proxy-options  Pass options to proxy using nested dotted objects. e.g.: --proxy-options.secure false',
-    '',
-    '  --username   Username for basic authentication [none]',
-    '               Can also be specified with the env variable NODE_HTTP_SERVER_USERNAME',
-    '  --password   Password for basic authentication [none]',
-    '               Can also be specified with the env variable NODE_HTTP_SERVER_PASSWORD',
-    '',
-    '  -S --tls --ssl   Enable secure request serving with TLS/SSL (HTTPS)',
-    '  -C --cert    Path to TLS cert file (default: cert.pem)',
-    '  -K --key     Path to TLS key file (default: key.pem)',
-    '',
-    '  -r --robots        Respond to /robots.txt [User-agent: *\\nDisallow: /]',
-    '  --no-dotfiles      Do not show dotfiles',
-    '  --mimetypes        Path to a .types file for custom mimetype definition',
-    '  -h --help          Print this list and exit.',
-    '  -v --version       Print the version and exit.'
-  ].join('\n'));
-  process.exit();
-}
-
-var port = argv.p || argv.port || parseInt(process.env.PORT, 10),
-    host = argv.a || '0.0.0.0',
-    tls = argv.S || argv.tls,
-    sslPassphrase = process.env.NODE_HTTP_SERVER_SSL_PASSPHRASE,
-    proxy = argv.P || argv.proxy,
-    proxyOptions = argv['proxy-options'],
-    utc = argv.U || argv.utc,
-    version = argv.v || argv.version,
-    logger;
-
-var proxyOptionsBooleanProps = [
-  'ws', 'xfwd', 'secure', 'toProxy', 'prependPath', 'ignorePath', 'changeOrigin',
-  'preserveHeaderKeyCase', 'followRedirects', 'selfHandleResponse'
-];
-
-if (proxyOptions) {
-  Object.keys(proxyOptions).forEach(function (key) {
-    if (proxyOptionsBooleanProps.indexOf(key) > -1) {
-      proxyOptions[key] = proxyOptions[key].toLowerCase() === 'true';
-    }
-  });
-}
-
-if (!argv.s && !argv.silent) {
-  logger = {
-    info: console.log,
-    request: function (req, res, error) {
-      var date = utc ? new Date().toUTCString() : new Date();
-      var ip = argv['log-ip']
-          ? req.headers['x-forwarded-for'] || '' +  req.connection.remoteAddress
-          : '';
-      if (error) {
-        logger.info(
-          '[%s] %s "%s %s" Error (%s): "%s"',
-          date, ip, chalk.red(req.method), chalk.red(req.url),
-          chalk.red(error.status.toString()), chalk.red(error.message)
-        );
-      }
-      else {
-        logger.info(
-          '[%s] %s "%s %s" "%s"',
-          date, ip, chalk.cyan(req.method), chalk.cyan(req.url),
-          req.headers['user-agent']
-        );
-      }
-    }
-  };
-}
-else if (chalk) {
-  logger = {
-    info: function () {},
-    request: function () {}
-  };
-}
-
-if (version) {
-  logger.info('v' + require('../package.json').version);
-  process.exit();
-}
-
-if (!port) {
-  portfinder.basePort = 8080;
-  portfinder.getPort(function (err, port) {
-    if (err) { throw err; }
-    listen(port);
-  });
-}
-else {
-  listen(port);
-}
-
-function listen(port) {
-  var options = {
-    root: argv._[0],
-    cache: argv.c,
-    timeout: argv.t,
-    showDir: argv.d,
-    autoIndex: argv.i,
-    gzip: argv.g || argv.gzip,
-    brotli: argv.b || argv.brotli,
-    robots: argv.r || argv.robots,
-    ext: argv.e || argv.ext,
-    logFn: logger.request,
-    proxy: proxy,
-    proxyOptions: proxyOptions,
-    showDotfiles: argv.dotfiles,
-    mimetypes: argv.mimetypes,
-    username: argv.username || process.env.NODE_HTTP_SERVER_USERNAME,
-    password: argv.password || process.env.NODE_HTTP_SERVER_PASSWORD
-  };
-
-  if (argv.cors) {
-    options.cors = true;
-    if (typeof argv.cors === 'string') {
-      options.corsHeaders = argv.cors;
-    }
-  }
-
-  if (proxy) {
-    try {
-      new url.URL(proxy)
-    }
-    catch (err) {
-      logger.info(chalk.red('Error: Invalid proxy url'));
-      process.exit(1);
-    }
-  }
-
-  if (tls) {
-    options.https = {
-      cert: argv.C || argv.cert || 'cert.pem',
-      key: argv.K || argv.key || 'key.pem',
-      passphrase: sslPassphrase,
-    };
-    try {
-      fs.lstatSync(options.https.cert);
-    }
-    catch (err) {
-      logger.info(chalk.red('Error: Could not find certificate ' + options.https.cert));
-      process.exit(1);
-    }
-    try {
-      fs.lstatSync(options.https.key);
-    }
-    catch (err) {
-      logger.info(chalk.red('Error: Could not find private key ' + options.https.key));
-      process.exit(1);
-    }
-  }
-
-  var server = httpServer.createServer(options);
-  server.listen(port, host, function () {
-    var protocol = tls ? 'https://' : 'http://';
-
-    logger.info([
-      chalk.yellow('Starting up http-server, serving '),
-      chalk.cyan(server.root),
-      tls ? (chalk.yellow(' through') + chalk.cyan(' https')) : ''
-    ].join(''));
-
-    logger.info([chalk.yellow('\nhttp-server version: '), chalk.cyan(require('../package.json').version)].join(''));
-
-    logger.info([
-      chalk.yellow('\nhttp-server settings: '),
-      ([chalk.yellow('CORS: '), argv.cors ? chalk.cyan(argv.cors) : chalk.red('disabled')].join('')),
-      ([chalk.yellow('Cache: '), argv.c ? (argv.c === '-1' ? chalk.red('disabled') : chalk.cyan(argv.c + ' seconds')) : chalk.cyan('3600 seconds')].join('')),
-      ([chalk.yellow('Connection Timeout: '), argv.t === '0' ? chalk.red('disabled') : (argv.t ? chalk.cyan(argv.t + ' seconds') : chalk.cyan('120 seconds'))].join('')),
-      ([chalk.yellow('Directory Listings: '), argv.d ? chalk.red('not visible') : chalk.cyan('visible')].join('')),
-      ([chalk.yellow('AutoIndex: '), argv.i ? chalk.red('not visible') : chalk.cyan('visible')].join('')),
-      ([chalk.yellow('Serve GZIP Files: '), argv.g || argv.gzip ? chalk.cyan('true') : chalk.red('false')].join('')),
-      ([chalk.yellow('Serve Brotli Files: '), argv.b || argv.brotli ? chalk.cyan('true') : chalk.red('false')].join('')),
-      ([chalk.yellow('Default File Extension: '), argv.e ? chalk.cyan(argv.e) : (argv.ext ? chalk.cyan(argv.ext) : chalk.red('none'))].join(''))
-    ].join('\n'));
-
-    logger.info(chalk.yellow('\nAvailable on:'));
-
-    if (argv.a && host !== '0.0.0.0') {
-      logger.info(`  ${protocol}${host}:${chalk.green(port.toString())}`);
-    } else {
-      Object.keys(ifaces).forEach(function (dev) {
-        ifaces[dev].forEach(function (details) {
-          if (details.family === 'IPv4') {
-            logger.info(('  ' + protocol + details.address + ':' + chalk.green(port.toString())));
-          }
-        });
-      });
-    }
-
-    if (typeof proxy === 'string') {
-      if (proxyOptions) {
-        logger.info('Unhandled requests will be served from: ' + proxy + '. Options: ' + JSON.stringify(proxyOptions));
-      }
-      else {
-        logger.info('Unhandled requests will be served from: ' + proxy);
-      }
-    }
-
-    logger.info('Hit CTRL-C to stop the server');
-    if (argv.o) {
-      const openHost = host === '0.0.0.0' ? '127.0.0.1' : host;
-      let openUrl = `${protocol}${openHost}:${port}`;
-      if (typeof argv.o === 'string') {
-        openUrl += argv.o[0] === '/' ? argv.o : '/' + argv.o;
-      }
-      logger.info('Open: ' + openUrl);
-      opener(openUrl);
-    }
-
-    // Spacing before logs
-    if (!argv.s) logger.info();
-  });
-}
-
-if (process.platform === 'win32') {
-  require('readline').createInterface({
-    input: process.stdin,
-    output: process.stdout
-  }).on('SIGINT', function () {
-    process.emit('SIGINT');
-  });
-}
-
-process.on('SIGINT', function () {
-  logger.info(chalk.red('http-server stopped.'));
-  process.exit();
-});
-
-process.on('SIGTERM', function () {
-  logger.info(chalk.red('http-server stopped.'));
-  process.exit();
-});

.ralph/ralph-history.json

@@ -1,27 +0,0 @@
-{
-  "iterations": [
-    {
-      "iteration": 1,
-      "startedAt": "2026-02-11T22:50:15.397Z",
-      "endedAt": "2026-02-11T22:55:02.081Z",
-      "durationMs": 283525,
-      "toolsUsed": {},
-      "filesModified": [
-        "Ralph/IMPLEMENTATION_PLAN.md",
-        "Ralph/progress.txt",
-        "src/App.tsx",
-        "src/components/BootSequence.tsx",
-        "src/components/ECGAnimation.tsx"
-      ],
-      "exitCode": 0,
-      "completionDetected": false,
-      "errors": []
-    }
-  ],
-  "totalDurationMs": 283525,
-  "struggleIndicators": {
-    "repeatedErrors": {},
-    "noProgressIterations": 0,
-    "shortIterations": 0
-  }
-}

.ralph/ralph-opencode.config.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json",
-  "permission": {
-    "read": "allow",
-    "edit": "allow",
-    "glob": "allow",
-    "grep": "allow",
-    "list": "allow",
-    "bash": "allow",
-    "task": "allow",
-    "webfetch": "allow",
-    "websearch": "allow",
-    "codesearch": "allow",
-    "todowrite": "allow",
-    "todoread": "allow",
-    "question": "allow",
-    "lsp": "allow",
-    "external_directory": "allow"
-  }
-}

CLAUDE.md

@@ -2,217 +2,63 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Project Overview
-
-Interactive CV/portfolio for Andy Charlwood, presented as a GP clinical record system. The concept: *what if a GP surgery's patient record system were redesigned by a luxury product studio?* The structure and metaphor of a real clinical system (tiles as record sections, status indicators, medication-style skill entries, alerts) — but elevated with refined typography, considered motion, and a modern light aesthetic.
-
-**This is NOT a faithful NHS system clone.** It's a showcase portfolio that *evokes* the feel of clinical software while being distinctly beautiful. The clinical metaphor is the creative conceit; the execution should feel premium and contemporary.
-
-Built as a React SPA with TypeScript and Vite.
-
-**Reference design:** `References/GPSystemconcept.html` — the visual and structural target for the dashboard.
-
 ## Commands
 
-- `npm run dev` — Start dev server (localhost:5173)
-- `npm run build` — TypeScript compile + Vite production build
-- `npm run typecheck` — TypeScript type checking only (`tsc --noEmit`)
-- `npm run lint` — ESLint
-- `npm run preview` — Preview production build
+```bash
+npm run dev              # Vite dev server (localhost:5173)
+npm run build            # TypeScript compile + Vite production build
+npm run preview          # Preview production build locally
+npm run lint             # ESLint
+npm run typecheck        # TypeScript checks (no emit)
+npm run generate-embeddings  # Regenerate semantic search embeddings (src/data/embeddings.json)
+```
 
-No test framework is configured.
+**Validation gate (run before any PR):** `npm run lint && npm run typecheck && npm run build`
+
+No automated test framework — lint, typecheck, and build are the quality gates. For UI changes, verify manually (responsive behavior, accessibility, keyboard navigation).
 
 ## Architecture
 
-### Four-Phase UI Flow
+**Interactive CV/portfolio** with a PMR (patient medical record) interface aesthetic. Three-phase UX: terminal boot → ECG heartbeat → dashboard.
 
-`App.tsx` manages a `Phase` state (`'boot'` → `'ecg'` → `'login'` → `'dashboard'`). Each phase renders exclusively:
+### App lifecycle (`src/App.tsx`)
+Phase orchestrator managing: BootSequence → ECGAnimation → LoginScreen → DashboardLayout
 
-1. **BootSequence** — Terminal typing animation (~4s), green-on-black aesthetic. Fira Code font, matrix-green palette. **Locked — do not change.**
-2. **ECGAnimation** — Canvas-based heartbeat animation with mask-based letter tracing. Background transitions from black to `#1E293B`. **Locked — do not change.**
-3. **LoginScreen** — Animated login card on dark background. Types credentials at a natural pace, then presents an interactive "Log In" button for the user to click. Login transitions to the dashboard.
-4. **DashboardLayout** — The main portfolio experience: TopBar + Sidebar + scrollable tile-based dashboard.
+### Data flow
+- **Canonical source:** `src/data/timeline.ts` — all career + education entities live here
+- **Derived data:** `constellation.ts` builds D3 graph data from timeline; `consultations.ts` re-exports for legacy consumers; `tags.ts` derived from skills; `kpis.ts` standalone
+- **Types:** `src/types/pmr.ts` has all domain types (Consultation, TimelineEntity, ConstellationNode, etc.)
 
-### Dashboard Layout (Post-Login)
+### Key subsystems
 
-The dashboard uses a three-zone layout:
+| Subsystem | Entry point | Notes |
+|-----------|-------------|-------|
+| Dashboard | `DashboardLayout.tsx` | Orchestrates tiles, constellation, timeline, detail panel |
+| Career Constellation | `CareerConstellation.tsx` | D3 force simulation; roles as clusters, skills as nodes; hover/click/tap/keyboard |
+| Detail Panel | `DetailPanelContext.tsx` + `DetailPanel.tsx` | Right-side slide-out; context-aware views per entity type |
+| Semantic Search | `lib/semantic-search.ts` + `lib/embedding-model.ts` | Pre-computed embeddings + local Xenova transformer model in browser |
+| Command Palette | `CommandPalette.tsx` | Ctrl+K; fuzzy (Fuse.js) + semantic search |
+| Chat Widget | `ChatWidget.tsx` + `lib/llm.ts` | Gemini/OpenRouter LLM integration; requires `.env` API keys |
+| Accessibility | `AccessibilityContext.tsx` | Focus management, reduced motion, ARIA |
 
-```
-┌─────────────────────────────────────────────────────┐
-│  TopBar (fixed, 48px) — brand, search, session      │
-├──────────┬──────────────────────────────────────────┤
-│          │                                          │
-│ Sidebar  │  Card Grid (scrollable)                  │
-│ (272px)  │  ┌─────────────────────────────────┐     │
-│          │  │ Patient Summary (full width)     │     │
-│ Person   │  ├────────────────┬────────────────┤     │
-│ Header   │  │ Latest Results │ Repeat Meds    │     │
-│          │  │ (KPIs)         │ (Core Skills)  │     │
-│ Tags     │  ├────────────────┴────────────────┤     │
-│          │  │ Last Consultation (full width)   │     │
-│ Alerts   │  ├─────────────────────────────────┤     │
-│          │  │ Career Activity (full width)     │     │
-│          │  ├─────────────────────────────────┤     │
-│          │  │ Education (full width)           │     │
-│          │  ├─────────────────────────────────┤     │
-│          │  │ Projects (full width)            │     │
-│          │  └─────────────────────────────────┘     │
-└──────────┴──────────────────────────────────────────┘
-```
+### D3 integration pattern
+`CareerConstellation.tsx` manages D3 force simulation imperatively via refs. Highlight state tracked with refs (not React state) to avoid unnecessary re-renders. Touch: tap to pin, background tap to clear. Keyboard: Tab through nodes, Enter/Space activate, Escape reset.
 
-**No view switching.** The dashboard is a single scrollable page of tiles. Users scroll to see all sections. Detail drill-down happens by expanding tiles in-place (accordion pattern).
+## Conventions
 
-### Key Patterns
+- **TypeScript strict mode** — `noUnusedLocals`, `noUnusedParameters` enforced
+- **Path alias:** `@/*` → `src/*` (configured in vite.config.ts + tsconfig.json)
+- **Components:** PascalCase (`DashboardLayout.tsx`); Hooks: `useCamelCase`; Utilities: kebab-case (`semantic-search.ts`)
+- **Styling:** Tailwind utility classes + inline `CSSProperties` for dynamic/theme values
+- **Animations:** Framer Motion; respects `prefers-reduced-motion`
+- **Commits:** Conventional Commit prefixes (`feat:`, `chore:`, `fix:`) + optional story IDs
 
-- **Canvas ECG**: `ECGAnimation.tsx` does imperative canvas drawing with requestAnimationFrame — flatline → 3 heartbeats (40px→60px→100px) → mask-based letter tracing → exit. **Locked — do not change.**
-- **TopBar**: `TopBar.tsx` — fixed at top, brand + search trigger + session info. Search bar triggers Command Palette on click/Ctrl+K.
-- **Sidebar**: `Sidebar.tsx` — light background, contains PersonHeader (avatar, name, title, status, details), Tags, and Alerts only. Skills, Projects, Education are in the main content tiles.
-- **Card Grid**: CSS Grid, 2 columns on desktop (gap 16px), 1 column on mobile. Tiles use a reusable `Card` component with consistent styling.
-- **Tile Expansion**: Career Activity items, Project items, and Skill items expand in-place with height-only animation (200ms, ease-out). Single-expand accordion — only one item open at a time.
-- **KPI Flip Cards**: Latest Results metrics flip on click to show explanation text. CSS perspective transform, 400ms.
-- **Command Palette**: Ctrl+K opens a Spotlight-style search overlay. Fuzzy search via fuse.js. Keyboard navigation (arrow keys, Enter, Escape).
-- **Staggered entrance**: TopBar slides down → Sidebar slides from left → Content fades in. Quick (200-300ms).
-- **Expandable content**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade.
-- **Responsive breakpoints**: Desktop (full sidebar + 2-col grid), Tablet (collapsed/hidden sidebar + 1-col), Mobile (no sidebar, stacked tiles).
+## Design tokens
 
-### Path Aliases
-
-`@/` maps to `./src/` (configured in both `vite.config.ts` and `tsconfig.json`).
-
-### Type System
-
-All data types live in `src/types/index.ts` and `src/types/pmr.ts`. Strict TypeScript — no `any` types. One component per file with typed props interfaces.
-
-## Design Direction: GP System Dashboard
-
-The aesthetic direction is a **modern GP system dashboard** — the precision and information density of a medical records system, but with a light, contemporary, premium feel. Think: a healthcare SaaS product redesigned by a Swiss product studio.
-
-### Tone
-
-- **Precise, not cold.** Every element has a reason. Spacing is generous but intentional.
-- **Light, not washed out.** Warm sage background, clean white surfaces, deliberate color accents.
-- **Technical, not sterile.** Monospace data, status indicators, and coded entries create authentic texture.
-- **Elegant, not decorative.** No gratuitous ornament. Beauty comes from proportion, contrast, and type.
-
-### Typography
-
-Typography is the primary vehicle for premium feel. Avoid generic system fonts.
-
-- **UI / Body:**
-  - **Elvaro Grotesque** (primary, `font-ui`) — Modern grotesque sans-serif. 7 weights (300-900). Institutional credibility with premium feel. Slightly condensed proportions suit data-dense UI.
-  - **Blumir** (alternative, `font-ui-alt`) — Geometric-humanist hybrid. Variable font (100-700). More refined/luxurious feel.
-  - Both fonts sourced from Envato (licensed), stored in `Fonts/`. **Do not use Inter, Roboto, DM Sans, or system defaults.**
-  - Font files: Elvaro `Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-*.woff2`, Blumir `Fonts/blumir-font-family/WOFF/Blumir-VF.woff2`
-- **Monospace / Data**: Geist Mono for timestamps, session info, GPhC number, dates, coded entries. Creates "technical texture."
-- **Terminal phase**: Fira Code — locked, do not change.
-- **Type scale**: Tight. Headings 15-18px, body 12.5-14px, labels 10-12px. Precision over drama.
-- **Weight hierarchy**: Use weight (400/500/600/700) rather than size to establish hierarchy.
-
-### Color Palette
-
-The palette anchors on teal as the primary accent, with a light sidebar + warm content background.
-
-- **Teal `#0D6E6E`** — Primary accent. Active states, links, avatar gradient, interactive elements. Hover: `#0A8080`. Light: `rgba(10,128,128,0.08)`.
-- **Background `#F0F5F4`** — Warm sage. The content area feels organic, not flat gray.
-- **Sidebar `#F7FAFA`** — Very light. Right border `#D4E0DE` separates from content.
-- **TopBar `#FFFFFF`** — White surface. Bottom border `#D4E0DE`.
-- **Cards `#FFFFFF`** — White with shadow-sm and border-light. Hover deepens to shadow-md.
-- **Status colors**: Success `#059669`, Amber `#D97706`, Alert `#DC2626`, Purple `#7C3AED` — each with light bg and border variants. Always paired with text labels.
-- **Text**: Primary `#1A2B2A`, Secondary `#5B7A78`, Tertiary `#8DA8A5`. Use full range for hierarchy.
-- **Borders**: Structural `#D4E0DE`, Cards/inner `#E4EDEB`.
-
-### Shadows & Depth
-
-Three-tier shadow system for layered depth:
-
-- **Cards (resting)**: `0 1px 2px rgba(26,43,42,0.05)` — gentle, always present.
-- **Cards (hover/interactive)**: `0 2px 8px rgba(26,43,42,0.08)` — slightly lifted.
-- **Overlays (command palette, modals)**: `0 8px 32px rgba(26,43,42,0.12)` — clearly elevated.
-- **Hover states**: Shadow deepens + border color strengthens. Subtle, not dramatic.
-
-### Motion
-
-Motion should feel considered and premium, never flashy:
-
-- **Entrance animations**: Dashboard materializes in sequence — TopBar slides down → Sidebar slides from left → Content fades in. Quick (200-300ms) with easing.
-- **Login typing**: 80ms/char for username, 60ms/dot for password. Natural, readable pace. After typing completes, "Log In" button becomes interactive — user clicks to proceed.
-- **Login transition**: On button click, card scales slightly and fades. Transition to dashboard layout.
-- **Tile expansion**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade.
-- **KPI flip**: CSS perspective rotateY, 400ms ease-in-out. Click to flip, click to flip back.
-- **Command palette**: Scale 0.97→1.0 + translateY entrance, 200ms. Backdrop fade.
-- **Hover states**: Subtle, immediate. Border color shifts, shadow deepens. Think: OS-level responsiveness.
-- **`prefers-reduced-motion`**: All animations skip to final state. No exceptions.
-
-### Spatial Composition
-
-- **Generous but structured.** Cards have 20px padding. Tile grid has 16px gap. Sections breathe.
-- **Clear visual hierarchy.** Card headers: uppercase, small (12px), tracked-out, secondary color with colored dot indicator.
-- **Two-column grid** on desktop, single column on mobile. Full-width tiles span both columns.
-- **Sidebar sections** separated by thin divider titles (10px, uppercase, tertiary, with line extending right).
-
-### What Makes It Memorable
-
-The distinctiveness comes from the *clinical metaphor applied to a modern interface*:
-- A light, professional sidebar with clinical-style person header and alert flags
-- Skills presented as "Repeat Medications" with frequency dosing (twice daily, when required)
-- KPI metrics that flip to reveal explanations, like interactive test results
-- Career history as a clinical timeline with color-coded entry types
-- The boot sequence → ECG → login flow is theatrical in a way that real clinical software never is
-- Command palette (Ctrl+K) for searching records, like a clinical search tool
-
-## Styling
-
-Tailwind CSS with custom design tokens in `tailwind.config.js`:
-- **Color tokens**: PMR-prefixed tokens (`pmr-accent`, `pmr-bg`, `pmr-surface`, `pmr-sidebar`, `pmr-text-primary`, etc.)
-- **Fonts**: `font-ui` (Elvaro Grotesque), `font-ui-alt` (Blumir), `font-geist` (Geist Mono), `font-mono` (Fira Code for terminal)
-- **Breakpoints**: xs 480px, sm 640px, md 768px, lg 1024px, xl 1280px
-- **Border radius**: 8px default for cards/tiles (`var(--radius)`). 6px for inner elements (`var(--radius-sm)`). 12px exception for login card and command palette.
-- **Shadows**: `shadow-sm`, `shadow-md`, `shadow-lg` tokens matching three-tier system.
-- CSS custom properties in `index.css` for both boot/ECG phase tokens and dashboard phase tokens.
-- Inline styles only for dynamic values that Tailwind can't express.
-
-## Guardrails
-
-- **Boot sequence**: Text, colors, and timing must match `References/concept.html` exactly. **Do not modify.**
-- **ECG animation**: Timing, amplitudes, color transitions, and mask-based text reveal must match the concept reference. **Do not modify.**
-- **Reference design**: `References/GPSystemconcept.html` is the visual and structural target for the dashboard.
-- **CV content**: Sourced from `References/CV_v4.md` — roles, dates, and achievement numbers must be accurate.
-- **Icons**: Via `lucide-react`, not unicode symbols.
-- **Accessibility**: WCAG 2.1 AA compliance. Semantic HTML, ARIA attributes, keyboard navigation, `prefers-reduced-motion` support throughout. Status indicators always paired with text labels.
-- **No generic aesthetics**: Every design decision should feel intentional. If a component could appear in any random SaaS template, it needs more character.
-- **Fonts**: Elvaro Grotesque (primary) or Blumir (alt). Never Inter, Roboto, DM Sans, or system defaults. DM Sans appears in the concept HTML as a placeholder only.
-
-## Project Structure
-
-```
-src/
-├── components/        # One component per file (PascalCase)
-│   ├── tiles/         # Dashboard tile components (PatientSummaryTile, LatestResultsTile, etc.)
-│   ├── views/         # Legacy PMR views (being replaced by tiles — may be referenced during transition)
-│   ├── TopBar.tsx     # Fixed top bar (brand, search trigger, session)
-│   ├── Sidebar.tsx    # Light sidebar (person header, tags, alerts)
-│   ├── DashboardLayout.tsx  # Main layout (topbar + sidebar + card grid)
-│   ├── Card.tsx       # Reusable card component with header
-│   ├── CommandPalette.tsx   # Ctrl+K search overlay
-│   └── ...            # Boot, ECG, Login (unchanged)
-├── contexts/          # React contexts (AccessibilityContext)
-├── data/              # Static data files
-│   ├── patient.ts     # Person details
-│   ├── consultations.ts  # Career roles (used in Last Consultation + Career Activity)
-│   ├── medications.ts # Legacy skill data
-│   ├── problems.ts    # Achievements
-│   ├── investigations.ts  # Projects
-│   ├── documents.ts   # Education entries
-│   ├── profile.ts     # Personal statement
-│   ├── tags.ts        # Sidebar tags
-│   ├── alerts.ts      # Sidebar alert flags
-│   ├── kpis.ts        # KPI metrics for Latest Results
-│   └── skills.ts      # Skills with frequency/years (medication metaphor)
-├── hooks/             # Custom hooks (camelCase, use* prefix)
-├── lib/               # Utility functions (search.ts for fuse.js)
-├── types/             # TypeScript interfaces (index.ts, pmr.ts)
-├── App.tsx            # Phase manager (root component)
-└── index.css          # Global styles + Tailwind directives
-Ralph/                 # Implementation plan, guardrails, progress tracking
-References/            # Source content (concept.html, GPSystemconcept.html, CV_v4.md)
-```
+- **Primary:** Teal `#00897B` / **Accent:** Coral `#FF6B6B`
+- **PMR palette:** GP system-inspired greens, teals, greys (defined in `tailwind.config.js`)
+- **Font tokens (CSS custom properties):**
+  - `--font-ui`: Elvaro Grotesque (dashboard UI)
+  - `--font-geist-mono`: Geist Mono / Fira Code fallback (canonical mono token)
+  - `--font-primary` / `--font-secondary`: Plus Jakarta Sans / Inter Tight
+- **Breakpoints:** xs 480, sm 640, md 768, lg 1024, xl 1280

ECGCombined.tsx

@@ -1,494 +0,0 @@
-import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
-
-// ─── Heartbeat generation ────────────────────────────────────────────────────
-
-function generateHeartbeatPoints(
-  amplitude: number,
-): { x: number; y: number }[] {
-  const points: { x: number; y: number }[] = [];
-  const steps = 200;
-
-  for (let i = 0; i <= steps; i++) {
-    const t = i / steps;
-    let y = 0;
-
-    if (t >= 0.05 && t < 0.2) {
-      const pt = (t - 0.05) / 0.15;
-      y = 0.12 * Math.sin(pt * Math.PI);
-    } else if (t >= 0.25 && t < 0.32) {
-      const pt = (t - 0.25) / 0.07;
-      y = -0.1 * Math.sin(pt * Math.PI);
-    } else if (t >= 0.32 && t < 0.42) {
-      const pt = (t - 0.32) / 0.1;
-      y = 1.0 * Math.sin(pt * Math.PI);
-    } else if (t >= 0.42 && t < 0.5) {
-      const pt = (t - 0.42) / 0.08;
-      y = -0.25 * Math.sin(pt * Math.PI);
-    } else if (t >= 0.55 && t < 0.75) {
-      const pt = (t - 0.55) / 0.2;
-      y = 0.2 * Math.sin(pt * Math.PI);
-    }
-
-    points.push({ x: t, y: y * amplitude });
-  }
-
-  return points;
-}
-
-type Beat = { startFrame: number; widthPx: number; amplitude: number };
-
-function buildBeats(fps: number): Beat[] {
-  const beats: Beat[] = [];
-  beats.push({ startFrame: Math.round(0.6 * fps), widthPx: 60, amplitude: 0.25 });
-  beats.push({ startFrame: Math.round(1.4 * fps), widthPx: 80, amplitude: 0.45 });
-  beats.push({ startFrame: Math.round(2.3 * fps), widthPx: 120, amplitude: 0.85 });
-  const normalStart = 3.2;
-  for (let i = 0; i < 1; i++) {
-    beats.push({
-      startFrame: Math.round((normalStart + i) * fps),
-      widthPx: 140,
-      amplitude: 1.0,
-    });
-  }
-  return beats;
-}
-
-// ─── Letter definitions ──────────────────────────────────────────────────────
-
-const LETTERS: Record<string, { x: number; y: number }[]> = {
-  A: [
-    { x: 0, y: 0 }, { x: 0.48, y: 1 }, { x: 0.53, y: 0.42 },
-    { x: 0.6, y: 0.42 }, { x: 1, y: 0 },
-  ],
-  N: [
-    { x: 0, y: 0 }, { x: 0.12, y: 1 }, { x: 0.72, y: 0 },
-    { x: 0.88, y: 1 }, { x: 1, y: 0 },
-  ],
-  D: [
-    { x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.5, y: 1 },
-    { x: 0.85, y: 0.55 }, { x: 1, y: 0 },
-  ],
-  R: [
-    { x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.35, y: 1 },
-    { x: 0.5, y: 0.6 }, { x: 0.55, y: 0.45 }, { x: 1, y: 0 },
-  ],
-  E: [
-    { x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.4, y: 1 },
-    { x: 0.45, y: 0.5 }, { x: 0.65, y: 0.5 }, { x: 0.7, y: 0 },
-    { x: 1, y: 0 },
-  ],
-  W: [
-    { x: 0, y: 0 }, { x: 0.05, y: 1 }, { x: 0.27, y: 0 },
-    { x: 0.5, y: 0.65 }, { x: 0.73, y: 0 }, { x: 0.95, y: 1 },
-    { x: 1, y: 0 },
-  ],
-  C: [
-    { x: 0, y: 0 }, { x: 0.08, y: 0.6 }, { x: 0.18, y: 1 },
-    { x: 0.6, y: 1 }, { x: 0.8, y: 0.5 }, { x: 0.95, y: 0.1 },
-    { x: 1, y: 0 },
-  ],
-  H: [
-    { x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.18, y: 0.5 },
-    { x: 0.82, y: 0.5 }, { x: 0.9, y: 1 }, { x: 1, y: 0 },
-  ],
-  L: [
-    { x: 0, y: 0 }, { x: 0.12, y: 1 }, { x: 0.3, y: 1 },
-    { x: 0.38, y: 0 }, { x: 1, y: 0 },
-  ],
-  O: [
-    { x: 0, y: 0 }, { x: 0.2, y: 0.85 }, { x: 0.35, y: 1 },
-    { x: 0.65, y: 1 }, { x: 0.8, y: 0.85 }, { x: 1, y: 0 },
-  ],
-};
-
-function interpolateLetterY(
-  points: { x: number; y: number }[],
-  t: number,
-): number {
-  if (t <= points[0].x) return points[0].y;
-  if (t >= points[points.length - 1].x) return points[points.length - 1].y;
-  for (let i = 0; i < points.length - 1; i++) {
-    if (t >= points[i].x && t <= points[i + 1].x) {
-      const segT = (t - points[i].x) / (points[i + 1].x - points[i].x);
-      return points[i].y + (points[i + 1].y - points[i].y) * segT;
-    }
-  }
-  return 0;
-}
-
-// ─── Text layout ─────────────────────────────────────────────────────────────
-
-const TEXT = "ANDREW CHARLWOOD";
-const LETTER_WIDTH = 72;
-const LETTER_GAP = 10;
-const SPACE_WIDTH = 30;
-const BASE_LEFT_INSET = 9;
-const BASE_RIGHT_INSET = 0;
-
-type LetterLayout = {
-  char: string;
-  startX: number;
-  endX: number;
-  startConnector: number;
-  endConnector: number;
-};
-
-type ConnectorProfile = { leftInset: number; rightInset: number };
-
-const CONNECTOR_PROFILES: Record<string, ConnectorProfile> = {
-  C: { leftInset: 20, rightInset: 8 },
-  O: { leftInset: 17, rightInset: 7 },
-  D: { leftInset: 0, rightInset: 13 },
-  L: { leftInset: 5, rightInset: 0 },
-  E: { leftInset: 5, rightInset: 0 },
-};
-
-const DEFAULT_PROFILE: ConnectorProfile = { leftInset: 0, rightInset: 0 };
-
-function layoutText(offsetX: number): LetterLayout[] {
-  const layout: LetterLayout[] = [];
-  let cursor = offsetX;
-
-  for (const char of TEXT) {
-    if (char === " ") {
-      cursor += SPACE_WIDTH;
-      continue;
-    }
-    const profile = CONNECTOR_PROFILES[char] ?? DEFAULT_PROFILE;
-    const startX = cursor;
-    const endX = cursor + LETTER_WIDTH;
-    layout.push({
-      char,
-      startX,
-      endX,
-      startConnector: startX + BASE_LEFT_INSET + profile.leftInset,
-      endConnector: endX - BASE_RIGHT_INSET - profile.rightInset,
-    });
-    cursor += LETTER_WIDTH + LETTER_GAP;
-  }
-
-  return layout;
-}
-
-function getTextTotalWidth(): number {
-  return (
-    TEXT.replace(/ /g, "").length * (LETTER_WIDTH + LETTER_GAP) -
-    LETTER_GAP +
-    (TEXT.split(" ").length - 1) * SPACE_WIDTH
-  );
-}
-
-// ─── Timing constants ────────────────────────────────────────────────────────
-
-const TRACE_SPEED = 350;
-const HEAD_SCREEN_RATIO = 1;
-const FLAT_GAP_SECONDS = 0.5;
-const HOLD_SECONDS = 1.25;
-const COMP_FPS = 60;
-
-// How long the dot/line takes to exit the right side after text finishes
-const EXIT_SECONDS = 1.5;
-
-// Pre-compute duration for export
-const _beats = buildBeats(COMP_FPS);
-const _lastBeat = _beats[_beats.length - 1];
-const _lastBeatEndWX = (_lastBeat.startFrame / COMP_FPS) * TRACE_SPEED + _lastBeat.widthPx;
-const _textStartWX = _lastBeatEndWX + FLAT_GAP_SECONDS * TRACE_SPEED;
-const _totalTextW = getTextTotalWidth();
-const _textEndWX = _textStartWX + _totalTextW;
-const _textEndFrame = Math.round((_textEndWX / TRACE_SPEED) * COMP_FPS);
-
-export const ECGCOMBINED_DURATION = _textEndFrame + Math.round(HOLD_SECONDS * COMP_FPS) + Math.round(EXIT_SECONDS * COMP_FPS);
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export const ECGCombined = () => {
-  const frame = useCurrentFrame();
-  const { fps, width, height } = useVideoConfig();
-
-  const baselineY = height * 0.5;
-  const lineColor = "#00ff41";
-  const ecgMaxDeflection = height * 0.28;
-  const textMaxDeflection = height * 0.09;
-  const beats = buildBeats(fps);
-
-  // ── World-space text position ──
-  const lastBeat = beats[beats.length - 1];
-  const lastBeatEndWorldX = (lastBeat.startFrame / fps) * TRACE_SPEED + lastBeat.widthPx;
-  const textStartWorldX = lastBeatEndWorldX + FLAT_GAP_SECONDS * TRACE_SPEED;
-  const totalTextWidth = getTextTotalWidth();
-  const textEndWorldX = textStartWorldX + totalTextWidth;
-  const textLayout = layoutText(textStartWorldX); // world-space positions
-
-  // ── Final screen position: text centered when done ──
-  const desiredTextStartScreen = (width - totalTextWidth) / 2;
-  const finalHeadScreenX = desiredTextStartScreen + totalTextWidth;
-  const headScreenDuringEcg = HEAD_SCREEN_RATIO * width;
-
-  // ── Head position (world space, keeps moving past text) ──
-  const currentTime = frame / fps;
-  const headX = currentTime * TRACE_SPEED;
-  const textEndFrame = Math.round((textEndWorldX / TRACE_SPEED) * fps);
-  const isTextPhase = headX > textStartWorldX;
-  const isTextDone = frame >= textEndFrame - 3;
-
-  // ── Viewport: keeps scrolling, head drifts from 75% → right edge ──
-  let headScreenX: number;
-  let viewOffset: number;
-
-  if (headX <= textStartWorldX) {
-    viewOffset = Math.max(0, headX - headScreenDuringEcg);
-    headScreenX = headX - viewOffset;
-  } else if (headX >= textEndWorldX) {
-    // Lock viewport so text stays centered; dot keeps moving right
-    viewOffset = textEndWorldX - finalHeadScreenX;
-    headScreenX = headX - viewOffset;
-  } else {
-    const p = (headX - textStartWorldX) / (textEndWorldX - textStartWorldX);
-    headScreenX = headScreenDuringEcg + p * (finalHeadScreenX - headScreenDuringEcg);
-    viewOffset = headX - headScreenX;
-  }
-
-  // ── Y function (world space) ──
-  function getYAtX(worldX: number): number {
-    for (const beat of beats) {
-      const beatStartX = (beat.startFrame / fps) * TRACE_SPEED;
-      const beatEndX = beatStartX + beat.widthPx;
-      if (worldX >= beatStartX && worldX <= beatEndX) {
-        const progress = (worldX - beatStartX) / beat.widthPx;
-        const beatPoints = generateHeartbeatPoints(beat.amplitude);
-        const idx = Math.min(
-          Math.floor(progress * (beatPoints.length - 1)),
-          beatPoints.length - 1,
-        );
-        return baselineY - beatPoints[idx].y * ecgMaxDeflection;
-      }
-    }
-    for (const item of textLayout) {
-      if (worldX >= item.startX && worldX <= item.endX) {
-        const t = (worldX - item.startX) / (item.endX - item.startX);
-        const letterDef = LETTERS[item.char];
-        if (letterDef) {
-          return baselineY - interpolateLetterY(letterDef, t) * textMaxDeflection;
-        }
-      }
-    }
-    return baselineY;
-  }
-
-  // ── ECG trace path (up to text start) ──
-  const firstBeatWorldX = (beats[0].startFrame / fps) * TRACE_SPEED;
-  const traceStartWX = Math.max(Math.floor(firstBeatWorldX), Math.floor(viewOffset));
-  const ecgTraceEndWX = Math.min(
-    Math.ceil(headX),
-    Math.ceil(textStartWorldX),
-    Math.ceil(viewOffset + width),
-  );
-
-  const traceSegments: string[] = [];
-  if (ecgTraceEndWX >= traceStartWX) {
-    for (let wx = traceStartWX; wx <= ecgTraceEndWX; wx++) {
-      const sx = wx - viewOffset;
-      const y = getYAtX(wx);
-      traceSegments.push(wx === traceStartWX ? `M ${sx} ${y}` : `L ${sx} ${y}`);
-    }
-  }
-  const tracePathD = traceSegments.join(" ");
-
-  // ── Flat exit line after text finishes ──
-  let exitPathD = "";
-  if (isTextDone && headX > textEndWorldX) {
-    const exitStartSX = textEndWorldX - viewOffset - 32;
-    const exitEndSX = headX - viewOffset;
-    exitPathD = `M ${exitStartSX} ${baselineY} L ${exitEndSX} ${baselineY}`;
-  }
-
-  // ── Neon fade ──
-  const neonLengthPx = 200;
-  const neonFadeScreenEnd = headScreenX;
-  const neonFadeScreenStart = neonFadeScreenEnd - neonLengthPx;
-
-  // ── Text mask ──
-  const maskBrushSize = 1;
-  const clipLeadPx = 20;
-  const blockUnmaskDelay = 15;
-  const blockFeatherPx = 10;
-
-  const textMaskEndSX = isTextPhase
-    ? (isTextDone ? width : Math.max(0, Math.min(Math.ceil(headScreenX), width)))
-    : 0;
-
-  const textMaskSegments: string[] = [];
-  if (isTextPhase && textMaskEndSX > 0 && !isTextDone) {
-    for (let sx = 0; sx <= textMaskEndSX; sx++) {
-      const y = getYAtX(viewOffset + sx);
-      textMaskSegments.push(sx === 0 ? `M ${sx} ${y}` : `L ${sx} ${y}`);
-    }
-  }
-  const textMaskPathD = textMaskSegments.join(" ");
-  const blockUnmaskX = isTextDone ? width : Math.max(0, textMaskEndSX - blockUnmaskDelay);
-
-  // ── Connectors (screen space) ──
-  const connectorSegments: string[] = [];
-  for (let i = 0; i < textLayout.length - 1; i++) {
-    const curr = textLayout[i];
-    const next = textLayout[i + 1];
-    connectorSegments.push(
-      `M ${curr.endConnector - viewOffset - 18} ${baselineY} L ${next.startConnector - viewOffset} ${baselineY}`,
-    );
-  }
-  const connectorPathD = connectorSegments.join(" ");
-
-  return (
-    <AbsoluteFill style={{ backgroundColor: "#000000", overflow: "hidden" }}>
-      <svg width={width} height={height} style={{ position: "absolute", top: 0, left: 0 }}>
-        <defs>
-          <filter id="neon" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur1" />
-            <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur2" />
-            <feGaussianBlur in="SourceGraphic" stdDeviation="14" result="blur3" />
-            <feMerge>
-              <feMergeNode in="blur3" />
-              <feMergeNode in="blur2" />
-              <feMergeNode in="blur1" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-          <filter id="neonText" x="-30%" y="-30%" width="160%" height="160%">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="tblur1" />
-            <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="tblur2" />
-            <feMerge>
-              <feMergeNode in="tblur2" />
-              <feMergeNode in="tblur1" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-          <linearGradient
-            id="neonMaskGrad"
-            gradientUnits="userSpaceOnUse"
-            x1={neonFadeScreenStart} y1={0}
-            x2={neonFadeScreenEnd} y2={0}
-          >
-            <stop offset="0%" stopColor="black" />
-            <stop offset="100%" stopColor="white" />
-          </linearGradient>
-          <mask id="neonMask">
-            <rect x={0} y={0} width={width} height={height} fill="url(#neonMaskGrad)" />
-          </mask>
-          <clipPath id="textReveal">
-            <rect
-              x={0} y={0}
-              width={isTextDone ? width : Math.max(0, headScreenX + clipLeadPx)}
-              height={height}
-            />
-          </clipPath>
-          <linearGradient
-            id="blockUnmaskGrad"
-            gradientUnits="userSpaceOnUse"
-            x1={blockUnmaskX - blockFeatherPx} y1={0}
-            x2={blockUnmaskX} y2={0}
-          >
-            <stop offset="0%" stopColor="white" />
-            <stop offset="100%" stopColor="black" />
-          </linearGradient>
-          <mask id="textWipeMask">
-            <rect x={0} y={0} width={width} height={height} fill={isTextDone ? "white" : "black"} />
-            {!isTextDone && blockUnmaskX > 0 && (
-              <rect x={0} y={0} width={blockUnmaskX} height={height} fill="url(#blockUnmaskGrad)" />
-            )}
-            {!isTextDone && textMaskPathD && (
-              <path
-                d={textMaskPathD}
-                fill="none"
-                stroke="white"
-                strokeWidth={15 * maskBrushSize}
-                strokeLinejoin="round"
-                strokeLinecap="round"
-                filter="url(#neonText)"
-              />
-            )}
-          </mask>
-          <radialGradient id="headGlow" cx="50%" cy="50%" r="50%">
-            <stop offset="0%" stopColor="#ffffff" stopOpacity={0.8} />
-            <stop offset="30%" stopColor={lineColor} stopOpacity={0.6} />
-            <stop offset="100%" stopColor={lineColor} stopOpacity={0} />
-          </radialGradient>
-        </defs>
-
-        {/* ECG trace */}
-        {tracePathD && (
-          <g>
-            <path d={tracePathD} fill="none" stroke={lineColor} strokeWidth={2}
-              strokeLinejoin="round" strokeLinecap="round" />
-            <path d={tracePathD} fill="none" stroke={lineColor} strokeWidth={2.5}
-              strokeLinejoin="round" strokeLinecap="round"
-              filter="url(#neon)" mask="url(#neonMask)" />
-          </g>
-        )}
-
-        {/* Text + connectors */}
-        {isTextPhase && (
-          <g clipPath="url(#textReveal)">
-            <g mask="url(#textWipeMask)">
-              {textLayout.map((item, i) => (
-                <text
-                  key={i}
-                  x={(item.startX + item.endX) / 2 - viewOffset}
-                  y={baselineY}
-                  textAnchor="middle"
-                  dominantBaseline="alphabetic"
-                  fontSize={Math.round(textMaxDeflection / 0.715)}
-                  fontFamily="Arial, Helvetica, sans-serif"
-                  fontWeight="bold"
-                  fill="none"
-                  stroke={lineColor}
-                  strokeWidth={1.5}
-                  filter="url(#neonText)"
-                >
-                  {item.char}
-                </text>
-              ))}
-              {connectorPathD && (
-                <path d={connectorPathD} fill="none" stroke={lineColor}
-                  strokeWidth={1.5} strokeLinecap="round" />
-              )}
-            </g>
-          </g>
-        )}
-
-        {/* Flat exit line after text */}
-        {exitPathD && (
-          <g>
-            <path d={exitPathD} fill="none" stroke={lineColor} strokeWidth={2}
-              strokeLinejoin="round" strokeLinecap="round" />
-            <path d={exitPathD} fill="none" stroke={lineColor} strokeWidth={2.5}
-              strokeLinejoin="round" strokeLinecap="round"
-              filter="url(#neon)" />
-          </g>
-        )}
-
-        {/* Head dot */}
-        {headScreenX >= 0 && headScreenX <= width && (
-          <>
-            <circle cx={headScreenX} cy={getYAtX(headX)} r={20} fill="url(#headGlow)" />
-            <circle cx={headScreenX} cy={getYAtX(headX)} r={3} fill={lineColor} />
-          </>
-        )}
-      </svg>
-
-      {/* Scanlines */}
-      <div style={{
-        position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
-        background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px)",
-        pointerEvents: "none",
-      }} />
-
-      {/* Vignette */}
-      <div style={{
-        position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
-        background: "radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%)",
-        pointerEvents: "none",
-      }} />
-    </AbsoluteFill>
-  );
-};