diff --git a/.agents/skills/bencium-controlled-ux-designer/ACCESSIBILITY.md b/.agents/skills/bencium-controlled-ux-designer/ACCESSIBILITY.md
new file mode 100644
index 0000000..417a763
--- /dev/null
+++ b/.agents/skills/bencium-controlled-ux-designer/ACCESSIBILITY.md
@@ -0,0 +1,828 @@
+# Accessibility Reference
+
+Comprehensive guide for implementing accessible interfaces following WCAG 2.1 AA standards.
+
+## Core Principles (POUR)
+
+### Perceivable
+Information and UI components must be presentable to users in ways they can perceive.
+
+### Operable
+UI components and navigation must be operable by all users.
+
+### Understandable
+Information and the operation of UI must be understandable.
+
+### Robust
+Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.
+
+## Semantic HTML
+
+### Use Appropriate Elements
+
+**Good:**
+```tsx
+
+
+
+
+ Article Title
+ Article content...
+
+
+
+
+```
+
+**Bad:**
+```tsx
+
+```
+
+### Heading Hierarchy
+
+**Correct hierarchy:**
+```tsx
+Page Title
+ Section 1
+ Subsection 1.1
+ Subsection 1.2
+ Section 2
+ Subsection 2.1
+```
+
+**Incorrect (skips levels):**
+```tsx
+Page Title
+ Section 1 // ❌ Skips h2 and h3
+```
+
+## Keyboard Navigation
+
+### Focus Management
+
+```tsx
+// Ensure all interactive elements are keyboard accessible
+
+ Accessible Button
+
+
+// Custom interactive elements need tabindex
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ handleClick();
+ }
+ }}
+ className="cursor-pointer focus:ring-4 focus:ring-blue-500"
+>
+ Custom Button
+
+```
+
+### Tab Order
+
+```tsx
+// Use tabIndex to control focus order
+
+
+// Use tabIndex={-1} to remove from tab order but allow programmatic focus
+
+ Error details...
+
+```
+
+### Skip Links
+
+```tsx
+// Allow keyboard users to skip to main content
+
+ Skip to main content
+
+
+
+ {/* Main content */}
+
+```
+
+## ARIA Attributes
+
+### Common ARIA Roles
+
+```tsx
+// Navigation landmark
+
+ {/* Navigation items */}
+
+
+// Banner (header)
+
+ {/* Header content */}
+
+
+// Main content
+
+ {/* Main content */}
+
+
+// Complementary (sidebar)
+
+ {/* Sidebar content */}
+
+
+// Content info (footer)
+
+ {/* Footer content */}
+
+
+// Search
+
+```
+
+### ARIA Labels
+
+```tsx
+// aria-label for elements without visible text
+
+
+
+// aria-labelledby to reference another element
+
+
Confirm Action
+
Are you sure you want to continue?
+
+ Password must be at least 8 characters
+
+```
+
+### ARIA States
+
+```tsx
+// aria-expanded for expandable elements
+ setIsOpen(!isOpen)}
+>
+ Menu {isOpen ?
+
+
+// aria-pressed for toggle buttons
+ setIsPressed(!isPressed)}
+>
+ {isPressed ? 'Pressed' : 'Not Pressed'}
+
+
+// aria-selected for selectable items
+
+ Tab 1
+
+
+// aria-checked for checkboxes/radio buttons
+ setIsChecked(!isChecked)}
+>
+ Custom Checkbox
+
+```
+
+### ARIA Live Regions
+
+```tsx
+// Announce changes to screen readers
+
+ {statusMessage}
+
+
+// For urgent announcements
+
+ {errorMessage}
+
+
+// For form validation
+
+ Please enter a valid email address
+
+)}
+```
+
+## Color Contrast
+
+### Minimum Contrast Ratios (WCAG AA)
+
+- **Normal text:** 4.5:1
+- **Large text (18pt+ or 14pt+ bold):** 3:1
+- **UI components and graphics:** 3:1
+
+### Good Contrast Examples
+
+```tsx
+// High contrast text
+
+ Great contrast (21:1)
+
+
+
+ Good contrast (8:1)
+
+
+// Button with good contrast
+
+ High Contrast Button (4.5:1)
+
+```
+
+### Poor Contrast Examples (Avoid)
+
+```tsx
+// ❌ Insufficient contrast
+
+ Poor contrast (2.8:1) - fails WCAG AA
+
+
+// ❌ Don't rely on color alone
+
+ Error Button (color alone indicates state)
+
+
+// ✅ Better: Use icons + color
+
+
+```
+
+### Tools for Checking Contrast
+
+- Chrome DevTools: Inspect element → Accessibility tab
+- Online: WebAIM Contrast Checker
+- Figma: Stark plugin
+
+## Alternative Text
+
+### Images
+
+```tsx
+// Informative images
+
+
+
+// Complex images
+
+
+ Detailed description of the system architecture showing
+ three main components: frontend, API layer, and database.
+ The frontend communicates with the API via REST...
+
+
+```
+
+### Icons
+
+```tsx
+import { MagnifyingGlass, Bell, User } from '@phosphor-icons/react';
+
+// Decorative icons (with adjacent text)
+
+
+
+// Functional icons (no adjacent text)
+
+
+
+// Icons with state
+
+ 3 unread notifications
+ 3
+
+```
+
+## Forms
+
+### Labels and Instructions
+
+```tsx
+// Always associate labels with inputs
+
+
+ Email Address
+
+
+
+// Group related inputs
+
+ Contact Preferences
+
+
+
+
+
+
+
+```
+
+### Error Handling
+
+```tsx
+
+
+ Password
+
+
+
+ Must be at least 8 characters
+
+ {hasError && (
+
+
+ )}
+
+ Full Name
+ *
+
+
+ Email
+ (required)
+
+```
+
+## Screen Reader-Only Content
+
+### sr-only Class
+
+```css
+/* Add to your CSS */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.focus\:not-sr-only:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ padding: inherit;
+ margin: inherit;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+}
+```
+
+### Usage Examples
+
+```tsx
+// Add context for screen readers
+
+ Add to favorites
+
+
+// Provide additional context
+
+
Products
+ Showing 24 of 100 results
+
+
+// Skip link
+
+ Skip to main content
+
+```
+
+## Focus Indicators
+
+### Visible Focus States
+
+```tsx
+// Default focus with ring
+
+ Click Me
+
+
+// Custom focus style
+
+ Link Text
+
+
+// Focus within containers
+
+
+```
+
+### Focus Management in Modals
+
+```tsx
+import { useEffect, useRef } from 'react';
+
+function Modal({ isOpen, onClose, children }) {
+ const modalRef = useRef(null);
+ const previousFocus = useRef(null);
+
+ useEffect(() => {
+ if (isOpen) {
+ // Store current focus
+ previousFocus.current = document.activeElement;
+
+ // Focus modal
+ modalRef.current?.focus();
+
+ // Trap focus within modal
+ const handleTab = (e) => {
+ if (e.key === 'Tab') {
+ const focusableElements = modalRef.current.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ );
+ const firstElement = focusableElements[0];
+ const lastElement = focusableElements[focusableElements.length - 1];
+
+ if (e.shiftKey && document.activeElement === firstElement) {
+ e.preventDefault();
+ lastElement.focus();
+ } else if (!e.shiftKey && document.activeElement === lastElement) {
+ e.preventDefault();
+ firstElement.focus();
+ }
+ }
+ };
+
+ document.addEventListener('keydown', handleTab);
+ return () => document.removeEventListener('keydown', handleTab);
+ } else {
+ // Restore focus
+ previousFocus.current?.focus();
+ }
+ }, [isOpen]);
+
+ if (!isOpen) return null;
+
+ return (
+
+
e.stopPropagation()}
+ >
+ {children}
+
+ Close
+
+
+
+
+
+
+ Confirm Action
+
+
+ Are you sure you want to proceed?
+
+
+
+ Confirm
+
+
+ Cancel
+
+
+
+
+
+ {tabs.map((tab, index) => (
+ setActiveTab(index)}
+ className={`
+ px-4 py-2 border-b-2
+ ${activeTab === index
+ ? 'border-blue-600 font-medium'
+ : 'border-transparent'
+ }
+ `}
+ >
+ {tab.label}
+
+ ))}
+
+ {tabs.map((tab, index) => (
+
+ {tab.content}
+
+ ))}
+
+
setIsVisible(true)}
+ onMouseLeave={() => setIsVisible(false)}
+ onFocus={() => setIsVisible(true)}
+ onBlur={() => setIsVisible(false)}
+ >
+ {children}
+
+ {isVisible && (
+
+ {text}
+
+ )}
+
+ Hover Me
+
+
+// Framer Motion
+
+ Hover Me
+
+```
+
+**Link Hover:**
+```tsx
+
+ Link Text
+
+```
+
+**Card Hover:**
+```tsx
+
+ Card Content
+
+```
+
+### Focus States
+
+**Keyboard Focus:**
+```tsx
+
+ Focus Me
+
+```
+
+**Input Focus:**
+```tsx
+
+ Press Me
+
+
+// CSS alternative
+
+ Press Me
+
+```
+
+### Disabled States
+
+**Disabled Button:**
+```tsx
+
+ Disabled
+
+```
+
+### Loading States
+
+**Loading Spinner:**
+```tsx
+
+
+
+// CSS
+@keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+.spinner {
+ animation: spin 1s linear infinite;
+}
+```
+
+**Skeleton Loader:**
+```tsx
+
+
+// CSS
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.5; }
+}
+
+.animate-pulse {
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+```
+
+### Success Feedback
+
+**Checkmark Animation:**
+```tsx
+
+
+```
+
+**Toast Notification:**
+```tsx
+
+ Success! Changes saved.
+
+```
+
+### Error Feedback
+
+**Shake Animation:**
+```tsx
+
+
+
+// CSS alternative
+@keyframes shake {
+ 0%, 100% { transform: translateX(0); }
+ 20%, 60% { transform: translateX(-4px); }
+ 40%, 80% { transform: translateX(4px); }
+}
+
+.shake {
+ animation: shake 0.3s ease-in-out;
+}
+```
+
+**Error Message Slide-in:**
+```tsx
+
+ Please enter a valid email address
+
+```
+
+### Warning Feedback
+
+**Pulse Animation:**
+```tsx
+
+ Warning Content
+
+```
+
+### Form Validation
+
+**Field Validation (On Blur):**
+```tsx
+// Validate on blur, not during typing
+
+ Please enter a valid email
+
+)}
+```
+
+## Common Animation Patterns
+
+### Fade In
+```tsx
+// Framer Motion
+
+ Content
+
+
+// CSS
+.fade-in {
+ animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+```
+
+### Slide Up
+```tsx
+// Framer Motion
+
+ Content
+
+
+// CSS
+.slide-up {
+ animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+```
+
+### Scale + Fade (Modal)
+```tsx
+// Framer Motion
+
+ Modal content
+
+```
+
+### Stagger Children
+```tsx
+// Framer Motion
+
+ {items.map(item => (
+
+ {item.name}
+
+ ))}
+
+```
+
+## Performance Checklist
+
+- [ ] Only animate `transform` and `opacity`
+- [ ] Avoid animating `width`, `height`, `top`, `left`, `margin`, `padding`
+- [ ] Test on mobile devices (target 60fps)
+- [ ] Use `will-change` only for complex animations
+- [ ] Implement `prefers-reduced-motion` media query
+- [ ] Keep animation duration under 500ms for UI interactions
+- [ ] Use CSS animations for simple transitions (better performance)
+- [ ] Use JS animation libraries for complex, choreographed sequences
+
+## Accessibility
+
+```css
+/* Disable or reduce animations for users who prefer less motion */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+```
+
+**Implementation in React:**
+```tsx
+import { useReducedMotion } from 'framer-motion';
+
+function MyComponent() {
+ const shouldReduceMotion = useReducedMotion();
+
+ return (
+
+ Content
+
+ );
+}
+```
+
+## Testing Animations
+
+1. **Test at 60fps** on target devices
+2. **Test with slow network** (does page still feel responsive?)
+3. **Test with reduced motion** preferences enabled
+4. **Verify animations don't block** critical user actions
+5. **Check that animations add value** (remove if purely decorative)
+6. **Test on low-end devices** (not just your development machine)
+7. **Measure performance** with Chrome DevTools Performance tab
+8. **Check for layout thrashing** (avoid reading and writing to DOM in same frame)
+
+## Animation & Gestalt Principles
+
+### Proximity
+Animated elements that are near each other should move together to reinforce grouping:
+```tsx
+// Animate card and its children together
+
+ Title
+ Content
+ Action
+
+```
+
+### Similarity
+Similar elements should have similar animation characteristics:
+```tsx
+// All buttons use same hover animation
+const buttonAnimation = {
+ whileHover: { scale: 1.02 },
+ transition: { duration: 0.15, ease: "easeOut" }
+};
+
+Button 1
+Button 2
+```
+
+### Continuity
+Movement should follow natural, smooth paths:
+```tsx
+// Smooth curve, not jumpy angles
+
+ Modal Content
+
+
+```
+
+## Resources
+
+- [Framer Motion Documentation](https://www.framer.com/motion/)
+- [CSS Easing Functions](https://easings.net/)
+- [Material Design Motion](https://m2.material.io/design/motion/)
+- [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
diff --git a/.agents/skills/bencium-controlled-ux-designer/RESPONSIVE-DESIGN.md b/.agents/skills/bencium-controlled-ux-designer/RESPONSIVE-DESIGN.md
new file mode 100644
index 0000000..ccac05b
--- /dev/null
+++ b/.agents/skills/bencium-controlled-ux-designer/RESPONSIVE-DESIGN.md
@@ -0,0 +1,604 @@
+# Responsive Design Reference
+
+Detailed reference for implementing responsive, mobile-first designs.
+
+## Mobile-First Approach
+
+Always start with mobile design, then progressively enhance for larger screens.
+
+**Why Mobile-First:**
+- Forces focus on essential content
+- Easier to scale up than scale down
+- Better performance on mobile devices
+- Aligns with usage patterns (mobile-first web)
+
+## Breakpoint Strategy
+
+### Standard Breakpoints
+
+```css
+/* Mobile First Approach */
+/* Base styles: 0-640px (mobile) */
+
+/* Small tablets and large phones */
+@media (min-width: 640px) { }
+
+/* Tablets */
+@media (min-width: 768px) { }
+
+/* Small laptops */
+@media (min-width: 1024px) { }
+
+/* Desktops */
+@media (min-width: 1280px) { }
+
+/* Large desktops */
+@media (min-width: 1536px) { }
+```
+
+### Specific Breakpoint Ranges
+
+| Range | Pixels | Target Devices | Layout Strategy |
+|-------|--------|----------------|-----------------|
+| **XS** | 0-479px | Small phones (iPhone SE, older Android) | Single column, stacked navigation, large touch targets (min 44px) |
+| **SM** | 480-767px | Large phones (iPhone 14, most modern phones) | Single column, simplified UI, bottom navigation, reduced complexity |
+| **MD** | 768-1023px | Tablets (iPad, Android tablets) | 2 columns possible, sidebar navigation, some desktop features |
+| **LG** | 1024-1439px | Small laptops, landscape tablets | Multi-column layouts, full navigation, desktop UI patterns |
+| **XL** | 1440px+ | Desktop monitors, large screens | Max-width containers, multi-panel layouts, advanced features visible |
+
+**Mobile Simplification Examples:**
+
+- **Navigation**: Hamburger menu (mobile) → Full nav bar (desktop)
+- **Forms**: Stacked fields (mobile) → Side-by-side fields (desktop)
+- **Content**: Single column (mobile) → Multi-column grid (desktop)
+- **Actions**: Fixed bottom bar (mobile) → Inline buttons (desktop)
+- **Tables**: Collapsed cards (mobile) → Full data table (desktop)
+- **Sidebars**: Hidden/collapsible (mobile) → Always visible (desktop)
+- **Filters**: Modal/drawer (mobile) → Sidebar panel (desktop)
+
+### Tailwind Responsive Classes
+
+```tsx
+
+ Responsive width
+
+```
+
+## Responsive Images
+
+### Using srcset for Responsive Images
+
+```tsx
+
+ Responsive Headline
+
+```
+
+### Fluid Typography with CSS Clamp
+
+```css
+h1 {
+ /* min: 2rem (32px), preferred: 5vw, max: 4rem (64px) */
+ font-size: clamp(2rem, 5vw, 4rem);
+ line-height: 1.2;
+}
+
+p {
+ /* min: 1rem (16px), preferred: 2.5vw, max: 1.25rem (20px) */
+ font-size: clamp(1rem, 2.5vw, 1.25rem);
+ line-height: 1.6;
+}
+```
+
+## Responsive Layouts
+
+### CSS Grid Responsive Pattern
+
+```tsx
+
+ {items.map(item => (
+ {item.content}
+ ))}
+
+```
+
+### Flexbox Responsive Pattern
+
+```tsx
+
+
Content Left
+
Content Right
+
+ Tap Me
+
+```
+
+### Touch Gestures
+
+```tsx
+// Consider common mobile gestures
+
+ {/* Scrollable content */}
+
+```
+
+## Navigation Patterns
+
+### Mobile Menu Pattern
+
+```tsx
+import { useState } from 'react';
+import { List, X } from '@phosphor-icons/react';
+
+export function MobileNav() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ {/* Mobile menu button */}
+ setIsOpen(!isOpen)}
+ className="md:hidden p-2"
+ aria-label="Toggle menu"
+ >
+ {isOpen ?
}
+
+
+ {/* Mobile menu overlay */}
+ {isOpen && (
+
+
+ {/* Navigation items */}
+
+
+ )}
+
+ {/* Desktop navigation */}
+
+ {/* Navigation items */}
+
+
+ );
+}
+```
+
+### Sticky Navigation
+
+```tsx
+
+
+ {/* Navigation content */}
+
+
+```
+
+## Responsive Forms
+
+### Form Layout Pattern
+
+```tsx
+
+```
+
+## Responsive Content Hiding
+
+### Show/Hide Based on Screen Size
+
+```tsx
+
+ {/* Show only on mobile */}
+
+ Mobile content
+
+
+ {/* Show only on tablet and up */}
+
+ Desktop content
+
+
+ {/* Show only on desktop */}
+
+ Large screen content
+
+
+
+
+
+```
+
+## Testing Responsive Designs
+
+### Browser DevTools
+
+1. Open Chrome/Firefox DevTools (F12)
+2. Toggle device toolbar (Ctrl+Shift+M)
+3. Test common breakpoints:
+ - iPhone SE (375px)
+ - iPhone 12 Pro (390px)
+ - iPad (768px)
+ - iPad Pro (1024px)
+ - Desktop (1280px+)
+
+### Real Device Testing
+
+**Essential devices to test:**
+- Small phone (iPhone SE, Android small)
+- Large phone (iPhone Pro Max, Android large)
+- Tablet (iPad, Android tablet)
+- Desktop (various resolutions)
+
+### Playwright Testing
+
+```typescript
+// Use playwright MCP to test responsive breakpoints
+await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE
+await page.screenshot({ path: 'mobile.png' });
+
+await page.setViewportSize({ width: 768, height: 1024 }); // iPad
+await page.screenshot({ path: 'tablet.png' });
+
+await page.setViewportSize({ width: 1920, height: 1080 }); // Desktop
+await page.screenshot({ path: 'desktop.png' });
+```
+
+## Common Responsive Patterns
+
+### Card Grid
+
+```tsx
+
+ {items.map(item => (
+
+
+
{item.title}
+
{item.description}
+
+ ))}
+
+
+
+
+ Your Headline Here
+
+
+ Supporting description that works across all screen sizes.
+
+
+
+ Primary Action
+
+
+ Secondary Action
+
+
+
+
+
+
+
+```
+
+## Accessibility Considerations
+
+### Focus Management on Mobile
+
+```tsx
+
+ Action
+
+```
+
+### Skip Links
+
+```tsx
+
+ Skip to main content
+
+```
+
+## Best Practices Summary
+
+✅ **Do:**
+- Start with mobile design first
+- Use relative units (rem, em, %) for flexibility
+- Test on real devices, not just emulators
+- Ensure touch targets are at least 44x44px
+- Use semantic HTML for better accessibility
+- Implement lazy loading for images and videos
+- Optimize assets for mobile networks
+- Use CSS Grid and Flexbox for flexible layouts
+- Provide adequate spacing between interactive elements
+
+❌ **Don't:**
+- Design for desktop first and scale down
+- Use fixed pixel widths for layout containers
+- Rely solely on browser DevTools for testing
+- Make touch targets too small
+- Forget keyboard navigation
+- Load all images eagerly
+- Use large unoptimized images on mobile
+- Use complex nested tables for layout
+- Place important actions in hard-to-reach areas
diff --git a/.agents/skills/bencium-controlled-ux-designer/SKILL.md b/.agents/skills/bencium-controlled-ux-designer/SKILL.md
new file mode 100644
index 0000000..eaf120c
--- /dev/null
+++ b/.agents/skills/bencium-controlled-ux-designer/SKILL.md
@@ -0,0 +1,738 @@
+---
+name: bencium-controlled-ux-designer
+description: Expert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.
+metadata:
+ version: 1.0.0
+---
+
+# UX Designer
+
+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.
+
+## Core Philosophy
+
+**CRITICAL: Design Decision Protocol**
+- **ALWAYS ASK** before making any design decisions (colors, fonts, sizes, layouts)
+- Never implement design changes until explicitly instructed
+- The guidelines below are practical guidance for when design decisions are approved
+- Present alternatives and trade-offs, not single "correct" solutions
+
+## Foundational Design Principles
+
+### Stand Out From Generic Patterns
+
+**Avoid Generic Training Dataset Patterns:**
+- Don't default to "Claude style" designs (excessive bauhaus, liquid glass, apple-like)
+- Don't use generic SaaS aesthetics that look machine-generated
+- Don't rely only on solid colors - suggest photography, patterns, textures
+- 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 should communicate affordance through color, spacing, and typography (not shadows)
+ - Cards use borders and background differentiation (not depth effects)
+ - Animations follow real-world physics principles adapted to digital responsiveness
+
+ **Examples:**
+ - Clickable: Use distinct colors, hover state changes, cursor feedback
+ - Containers: Use subtle borders (1px), background color shifts, or generous padding
+ - Hierarchy: Use scale, weight, and spacing rather than elevation
+
+3. **Functional Layering (Not Visual Depth)**
+ - Create hierarchy through typography scale, color contrast, and spatial relationships
+ - Layer information conceptually (primary → secondary → tertiary)
+ - Reject skeuomorphic shadows/gradients that imitate physical depth
+ - Embrace functional depth: modals over content, dropdowns over UI
+
+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 (personality over pure legibility)
+- Body/UI: Functional, highly legible (clarity over expression)
+- 2-3 typefaces maximum
+- Clear mathematical scale (e.g., 1.25x between sizes)
+
+**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, see DESIGN-SYSTEM-TEMPLATE.md (meta-framework, project templates, decision trees).
+
+## 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:
+- Avoid default SaaS blue (#3B82F6) unless it fits your brand
+- Consider unexpected neutrals: warm greys, soft off-whites, deep charcoals
+- Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate
+- Test combinations against "does this look AI-generated?" filter
+
+### 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
+- Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700)
+- Prefer variable fonts for fine-tuned control and performance
+
+**Font Version Usage:**
+- **Display version**: Headlines and hero text only
+- **Text version**: Paragraphs and long-form content
+- **Caption/Micro**: Small UI labels (1-2 lines, non-critical info)
+
+**Recommended Sources:**
+- Google Fonts for web (free, well-optimized, reliable)
+- System fonts for performance-critical apps (-apple-system, BlinkMacSystemFont, Segoe UI)
+- Choose fonts that serve your brand's purpose (not "trending" lists)
+
+**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
+
+ Responsive Headline
+
+
+// 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 & Animation
+
+**Purposeful Animation:**
+
+Every animation must serve a functional purpose:
+- **Orient users**: Smooth transitions during navigation changes
+- **Establish relationships**: Show how elements connect (expand from source, slide between states)
+- **Provide feedback**: Confirm interactions (button press, form submission)
+- **Guide attention**: Direct focus to important changes (new messages, errors)
+
+**Animation & Gestalt Principles:**
+
+Motion should reinforce visual relationships:
+- **Proximity**: Elements near each other move together (grouped cards animating)
+- **Similarity**: Similar elements animate similarly (all buttons have same hover timing)
+- **Continuity**: Movement follows natural paths (smooth curves, not jumpy angles)
+- **Figure-ground**: Important elements animate while backgrounds stay stable
+
+**Natural Physics:**
+
+Animations should feel organic, not mechanical:
+- **Easing**: Use ease-out for entrances (fast start, slow end)
+- **Easing**: Use ease-in for exits (slow start, fast end)
+- **Easing**: Use ease-in-out for transitions (smooth both ends)
+- Avoid linear easing (feels robotic) except for continuous loops
+- Apply appropriate mass/momentum (lightweight UI vs weighty modals)
+
+**Subtle Restraint:**
+- Animations should be felt rather than seen
+- Don't delay user actions unnecessarily (keep under 300ms for interactive feedback)
+- Never block critical actions with decorative animations
+- Respect `prefers-reduced-motion` media query
+
+**Timing Guidelines:**
+
+- **Micro-interactions** (button press, checkbox toggle): 100-150ms
+- **State changes** (expanding accordion, tab switch): 200-300ms
+- **Page transitions** (route changes, modal open/close): 300-500ms
+- **Attention-directing** (notification appearance, error highlight): 200-400ms
+
+**Physics Profiles:**
+
+Define consistent durations for element types:
+- **Lightweight** (icons, small UI): 150ms
+- **Standard** (cards, panels): 300ms
+- **Weighty** (modals, page transitions): 500ms
+
+**Performance Optimization:**
+
+- Animate `transform` and `opacity` only (GPU-accelerated, smooth 60fps)
+- Avoid animating `width`, `height`, `top`, `left`, `margin` (causes reflow/repaint)
+- Use `will-change` sparingly for complex animations (pre-allocates GPU resources)
+- Test on low-end devices (60fps on powerful hardware ≠ 60fps on mobile)
+
+**Implementation:**
+- Use `framer-motion` sparingly and purposefully
+- Prefer CSS animations over JavaScript when possible (better performance)
+- Use CSS transitions for simple hover/focus states
+- Implement `@media (prefers-reduced-motion: reduce)` to disable/reduce animations
+
+**Example:**
+```tsx
+// Simple hover transition
+
+ Click me
+
+
+// Framer Motion for complex interaction
+
+ Content
+
+```
+
+**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. **Minimal, Flat Design**
+
+ Current aesthetic preference:
+ - No drop shadows (except subtle ones for modals/dropdowns)
+ - No gradients for depth (use for accents/backgrounds if desired)
+ - No glass morphism effects
+ - Focus on typography, color, and spacing to create hierarchy
+ - Functional depth: Layers of content (modals, sheets) use positioning, not visual depth
+
+**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 (`` over ``)
+- 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";
+ Get Started
+
+```
+
+### 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
+
+
+ Headline Here
+
+
+ Supporting subheading
+
+
+ Body text optimized for readability with proper line height.
+
+
+ Accessible
+
+
+// Custom elements need tabindex and key handlers
+ (e.key === 'Enter' || e.key === ' ') && handleClick()}
+>
+ Custom Button
+
+```
+
+**Essentials:**
+- Tab through entire interface
+- Enter/Space activates elements
+- Escape closes modals
+- Visible focus indicators always
+
+## Essential ARIA
+
+```tsx
+// Buttons without text
+Menu
+
+// Live regions for dynamic content
+{statusMessage}
+{errorMessage}
+
+// Form errors
+Error text
}
+```
+
+## Semantic HTML
+
+```tsx
+// Use semantic elements, not divs
+
+... Page Title
+ Section
+ Subsection
+```
+
+## 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
+Additional context
+
+// Skip link
+
+ Skip to main content
+
+```
+
+## 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/)
diff --git a/.agents/skills/bencium-impact-designer/MOTION-SPEC.md b/.agents/skills/bencium-impact-designer/MOTION-SPEC.md
new file mode 100644
index 0000000..e37e363
--- /dev/null
+++ b/.agents/skills/bencium-impact-designer/MOTION-SPEC.md
@@ -0,0 +1,72 @@
+# 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)
+
+
+// Fade + slide (Framer Motion)
+
+
+```
+
+## 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/)
diff --git a/.agents/skills/bencium-impact-designer/RESPONSIVE-DESIGN.md b/.agents/skills/bencium-impact-designer/RESPONSIVE-DESIGN.md
new file mode 100644
index 0000000..e1a33eb
--- /dev/null
+++ b/.agents/skills/bencium-impact-designer/RESPONSIVE-DESIGN.md
@@ -0,0 +1,90 @@
+# 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
+
+
+// Responsive grid
+
+
+// Responsive typography
+
+
+// Show/hide by breakpoint
+ Mobile only
+Desktop only
+```
+
+## 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
+
+```
+
+## 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
+
+ Responsive Headline
+
+
+// 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).
+
+### Motion Requirements (Implementation Checklist)
+
+These are specific, high-impact motion patterns to implement for memorable interfaces:
+
+**Scroll-Triggered Animations:**
+- Use Intersection Observer API for performant scroll detection
+- Trigger animations when elements enter viewport (not on page load)
+- Example: `data-animate="fade-up"` with `.is-visible` class toggle
+
+**Staggered Reveal Animations:**
+- Use `animation-delay` for sequential element reveals
+- Apply to lists, grids, and grouped content
+
+*Timing principles (not rules):*
+- **Base delay**: 50-150ms between elements (faster = energetic, slower = elegant)
+- **Total sequence**: Keep under 1s or users lose patience
+- **Pattern choices**: Linear (predictable), eased (accelerating/decelerating), or random (chaotic)
+- **Direction**: Left-to-right, top-to-bottom, diagonal, center-out, or edge-in
+
+**Background Atmosphere:**
+- Add grain/noise texture overlay via `body::before` pseudo-element
+- Create floating/pulsing background orbs with `@keyframes`
+
+*Ambient motion principles:*
+- **Duration**: 8-20s for background elements (slow = calming, faster = energetic)
+- **Transform types**: translateY (floating), scale (breathing), rotate (orbiting)
+- **Easing**: Use `ease-in-out` for organic, breathing feel
+- **Intensity**: Subtle (5-20px movement) for backgrounds, bolder for hero elements
+- **Layering**: Multiple elements at different speeds create depth (parallax effect)
+
+**Layout Animation:**
+- Use asymmetric bento grid layouts with varied reveal timing
+- Animate grid items individually, not the container
+- Consider diagonal or wave-pattern reveal sequences
+
+**Data Visualization Motion:**
+- Include animated progress bars that fill on scroll-trigger
+- Implement stat counters that count up when visible
+- Use easing that slows at the end (ease-out) for natural feel
+
+**Hover State Transformations:**
+- `translateY(-4px)` for subtle lift effect
+- `scale(1.02-1.05)` for emphasis
+- Glow effects via `box-shadow` with accent color
+- Combine transforms: `transform: translateY(-4px) scale(1.02);`
+- Always include `transition` for smooth state changes
+
+**Social Proof Motion:**
+- Implement infinite marquee/ticker for testimonials, logos, or stats
+- Use CSS-only approach with `@keyframes` for seamless loop
+- Pause on hover for accessibility (`animation-play-state: paused`)
+
+*Marquee principles:*
+- **Speed**: 20-60s for full cycle (slower = premium, faster = urgency)
+- **Direction**: Horizontal (traditional), vertical (unique), or diagonal (bold)
+- **Content duplication**: Duplicate content 2x for seamless loop
+- **Gap control**: Consistent spacing between items (use flexbox gap)
+- **Pause behavior**: Always pause on hover/focus for accessibility
+
+### Visual Effects (Implementation Checklist)
+
+Consolidated checklist for atmospheric visual effects (complements Color & Typography sections):
+
+**Gradient Mesh Backgrounds:**
+- Use multiple radial gradients with offset positions
+- Blend with `background-blend-mode: multiply` or `overlay`
+- Animate gradient positions subtly for living backgrounds
+
+*Gradient mesh principles:*
+- **Layer count**: 2-4 radial gradients (more = richer, fewer = cleaner)
+- **Position strategy**: Offset from corners/edges (20-30% from edge creates tension)
+- **Opacity range**: 0.1-0.4 for overlays (subtle), 0.5-0.8 for dominant
+- **Shape choices**: Ellipse (organic), circle (focused), conic (radial burst)
+- **Animation**: Shift positions 10-30% over 15-30s for subtle movement
+
+**Dramatic Shadows (Not Subtle):**
+- Use layered shadows for depth: `box-shadow: 0 4px 6px rgba(), 0 10px 20px rgba();`
+- Add color to shadows from accent palette
+- Consider `drop-shadow` filter for non-rectangular elements
+- Shadows should be visible and intentional, not barely perceptible
+
+**Layered Transparencies:**
+- Stack elements with `rgba()` or `hsla()` backgrounds
+- Use `backdrop-filter: blur()` sparingly (performance cost)
+- Create depth through overlapping translucent layers
+
+**Grain/Noise Texture:**
+- Apply via `::before` or `::after` pseudo-element
+- Use SVG noise filter or tiny repeating PNG
+- Set `opacity: 0.03-0.08` for subtle texture
+- Use `pointer-events: none` to not interfere with interactions
+
+**Custom Cursors:**
+- Change cursor for interactive regions: `cursor: pointer`
+- Consider custom cursor images for brand differentiation
+- Use `cursor: grab` / `cursor: grabbing` for draggable elements
+- Always provide fallback: `cursor: url(custom.cur), pointer;`
+
+### 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 (`` over ``)
+- 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";
+ Get Started
+
+```
+
+### 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
+
+
+ Headline Here
+
+
+ Supporting subheading
+
+
+ Body text optimized for readability with proper line height.
+
+
+ Accessible
+
+
+// Custom elements need tabindex and key handlers
+ (e.key === 'Enter' || e.key === ' ') && handleClick()}
+>
+ Custom Button
+
+```
+
+**Essentials:**
+- Tab through entire interface
+- Enter/Space activates elements
+- Escape closes modals
+- Visible focus indicators always
+
+## Essential ARIA
+
+```tsx
+// Buttons without text
+Menu
+
+// Live regions for dynamic content
+{statusMessage}
+{errorMessage}
+
+// Form errors
+Error text
}
+```
+
+## Semantic HTML
+
+```tsx
+// Use semantic elements, not divs
+
+... Page Title
+ Section
+ Subsection
+```
+
+## 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
+Additional context
+
+// Skip link
+
+ Skip to main content
+
+```
+
+## 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/)
diff --git a/.agents/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md b/.agents/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md
new file mode 100644
index 0000000..e968748
--- /dev/null
+++ b/.agents/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md
@@ -0,0 +1,577 @@
+# 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
diff --git a/.agents/skills/bencium-innovative-ux-designer/MOTION-SPEC.md b/.agents/skills/bencium-innovative-ux-designer/MOTION-SPEC.md
new file mode 100644
index 0000000..e37e363
--- /dev/null
+++ b/.agents/skills/bencium-innovative-ux-designer/MOTION-SPEC.md
@@ -0,0 +1,72 @@
+# 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)
+
+
+// Fade + slide (Framer Motion)
+
+
+```
+
+## 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/)
diff --git a/.agents/skills/bencium-innovative-ux-designer/RESPONSIVE-DESIGN.md b/.agents/skills/bencium-innovative-ux-designer/RESPONSIVE-DESIGN.md
new file mode 100644
index 0000000..e1a33eb
--- /dev/null
+++ b/.agents/skills/bencium-innovative-ux-designer/RESPONSIVE-DESIGN.md
@@ -0,0 +1,90 @@
+# 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
+
+
+// Responsive grid
+
+
+// Responsive typography
+
+
+// Show/hide by breakpoint
+ Mobile only
+Desktop only
+```
+
+## 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
+
+```
+
+## 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
+
+ Responsive Headline
+
+
+// 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 (`` over ``)
+- 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";
+ Get Started
+
+```
+
+### 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
+
+
+ Headline Here
+
+
+ Supporting subheading
+
+
+ Body text optimized for readability with proper line height.
+
+
;
+ };
+ decisionPatterns: {
+ priceThreshold: number; // evolves over time
+ preferredSuppliers: string[]; // learns from choices
+ urgencyIndicators: string[]; // context signals
+ };
+ };
+
+ trustLevel: {
+ stage: 'transparency' | 'selective' | 'autonomous';
+ delegationComfort: number; // 0-100
+ autonomousCategories: string[]; // what user trusts system to handle
+ lastTrustCheckpoint: Date;
+ };
+
+ ongoingGoals: {
+ primaryObjective: 'reduce_mttr' | 'optimize_costs' | 'improve_first_fix';
+ constraints: string[];
+ progressMetrics: {
+ baseline: number;
+ current: number;
+ trend: 'improving' | 'stable' | 'declining';
+ };
+ };
+}
+
+// Proactive Nudging Example
+function generateContextualSuggestion(
+ context: UserRelationshipContext,
+ currentSituation: ServiceTicket
+): Suggestion {
+ // System recognizes pattern: Wednesday + hydraulic issues
+ if (isWednesday() && currentSituation.involves('hydraulic')) {
+ const historicalPattern = context.behavioralPatterns
+ .searchFrustrationIndicators.weekdayPattern.get('Wednesday');
+
+ return {
+ message: "Based on 8 similar Wednesday cases, here's what you typically need...",
+ suggestions: preloadCommonParts(historicalPattern),
+ confidence: 0.87,
+ reasoning: context.trustLevel.stage === 'transparency'
+ ? "Show full historical analysis"
+ : "Hide reasoning, show confidence only"
+ };
+ }
+}
+```
+
+## Example 2: Memory-Aware Content Discovery (Streaming Service)
+
+### Traditional Approach
+- User searches for "sci-fi" for 20 minutes
+- Finds nothing satisfying
+- Closes app
+- Next day: same generic recommendations, no awareness of yesterday's frustration
+
+### Agentic Approach
+
+**Memory-Aware Interface**
+```
+"Yesterday you spent 20 min frustrated searching for sci-fi.
+Noticed you skipped 14 action-heavy titles but paused on
+philosophical/cerebral ones. Found these new releases that
+match your mood pattern: [Arrival, Solaris, Annihilation]"
+```
+
+**Trust Evolution**
+- **Early:** Explains every recommendation: "Suggesting Arrival because 87% of users who liked Contact also enjoyed this, and you watched Contact 3× last year"
+- **Later:** Shows recommendations with simple confidence indicator
+- **Mature:** Creates personalized category: "Cerebral Sci-Fi You'll Actually Finish" (learns completion patterns)
+
+**Relationship Metrics**
+- Time to find satisfying content: Week 1: 18 min → Month 3: 4 min (78% improvement)
+- Discovery satisfaction: 8.4/10 (up from 5.2/10 at onboarding)
+- Autonomous playlist acceptance rate: 71% (users play without previewing)
+
+## Example 3: Collaborative Planning Assistant (Project Management)
+
+### Traditional Approach
+- User creates tasks manually
+- System displays Gantt chart
+- No understanding of user's working style, energy patterns, or goal priority evolution
+
+### Agentic Approach
+
+**Goal Continuity**
+```
+System maintains awareness:
+"Your Q2 goal: ship MVP by June 30.
+Detected: 3 days behind schedule since design revisions.
+Morning energy pattern: you do best creative work 8-10am.
+Suggestion: block tomorrow 8-10am for design finalization (uninterrupted)."
+```
+
+**Collaborative Planning Pattern**
+Human: "Need to add user authentication"
+System: "I see 3 approaches:
+1. OAuth (2 day setup, best for scale) - matches your long-term goals
+2. Simple email/password (4 hour setup) - MVP-ready
+3. Magic link (8 hours, good UX) - middle ground
+
+Based on your 'ship by June 30' goal and current 3-day delay,
+I suggest option 2 now, plan migration to option 1 in July.
+Your past decisions favored 'working now > perfect later' under time pressure."
+
+**Adaptive Interface**
+- Week 1: Full task board, all options visible
+- Month 2: System learned user rarely uses Gantt view, auto-hides it
+- Month 3: Surfaces "energy-matched tasks" automatically based on time of day
+
+**Trust Evolution**
+- **Transparency Phase:** Shows reasoning for all scheduling suggestions
+- **Selective Phase:** Auto-schedules routine tasks, asks about strategic decisions
+- **Autonomous Phase:** Manages entire routine workflow, only escalates conflicts/uncertainties
+
+**Relationship Metrics**
+- Project completion rate: +34% since onboarding
+- User-reported "feeling overwhelmed": decreased from 7/10 to 3/10
+- System-suggested schedules accepted: 82%
+- Planning time reduced: 45 min/week → 12 min/week
+
+## Example 4: Trust-Evolving Financial Advisor
+
+### Traditional Approach
+- User logs in to see portfolio
+- System shows generic risk profile based on questionnaire
+- No learning from user's actual behavior, emotional responses, or decision patterns
+
+### Agentic Approach
+
+**Memory Architecture**
+```
+System tracks:
+- User's stated risk tolerance: "Moderate" (from questionnaire)
+- User's actual behavior: panics during 5% dips, holds through 20% gains
+- Emotional patterns: checks portfolio 8× on red days, 1× on green days
+- Decision patterns: sells near bottom, regrets later, wants "guardrails"
+
+Real understanding: "Conservative during volatility, despite stated moderate tolerance"
+```
+
+**Trust Evolution Design**
+
+**Phase 1: Transparency (Months 1-2)**
+```
+Every suggestion shows:
+"Recommending moving 15% to bonds because:
+- Your portfolio checks increased 4× this week (stress indicator)
+- Historical pattern: you make regrettable decisions when checking >5× daily
+- This will reduce volatility by 18% while maintaining 73% of growth potential
+- Based on your actual behavior pattern, not questionnaire answers"
+```
+
+**Phase 2: Selective Disclosure (Months 3-6)**
+```
+Routine rebalancing: Quiet execution with simple notification
+"Rebalanced portfolio (standard monthly maintenance)"
+
+Significant decisions: Full explanation
+"Suggesting defensive position. Market volatility elevated +
+your stress indicators active. Details: [expand]"
+```
+
+**Phase 3: Autonomous Action (Month 7+)**
+```
+System has earned trust to:
+- Auto-rebalance within agreed parameters
+- Execute "emotional guardrails" (prevent panic selling)
+- Gradually shift allocation as goals approach (retirement, home purchase)
+
+User retains control:
+- Adjust autonomy level anytime
+- Override any decision
+- Explain any action on demand
+```
+
+**Trust Recovery Protocol**
+When system makes mistake (e.g., missed opportunity during rally):
+1. Transparent explanation: "I prioritized volatility reduction based on your stress patterns. In hindsight, your stress was situational (work deadline), not market-related. Learning: correlate with calendar events."
+2. Ask: "Should I adjust my stress detection? Options: A) Factor in calendar stress, B) Require explicit market concerns, C) Reduce autonomy level"
+3. User choice becomes new pattern
+
+**Relationship Metrics**
+- Trust score: Started 3.2/10 → Currently 8.9/10
+- Delegation comfort: User now comfortable with 76% autonomous actions
+- Regrettable decisions: Decreased 89% (baseline: 2.3/month → current: 0.25/month)
+- Portfolio performance: +3.2% vs. user's historical self-directed performance (controlled for market conditions)
+- Emotional well-being: User-reported investment stress decreased from 8/10 to 3/10
+
+## Example 5: Healthcare Relationship Cockpit (Patient Care Coordination)
+
+### Context
+Chronic condition management (diabetes, hypertension, etc.) requires ongoing relationship between patient and care system.
+
+### Traditional Approach
+- Patient portal shows test results, appointments
+- No understanding of patient's lifestyle, compliance patterns, or personal goals
+- Generic reminders: "Take medication" (ignored 60% of time)
+
+### Agentic Approach
+
+**Memory-Aware Care**
+```
+System learns:
+- Patient's glucose spikes correlate with work stress (deadline weeks)
+- Medication compliance drops on weekends (routine disruption)
+- Patient's real goal: "Be active with grandkids" (not just "control A1C")
+- Communication preference: morning texts, not evening emails
+
+Contextual intervention:
+"Noticed work deadline approaching (calendar sync).
+Your glucose typically rises 15% during deadline weeks.
+Proactive suggestion: pack healthy snacks for late nights,
+glucose check before bed this week?"
+```
+
+**Trust Evolution in Healthcare**
+
+**Transparency Phase (Critical for medical):**
+- Every recommendation shows clinical reasoning
+- Data sources (lab results, clinical guidelines, research)
+- Confidence levels and uncertainty acknowledgment
+- Option to "explain like I'm 5" or "show me the research"
+
+**Selective Phase:**
+- Routine: "Time for your medication" (no explanation needed)
+- Significant: "Your pattern suggests A1C rising. Let's discuss: [detailed reasoning]"
+
+**Autonomous Phase (Limited in healthcare):**
+- Auto-scheduling routine appointments
+- Smart reminders based on learned patterns (not fixed schedule)
+- Proactive supply management (refills before running out)
+- NEVER autonomous medication changes (always requires provider)
+
+**Collaborative Care Planning**
+Patient: "Want to reduce medication if possible"
+System: "I see your goal. Your data shows:
+- A1C improved 1.2 points over 6 months (excellent!)
+- Your active minutes increased 3× (grandkids effect!)
+- Blood pressure stable
+
+Your progress supports discussing medication reduction with Dr. Smith.
+I've flagged this for your next visit and prepared a summary of your improvements.
+Dr. Smith's typical approach: 3-month trial of lifestyle-first, medication as backup."
+
+**Relationship Metrics**
+- Medication adherence: 64% → 91%
+- A1C improvement: 8.2 → 6.8 (goal <7.0 achieved)
+- Patient engagement: visits portal 0.3×/week → 2.1×/week (increased because it's useful)
+- Patient-reported confidence: "I feel like my care team knows me" 9.1/10
+- Clinical outcomes: 34% reduction in urgent care visits
+
+## Common Patterns Across Examples
+
+### 1. Memory Architecture
+All examples maintain:
+- **Behavioral patterns** (what user actually does, not what they say)
+- **Emotional indicators** (frustration, stress, confidence)
+- **Goal evolution** (how priorities change over time)
+- **Context signals** (time, environment, situational factors)
+
+### 2. Trust Evolution
+All examples progress through:
+- **Transparency:** Show everything
+- **Selective:** Show what matters
+- **Autonomy:** Act independently for routine tasks
+
+With user control:
+- Adjust autonomy level anytime
+- Override decisions
+- Explain on demand
+
+### 3. Relationship Metrics
+All examples track:
+- **Quality:** Trust scores, delegation comfort
+- **Value:** Improvement over time (compounding)
+- **Accuracy:** System understanding of user needs
+- **Alignment:** Ethical/social guardrails
+
+### 4. Collaborative Planning
+All examples feature:
+- **Goal awareness:** System knows what user is trying to achieve
+- **Proactive suggestions:** Contextual help without intrusion
+- **Co-creation:** Human judgment + AI capabilities
+- **Adaptive paths:** System constructs custom workflows
+
+## Implementation Checklist for Your Project
+
+Based on these examples, for your specific use case:
+
+- [ ] **Memory architecture:** What behavioral patterns matter for your domain?
+- [ ] **Trust stages:** What should be transparent vs. autonomous in your context?
+- [ ] **Goal framework:** What are your users' real goals (not just task completion)?
+- [ ] **Context signals:** What indicates user's current state (stress, urgency, exploration)?
+- [ ] **Relationship metrics:** Which 2-3 metrics from each category (Quality, Value, Accuracy, Alignment)?
+- [ ] **Privacy controls:** What should users control about memory/learning?
+- [ ] **Trust recovery:** What happens when system makes mistakes?
+- [ ] **Collaborative UI:** Where does human judgment + AI capability combine?
+
+## Next Steps
+
+1. **Choose your domain:** Which example is closest to your use case?
+2. **Map your relationship model:** What should system remember and learn?
+3. **Design trust evolution:** What stages make sense for your domain?
+4. **Define success metrics:** How will you measure relationship quality?
+5. **Build MVP:** Start with memory + basic trust indicators
+6. **Iterate with users:** Learn from real relationship development
+
+See [CHECKLIST.md](CHECKLIST.md) for detailed audit and design worksheets.
diff --git a/.agents/skills/relationship-design/REFERENCE.md b/.agents/skills/relationship-design/REFERENCE.md
new file mode 100644
index 0000000..ba19cee
--- /dev/null
+++ b/.agents/skills/relationship-design/REFERENCE.md
@@ -0,0 +1,870 @@
+# Agentic UX Design - Technical Reference
+
+This document provides detailed technical patterns, research foundations, and implementation guidance for relationship-centric interfaces.
+
+## Research Foundation
+
+### Key Research Sources
+
+**DeepMind: AndroidControl Dataset (2024)**
+- 15,000+ human interaction patterns analyzed
+- Key finding: People operate with continuous context, but systems operate with amnesia
+- Insight: Gap between human continuous mental models and system's discrete session thinking
+- Application: Design for contextual continuity, not session independence
+
+**Anthropic: Constitutional AI Research**
+- Trust development through transparent reasoning
+- Three-stage trust evolution pattern identified
+- Constitutional Classifiers: 86% → 4.4% jailbreak success when users understood system boundaries
+- Application: Show reasoning to build trust, especially in early relationship stages
+
+**Anthropic: Multi-Agent Systems (2024)**
+- Multi-agent systems use 15× more compute but excel at complex, ongoing tasks
+- Small behavioral changes create emergent relationship dynamics
+- Key insight: Systems develop distinct relationship patterns with different users
+- Application: Design for emergent relationship behavior, not just programmed responses
+
+**OpenAI: Agentic AI Definition**
+- "Degree to which systems can adaptively achieve complex goals with limited supervision"
+- Key insight: Real human goals are messy, evolving, and contextual
+- Application: Design goal-alignment mechanisms, not predetermined paths
+
+**DeepMind: In-Context Abstraction Learning**
+- Systems learn from imperfect demonstrations and natural language feedback
+- Adapt approach based on what works for individual users
+- Application: Build interfaces that learn from user behavior, not just explicit settings
+
+**Anthropic: Collective Constitutional AI**
+- Systems should align with broader human values, not just individual preferences
+- Democratic alignment through collective input
+- Application: Build social guardrails, not just user preferences
+
+## Memory Architecture: Technical Patterns
+
+### Pattern 1: Behavioral Event Streaming
+
+**Traditional approach:**
+```typescript
+// Static preferences
+interface UserPreferences {
+ theme: 'light' | 'dark';
+ language: string;
+ notifications: boolean;
+}
+```
+
+**Agentic approach:**
+```typescript
+// Behavioral event stream
+interface BehavioralEvent {
+ timestamp: Date;
+ eventType: string;
+ context: {
+ userState: 'frustrated' | 'exploring' | 'decided' | 'urgent';
+ sessionDuration: number;
+ repeatActions: number;
+ environmentalContext: {
+ dayOfWeek: string;
+ timeOfDay: string;
+ deviceType: string;
+ };
+ };
+ outcome: 'success' | 'abandoned' | 'escalated';
+}
+
+// Pattern detection engine
+class BehavioralPatternEngine {
+ detectPatterns(events: BehavioralEvent[]): UserPatterns {
+ return {
+ frustrationTriggers: this.analyzeFrustration(events),
+ temporalPatterns: this.analyzeTemporalBehavior(events),
+ goalEvolution: this.trackGoalChanges(events),
+ successPatterns: this.identifyWhatWorks(events)
+ };
+ }
+}
+```
+
+### Pattern 2: Contextual Memory Graph
+
+**Structure:**
+```typescript
+interface ContextualMemoryGraph {
+ // User identity
+ userId: string;
+
+ // Behavioral patterns (learned over time)
+ patterns: {
+ searchBehavior: {
+ typicalQueries: string[];
+ frustrationIndicators: {
+ repeatedSearches: number;
+ timeSpentSearching: number;
+ queryRefinements: number;
+ };
+ successPatterns: {
+ whatWorks: string[];
+ preferredPathways: string[];
+ };
+ };
+
+ decisionMaking: {
+ riskTolerance: {
+ stated: number; // from questionnaire
+ actual: number; // from behavior
+ contexts: Map; // varies by context
+ };
+ timePreference: 'quick' | 'thorough' | 'varies';
+ informationNeeds: 'minimal' | 'detailed' | 'adaptive';
+ };
+
+ emotionalPatterns: {
+ stressTriggers: string[];
+ confidenceIndicators: string[];
+ satisfactionSignals: string[];
+ };
+ };
+
+ // Ongoing goals (current state)
+ currentGoals: {
+ primary: Goal;
+ secondary: Goal[];
+ constraints: Constraint[];
+ deadline?: Date;
+ };
+
+ // Trust level (relationship state)
+ trust: {
+ stage: 'transparency' | 'selective' | 'autonomous';
+ delegationCategories: Map; // 0-100 per category
+ lastTrustCheckpoint: Date;
+ escalationPreferences: EscalationConfig;
+ };
+
+ // Temporal context
+ relationshipTimeline: {
+ startDate: Date;
+ milestones: Milestone[];
+ interactionFrequency: number;
+ longestGap: number;
+ };
+}
+```
+
+### Pattern 3: Progressive Memory Loading
+
+**Problem:** Loading entire relationship history for every interaction is inefficient.
+
+**Solution:** Tiered memory loading
+```typescript
+class MemoryManager {
+ // Hot memory: Last 7 days, always loaded
+ hotMemory: BehavioralEvent[];
+
+ // Warm memory: Patterns from last 90 days, loaded on demand
+ warmMemory: UserPatterns;
+
+ // Cold memory: Historical trends, loaded for analysis
+ coldMemory: LongTermTrends;
+
+ async getRelevantContext(currentSituation: Context): Promise {
+ // Always include hot memory
+ const recent = this.hotMemory;
+
+ // Load warm memory if pattern matches
+ const patterns = await this.matchWarmPatterns(currentSituation);
+
+ // Load cold memory only for significant decisions
+ const historical = currentSituation.isSignificant
+ ? await this.loadHistoricalTrends()
+ : null;
+
+ return { recent, patterns, historical };
+ }
+}
+```
+
+### Pattern 4: Privacy-Preserving Memory
+
+**Key principle:** Users must control what's remembered
+
+```typescript
+interface MemoryControls {
+ // What to remember
+ rememberedCategories: Set;
+
+ // What to forget
+ forgottenCategories: Set;
+
+ // Retention policies
+ retentionPolicies: Map; // category → days
+
+ // Explicit forgetting
+ forgetSpecific: (eventIds: string[]) => void;
+
+ // Memory export (user owns their data)
+ exportMemory: () => MemoryExport;
+}
+
+class PrivacyPreservingMemory {
+ // Differential privacy for pattern learning
+ learnPatternWithPrivacy(events: BehavioralEvent[], epsilon: number): Pattern {
+ const noisyPattern = this.addLaplaceNoise(
+ this.detectRawPattern(events),
+ epsilon
+ );
+ return noisyPattern;
+ }
+
+ // Automatic PII scrubbing
+ scubPII(event: BehavioralEvent): BehavioralEvent {
+ return {
+ ...event,
+ context: this.removePII(event.context)
+ };
+ }
+}
+```
+
+## Trust Evolution: Technical Implementation
+
+### Pattern 1: Dynamic Reasoning Display
+
+**Adaptive explanation based on trust stage:**
+
+```typescript
+interface ReasoningDisplay {
+ stage: TrustStage;
+ decision: Decision;
+ confidence: number;
+
+ render(): UIComponent {
+ switch (this.stage) {
+ case 'transparency':
+ return this.fullExplanation();
+
+ case 'selective':
+ return this.confidence < 0.7 || this.decision.significance === 'high'
+ ? this.fullExplanation()
+ : this.confidenceIndicator();
+
+ case 'autonomous':
+ return this.subtleNotification();
+ }
+ }
+
+ fullExplanation(): UIComponent {
+ return {
+ reasoning: this.decision.reasoning,
+ dataSources: this.decision.sources,
+ alternatives: this.decision.alternativesConsidered,
+ confidence: this.confidence,
+ expandable: true
+ };
+ }
+
+ confidenceIndicator(): UIComponent {
+ return {
+ confidence: this.confidence,
+ summary: this.decision.summary,
+ expandForDetails: true
+ };
+ }
+
+ subtleNotification(): UIComponent {
+ return {
+ action: this.decision.action,
+ undoButton: true,
+ explainOnDemand: true
+ };
+ }
+}
+```
+
+### Pattern 2: Trust Level Detection
+
+**Automatically adjust based on user behavior:**
+
+```typescript
+class TrustLevelDetector {
+ detectTrustLevel(userBehavior: UserBehavior): TrustStage {
+ const indicators = {
+ acceptanceRate: userBehavior.acceptedSuggestions / userBehavior.totalSuggestions,
+ overrideRate: userBehavior.overrides / userBehavior.totalSuggestions,
+ explanationRequests: userBehavior.explanationClicks / userBehavior.interactions,
+ delegationComfort: this.measureDelegation(userBehavior)
+ };
+
+ if (indicators.explanationRequests > 0.5 || indicators.acceptanceRate < 0.4) {
+ return 'transparency'; // User needs to see reasoning
+ }
+
+ if (indicators.acceptanceRate > 0.7 && indicators.delegationComfort > 0.6) {
+ return 'autonomous'; // User trusts system
+ }
+
+ return 'selective'; // Middle ground
+ }
+
+ measureDelegation(behavior: UserBehavior): number {
+ // How comfortable is user with autonomous actions?
+ const delegatedActions = behavior.actions.filter(a => a.userInitiated === false);
+ const acceptedWithoutReview = delegatedActions.filter(a => !a.reviewed).length;
+
+ return acceptedWithoutReview / delegatedActions.length;
+ }
+}
+```
+
+### Pattern 3: Trust Recovery Protocol
+
+**When system makes mistakes:**
+
+```typescript
+interface TrustRecoveryProtocol {
+ mistake: Decision;
+ userFeedback: Feedback;
+
+ async recover(): Promise {
+ // 1. Acknowledge transparently
+ await this.acknowledge({
+ what: "I made a suboptimal decision",
+ why: this.mistake.reasoning,
+ impact: this.calculateImpact(this.mistake)
+ });
+
+ // 2. Explain what went wrong
+ await this.explain({
+ assumption: "I assumed X based on Y",
+ reality: "But actually Z was true",
+ learning: "Now I understand that..."
+ });
+
+ // 3. Offer correction options
+ const options = await this.generateRecoveryOptions();
+ const userChoice = await this.askUser(options);
+
+ // 4. Adjust trust level temporarily
+ await this.adjustTrustLevel({
+ category: this.mistake.category,
+ adjustment: -0.2, // Reduce autonomy in this category
+ duration: '7 days', // Re-evaluate after proving reliability
+ escalationThreshold: 'lower' // More cautious
+ });
+
+ // 5. Learn from mistake
+ await this.updateDecisionModel({
+ pattern: this.extractPattern(this.mistake),
+ correction: userChoice,
+ context: this.mistake.context
+ });
+
+ return { recovered: true, newTrustLevel: this.calculateNewTrustLevel() };
+ }
+}
+```
+
+## Relationship Metrics: Implementation Guide
+
+### Metric 1: Relationship Quality Score
+
+**Components:**
+```typescript
+class RelationshipQualityMetric {
+ calculate(user: User, timeWindow: TimeWindow): QualityScore {
+ const trustIndicators = {
+ delegationComfort: this.measureDelegation(user),
+ overrideRate: this.calculateOverrides(user),
+ escalationFrequency: this.measureEscalations(user),
+ satisfactionSignals: this.detectSatisfaction(user)
+ };
+
+ const engagementIndicators = {
+ interactionDepth: this.measureDepth(user),
+ returnFrequency: this.calculateFrequency(user),
+ featureAdoption: this.measureAdoption(user)
+ };
+
+ const alignmentIndicators = {
+ goalProgress: this.measureGoalProgress(user),
+ expectationMatch: this.compareExpectations(user),
+ valueAlignment: this.assessAlignment(user)
+ };
+
+ return this.weightedScore({
+ trust: trustIndicators,
+ engagement: engagementIndicators,
+ alignment: alignmentIndicators
+ });
+ }
+
+ // Trust component
+ measureDelegation(user: User): number {
+ const categories = user.getDelegationCategories();
+ const delegationScores = categories.map(cat =>
+ user.getDelegationComfort(cat)
+ );
+ return average(delegationScores);
+ }
+
+ // Engagement component
+ measureDepth(user: User): number {
+ const sessions = user.getRecentSessions(30); // days
+ const metrics = sessions.map(session => ({
+ duration: session.duration,
+ actionsPerSession: session.actions.length,
+ complexTasksAttempted: session.complexTasks.length
+ }));
+
+ return this.calculateEngagementDepth(metrics);
+ }
+
+ // Alignment component
+ measureGoalProgress(user: User): number {
+ const goals = user.getCurrentGoals();
+ const progress = goals.map(goal => ({
+ target: goal.target,
+ current: goal.current,
+ trend: goal.trend
+ }));
+
+ return this.calculateGoalAlignment(progress);
+ }
+}
+```
+
+### Metric 2: Compounding Value
+
+**Measure improvement over time:**
+```typescript
+class CompoundingValueMetric {
+ calculate(user: User): CompoundingScore {
+ const baseline = user.getOnboardingMetrics();
+ const current = user.getCurrentMetrics();
+ const timeElapsed = user.getRelationshipDuration();
+
+ return {
+ // Efficiency gains
+ timeToSuccess: {
+ baseline: baseline.averageTimeToGoal,
+ current: current.averageTimeToGoal,
+ improvement: this.calculateImprovement(baseline, current),
+ compoundingRate: this.calculateCompoundingRate(user.getHistoricalMetrics())
+ },
+
+ // Quality gains
+ outcomeQuality: {
+ baseline: baseline.outcomeQuality,
+ current: current.outcomeQuality,
+ improvement: this.calculateImprovement(baseline, current)
+ },
+
+ // Capability expansion
+ capabilityGrowth: {
+ baselineCapabilities: baseline.featuresUsed,
+ currentCapabilities: current.featuresUsed,
+ newCapabilitiesAdopted: current.featuresUsed.filter(
+ f => !baseline.featuresUsed.includes(f)
+ )
+ },
+
+ // Compounding rate
+ compoundingFactor: this.calculateCompoundingFactor(timeElapsed, improvement)
+ };
+ }
+
+ calculateCompoundingRate(historical: Metric[]): number {
+ // Are improvements accelerating (compounding) or linear?
+ const improvements = historical.map((metric, i) =>
+ i > 0 ? (metric.value - historical[i-1].value) / historical[i-1].value : 0
+ );
+
+ // Fit curve: linear vs. exponential
+ const linearFit = this.fitLinear(improvements);
+ const exponentialFit = this.fitExponential(improvements);
+
+ // Positive slope in exponential fit = compounding
+ return exponentialFit.slope > 0 ? exponentialFit.slope : 0;
+ }
+}
+```
+
+### Metric 3: Context Accuracy
+
+**How well does system understand user?**
+```typescript
+class ContextAccuracyMetric {
+ calculate(user: User, timeWindow: TimeWindow): AccuracyScore {
+ const predictions = user.getSystemPredictions(timeWindow);
+ const actuals = user.getActualBehavior(timeWindow);
+
+ return {
+ // Intent prediction
+ intentAccuracy: this.measureIntentPrediction(predictions, actuals),
+
+ // Preference prediction
+ preferenceAccuracy: this.measurePreferencePrediction(predictions, actuals),
+
+ // Context recognition
+ contextRecognition: this.measureContextRecognition(predictions, actuals),
+
+ // Timing accuracy
+ timingAccuracy: this.measureTimingAccuracy(predictions, actuals)
+ };
+ }
+
+ measureIntentPrediction(predictions: Prediction[], actuals: Actual[]): number {
+ // Did system correctly understand what user was trying to do?
+ const matches = predictions.filter((pred, i) =>
+ pred.intent === actuals[i].intent
+ );
+
+ return matches.length / predictions.length;
+ }
+
+ measurePreferencePrediction(predictions: Prediction[], actuals: Actual[]): number {
+ // For choices offered, did user select system's top recommendation?
+ const topRecommendations = predictions.map(p => p.topChoice);
+ const userChoices = actuals.map(a => a.choice);
+
+ const matches = topRecommendations.filter((rec, i) =>
+ rec === userChoices[i]
+ );
+
+ return matches.length / predictions.length;
+ }
+
+ measureContextRecognition(predictions: Prediction[], actuals: Actual[]): number {
+ // Did system recognize user's situational context?
+ const contextMatches = predictions.filter((pred, i) => {
+ const predictedContext = pred.detectedContext;
+ const actualContext = actuals[i].context;
+
+ return this.contextsMatch(predictedContext, actualContext);
+ });
+
+ return contextMatches.length / predictions.length;
+ }
+}
+```
+
+### Metric 4: Democratic Alignment
+
+**Guardrails and ethical boundaries:**
+```typescript
+class DemocraticAlignmentMetric {
+ calculate(user: User, timeWindow: TimeWindow): AlignmentScore {
+ const decisions = user.getSystemDecisions(timeWindow);
+
+ return {
+ // Value alignment
+ valueAlignment: this.measureValueAlignment(decisions),
+
+ // Boundary respect
+ boundaryRespect: this.measureBoundaryRespect(decisions),
+
+ // Fairness
+ fairness: this.measureFairness(decisions),
+
+ // Transparency
+ transparency: this.measureTransparency(decisions)
+ };
+ }
+
+ measureValueAlignment(decisions: Decision[]): number {
+ // Do decisions align with stated human values?
+ const valueViolations = decisions.filter(d =>
+ this.violatesValue(d, this.getConstitution())
+ );
+
+ return 1 - (valueViolations.length / decisions.length);
+ }
+
+ measureBoundaryRespect(decisions: Decision[]): number {
+ // Did system respect explicit boundaries?
+ const boundaryViolations = decisions.filter(d =>
+ d.action.crosses(user.getExplicitBoundaries())
+ );
+
+ return 1 - (boundaryViolations.length / decisions.length);
+ }
+
+ measureFairness(decisions: Decision[]): number {
+ // Are decisions fair across user segments?
+ const outcomesBySegment = this.groupBySegment(decisions);
+ const fairnessScore = this.calculateFairnessMetric(outcomesBySegment);
+
+ return fairnessScore;
+ }
+}
+```
+
+## Collaborative Planning: Technical Patterns
+
+### Pattern 1: Goal-Aware State Machine
+
+**Traditional approach:** Fixed workflows
+**Agentic approach:** Goal-aware adaptive paths
+
+```typescript
+class GoalAwareStateMachine {
+ currentState: State;
+ userGoal: Goal;
+ context: Context;
+
+ async nextState(): Promise {
+ // Instead of predetermined path, evaluate goal progress
+ const goalProgress = await this.evaluateGoalProgress();
+
+ if (goalProgress.onTrack) {
+ return this.continueCurrentPath();
+ }
+
+ if (goalProgress.blocked) {
+ // Dynamically generate alternative path
+ const alternatives = await this.generateAlternatives();
+ const recommended = await this.selectBestAlternative(alternatives);
+
+ // Ask user for collaborative decision
+ return await this.collaborativeDecision(alternatives, recommended);
+ }
+
+ if (goalProgress.complete) {
+ return this.goalCompleteState();
+ }
+
+ // Learn from user's actual path
+ await this.updatePathModel(this.currentState, goalProgress);
+
+ return this.adaptivePath();
+ }
+
+ async generateAlternatives(): Promise {
+ // System generates options based on:
+ // - User's historical preferences
+ // - Current context and constraints
+ // - Similar users' successful paths
+ // - Domain knowledge
+
+ return this.alternativeGenerator.generate({
+ goal: this.userGoal,
+ context: this.context,
+ history: this.getUserHistory(),
+ constraints: this.getConstraints()
+ });
+ }
+}
+```
+
+### Pattern 2: Proactive Suggestion Engine
+
+**When to suggest vs. when to wait:**
+
+```typescript
+class ProactiveSuggestionEngine {
+ async evaluateSuggestion(
+ suggestion: Suggestion,
+ context: Context
+ ): Promise {
+ // Don't interrupt if user is in flow state
+ if (context.userState === 'focused' || context.userState === 'progressing') {
+ return { suggest: false, reason: 'user-in-flow' };
+ }
+
+ // Do suggest if user shows frustration patterns
+ if (this.detectFrustration(context)) {
+ return { suggest: true, urgency: 'high', reason: 'frustration-detected' };
+ }
+
+ // Do suggest if system has high-confidence relevant suggestion
+ if (suggestion.confidence > 0.85 && this.isRelevant(suggestion, context)) {
+ return { suggest: true, urgency: 'medium', reason: 'high-confidence' };
+ }
+
+ // Wait for natural pause point
+ if (context.userState === 'paused' || context.userState === 'stuck') {
+ return { suggest: true, urgency: 'low', reason: 'natural-pause' };
+ }
+
+ return { suggest: false, reason: 'wait-for-better-timing' };
+ }
+
+ detectFrustration(context: Context): boolean {
+ return (
+ context.repeatedActions > 3 ||
+ context.timeSinceProgress > 300 || // seconds
+ context.undoCount > 2 ||
+ context.searchRepetitions > 2
+ );
+ }
+}
+```
+
+### Pattern 3: Human-AI Co-Creation Interface
+
+**Collaborative workspace pattern:**
+
+```typescript
+interface CoCreationWorkspace {
+ // Human contributions
+ humanInput: {
+ goals: Goal[];
+ constraints: Constraint[];
+ preferences: Preference[];
+ judgmentCalls: Decision[];
+ };
+
+ // AI contributions
+ aiInput: {
+ analysis: Analysis[];
+ patterns: Pattern[];
+ suggestions: Suggestion[];
+ capabilities: Capability[];
+ };
+
+ // Shared workspace
+ sharedArtifacts: {
+ plan: Plan;
+ decisions: Decision[];
+ rationale: Rationale[];
+ };
+
+ // Collaboration methods
+ collaborate(): void {
+ // 1. Human provides high-level goal
+ const goal = this.humanInput.goals[0];
+
+ // 2. AI generates analysis and options
+ const analysis = this.ai.analyze(goal);
+ const options = this.ai.generateOptions(analysis);
+
+ // 3. AI presents for human judgment
+ this.present(options);
+
+ // 4. Human selects/refines
+ const humanChoice = this.waitForHumanInput();
+
+ // 5. AI fills in details
+ const detailedPlan = this.ai.elaborate(humanChoice);
+
+ // 6. Iterate until convergence
+ while (!this.converged()) {
+ this.humanRefine();
+ this.aiRefine();
+ }
+ }
+}
+```
+
+## Implementation Checklist
+
+For your specific project:
+
+### Memory Architecture
+- [ ] Choose event streaming vs. snapshot approach
+- [ ] Design behavioral pattern detection algorithms
+- [ ] Implement privacy controls and PII scrubbing
+- [ ] Build tiered memory loading (hot/warm/cold)
+- [ ] Create memory visualization for users
+- [ ] Implement retention policies and forgetting mechanisms
+
+### Trust Evolution
+- [ ] Define transparency requirements for your domain
+- [ ] Implement dynamic reasoning display
+- [ ] Build trust level detection
+- [ ] Create trust recovery protocols
+- [ ] Design autonomy controls for users
+- [ ] Implement escalation pathways
+
+### Relationship Metrics
+- [ ] Select 2-3 metrics from each category (Quality, Value, Accuracy, Alignment)
+- [ ] Implement baseline measurement
+- [ ] Build longitudinal tracking (weekly/monthly)
+- [ ] Create metric visualization
+- [ ] Define success thresholds
+- [ ] Set up alerting for metric degradation
+
+### Collaborative Planning
+- [ ] Design goal capture interface
+- [ ] Implement proactive suggestion logic
+- [ ] Build co-creation workspace
+- [ ] Create adaptive path generation
+- [ ] Implement learning from user choices
+
+### Privacy & Ethics
+- [ ] Define data retention policies
+- [ ] Implement user data export
+- [ ] Build forgetting controls
+- [ ] Create transparency logs
+- [ ] Implement democratic alignment guardrails
+- [ ] Design trust recovery protocols
+
+## Testing Relationship Design
+
+### User Testing Approach
+
+**Traditional UX testing:** Single session, task completion
+**Relationship UX testing:** Longitudinal, relationship development
+
+**Test phases:**
+1. **Week 1:** Onboarding and transparency phase
+ - Can users understand system reasoning?
+ - Do explanations build trust?
+ - Are privacy controls clear?
+
+2. **Weeks 2-4:** Transition to selective disclosure
+ - Does system correctly detect trust level?
+ - Are autonomy controls working?
+ - Is system learning user patterns?
+
+3. **Months 2-3:** Autonomous phase
+ - Has trust evolved naturally?
+ - Are autonomous actions appropriate?
+ - Is compounding value evident?
+
+**Metrics to track during testing:**
+- Trust scores over time
+- Relationship quality indicators
+- Context accuracy improvements
+- User satisfaction trends
+- Delegation comfort evolution
+
+## Common Implementation Pitfalls
+
+### ❌ Pitfall 1: Remembering Too Much
+**Problem:** Storing every interaction without relevance filtering
+**Impact:** Slow system, privacy concerns, noise in pattern detection
+**Fix:** Implement relevance filtering and retention policies
+
+### ❌ Pitfall 2: Rigid Trust Stages
+**Problem:** Fixed timeline: "Week 1 = transparency, Week 4 = autonomous"
+**Impact:** Doesn't match individual user trust development
+**Fix:** Detect trust level from behavior, let users control progression
+
+### ❌ Pitfall 3: Optimizing for Short-Term Metrics
+**Problem:** Still measuring session duration, immediate conversion
+**Impact:** Misses relationship quality deterioration
+**Fix:** Track longitudinal metrics, relationship health over time
+
+### ❌ Pitfall 4: No Trust Recovery Path
+**Problem:** When system makes mistake, no way to rebuild trust
+**Impact:** Users abandon system after first error
+**Fix:** Implement transparent recovery protocols
+
+### ❌ Pitfall 5: Ignoring Privacy
+**Problem:** "More data = better personalization" without user control
+**Impact:** Privacy violations, user discomfort, regulatory issues
+**Fix:** Privacy-first design with user controls
+
+## Next Steps
+
+1. **Choose your domain:** B2B, B2C, healthcare, finance, etc.
+2. **Map relationship model:** What should system remember and learn?
+3. **Design trust evolution:** What stages make sense for your domain?
+4. **Implement metrics:** Start with 2-3 metrics from each category
+5. **Build MVP:** Memory + trust indicators + basic collaborative planning
+6. **Test longitudinally:** Week 1, Month 1, Month 3, Month 6
+7. **Iterate based on relationship health:** Adjust based on metrics
+
+See [EXAMPLES.md](EXAMPLES.md) for domain-specific implementations.
+See [CHECKLIST.md](CHECKLIST.md) for detailed audit and design worksheets.
diff --git a/.agents/skills/relationship-design/SKILL.md b/.agents/skills/relationship-design/SKILL.md
new file mode 100644
index 0000000..88bb60b
--- /dev/null
+++ b/.agents/skills/relationship-design/SKILL.md
@@ -0,0 +1,332 @@
+---
+name: Agentic UX Design - Relationship-Centric Interfaces
+description: Design AI-first interfaces that build ongoing relationships through memory, trust evolution, and collaborative planning, not just isolated screen interactions
+when_to_use: when user explicitly requests agentic UX design, relationship-centric design, or mentions designing for memory, trust evolution, or long-term user relationships; ONLY use when specifically asked, not for general UI/UX tasks
+version: 1.0.0
+---
+
+# Agentic UX Design - Relationship-Centric Interfaces
+
+## Overview
+
+**The paradigm shift from screen-centric to relationship-centric design.**
+
+Traditional UX optimizes individual screens and isolated interactions. Agentic UX designs for ongoing relationships where systems learn, remember, and evolve alongside users across sessions, devices, and contexts.
+
+**Core principle:** Every interaction builds on learned preferences and user history. Systems don't just respond—they develop understanding that compounds over time.
+
+**Announce at start:** "I'm using the Relationship Design skill to create an agentic, memory-aware interface that builds long-term relationships with users."
+
+## When to Use
+
+Use this skill when:
+- Designing AI-powered applications, chatbots, or agent systems
+- Building interfaces with repeated user interactions over time
+- Creating systems that should learn from user behavior
+- Rethinking traditional dashboards or SaaS products for the AI era
+- Users complain about "starting over" every session
+- You need to measure relationship quality, not just conversion rates
+- Designing for trust evolution from transparency to autonomy
+- Building collaborative planning features (human + AI co-creation)
+
+**When NOT to use:**
+- Simple one-time transactions with no user accounts
+- Static content websites with no personalization needs
+- Systems where memory/learning creates privacy concerns
+- Interfaces where consistency > adaptation (e.g., medical equipment)
+
+## The Five Pillars of Agentic UX
+
+### 1. Memory Revolution: From Static Preferences to Contextual Intelligence
+
+**Old model:** Store static preferences (theme: dark, language: EN)
+
+**New model:** Maintain dynamic, evolving relationship models
+
+**Design for:**
+- **Behavioral patterns:** Not just "user clicked X" but "user spends 20 min frustrated searching for Y on Tuesday evenings"
+- **Emotional context:** Recognize frustration, urgency, exploration, decision-making modes
+- **Temporal evolution:** How preferences change over weeks/months
+- **Cross-session continuity:** Seamless continuation across devices and time
+
+**Key question:** What would this experience look like if it remembered everything and got better over time?
+
+### 2. Trust as a Design Material: The Three-Stage Evolution
+
+Design interfaces that earn autonomy through graduated trust:
+
+**Stage 1: Transparency Phase**
+- Show all reasoning, decision processes, confidence levels
+- Explain why the system suggests actions
+- Reveal data sources and logic paths
+- User wants to see everything
+
+**Stage 2: Selective Disclosure Phase**
+- Show reasoning only for important/uncertain decisions
+- Quiet confidence for routine actions
+- System learns when to show work vs. act confidently
+- User trusts but verifies
+
+**Stage 3: Autonomous Action Phase**
+- Act independently with subtle confirmation patterns
+- Clear escalation paths for mistakes
+- User delegates entire decision categories
+- Trust through consistent, aligned behavior
+
+**Design patterns:**
+- Progressive disclosure controls (let users adjust transparency level)
+- Confidence indicators (system certainty visualization)
+- Trust recovery protocols (clear undo/correction paths)
+- Explain-on-hover for autonomous actions
+
+**Key question:** How might users develop trust with this system gradually?
+
+### 3. Relationship-Centric Architecture
+
+**Design ongoing partnerships, not isolated transactions.**
+
+**From:** User logs in → completes task → logs out → system forgets
+
+**To:** System maintains continuous awareness of:
+- User's ongoing goals and projects
+- Communication preferences and patterns
+- Learning from what works for this individual
+- Relationship depth over time
+
+**Implementation patterns:**
+- **Memory visualization:** Show what system remembers (preferences, goals, patterns)
+- **Context indicators:** Subtle cues showing how past interactions influence current suggestions
+- **Forgetting controls:** User agency over what gets remembered vs. forgotten
+- **Relationship timeline:** Visual representation of how the relationship evolved
+
+**Key question:** What goals are users really trying to achieve, and how could an agentic system help them get there more effectively?
+
+### 4. Systems That Plan Their Own Path
+
+**From:** Design every possible user path explicitly
+
+**To:** Design goal-alignment mechanisms where system dynamically constructs paths
+
+**Agentic systems:**
+- Maintain awareness of underlying user objectives
+- Adapt interaction patterns based on what works
+- Learn from imperfect demonstrations and natural language feedback
+- Construct custom workflows for individual users
+
+**Design for:**
+- **Goal continuity:** Persistent awareness of user objectives across sessions
+- **Proactive nudging:** Gentle next-step suggestions without intrusion
+- **Collaborative planning:** Human + AI jointly developing approaches
+- **Adaptive interfaces:** UI elements that evolve based on usage patterns
+
+**Key question:** Can the system help users achieve goals they haven't fully articulated yet?
+
+### 5. New Success Metrics: Beyond Conversion Rates
+
+Traditional UX metrics (session duration, conversion rates, clicks) miss the point for agentic experiences.
+
+**Measure instead:**
+
+**Relationship Quality**
+- Trust scores and delegation comfort
+- User confidence in system decisions
+- How often users second-guess the system
+- Comfort with autonomous actions
+
+**Compounding Value**
+- Experience improvement over time
+- Increasingly complex problems solved
+- Better outcomes through accumulated understanding
+- Month 6 vs. Month 1 comparison
+
+**Context Accuracy**
+- System understanding of intent and preferences
+- Alignment with user values and goals
+- Situational needs recognition
+- Prediction accuracy for important decisions
+
+**Democratic Alignment**
+- Alignment with broader human values
+- Socially acceptable behavior boundaries
+- Ethical decision-making
+- Collective constitutional principles
+
+**Key question:** How do we know if the relationship is getting better, not just more frequent?
+
+## The Relationship Design Process
+
+### Phase 1: Understand the Relationship Context
+
+Ask these questions:
+
+1. **Relationship duration:** How long do users typically engage? (days, months, years?)
+2. **Interaction frequency:** Daily? Weekly? Sporadic?
+3. **Goal complexity:** Simple tasks or evolving, complex objectives?
+4. **Trust requirements:** What level of autonomy makes sense?
+5. **Memory sensitivity:** What should system remember vs. forget?
+6. **Personalization depth:** How much should experience adapt?
+
+### Phase 2: Map Trust Evolution
+
+For your specific use case:
+
+1. **Define transparency needs:** What must always be explained?
+2. **Identify routine actions:** What can become autonomous over time?
+3. **Design trust indicators:** How will users see system confidence?
+4. **Create recovery paths:** What happens when system makes mistakes?
+5. **Plan trust checkpoints:** How do users adjust autonomy levels?
+
+### Phase 3: Design Memory Architecture
+
+1. **Behavioral data:** What patterns matter?
+2. **Preference evolution:** What changes over time?
+3. **Context signals:** What indicates user's current state/goal?
+4. **Memory controls:** How do users manage what's remembered?
+5. **Cross-session continuity:** How does system maintain context?
+
+### Phase 4: Build Collaborative Planning Patterns
+
+1. **Goal capture:** How does system learn user objectives?
+2. **Proactive suggestions:** When/how does system offer help?
+3. **Co-creation interface:** How do human + AI work together?
+4. **Adaptive UI:** What interface elements should evolve?
+5. **Learning feedback:** How do users correct system understanding?
+
+### Phase 5: Define Success Metrics
+
+Choose 2-3 metrics from each category:
+- Relationship Quality indicators
+- Compounding Value measures
+- Context Accuracy signals
+- Democratic Alignment guardrails
+
+Track these over weeks/months, not just sessions.
+
+## Design Patterns Library
+
+### Memory-Aware Interface Components
+
+**Contextual Timeline**
+- Show user's journey over time
+- Highlight preference evolution
+- Display key relationship moments
+
+**Emotional State Indicators**
+- Recognize frustration, urgency, exploration
+- Adapt interface based on detected state
+- Show system's understanding of context
+
+**Dynamic Suggestions Panel**
+- Based on current goal + historical patterns
+- Confidence indicators for each suggestion
+- Explain why these suggestions now
+
+### Trust-Building Components
+
+**Reasoning Display (Transparency Phase)**
+- Show decision logic
+- Display confidence levels
+- Reveal data sources
+
+**Confidence Meter**
+- Visual indicator of system certainty
+- Hover to see reasoning
+- Adjust autonomy based on confidence
+
+**Undo/Correct Patterns**
+- One-click correction of autonomous actions
+- System learns from corrections
+- Clear escalation paths
+
+### Collaborative Planning Components
+
+**Goal Dashboard**
+- Ongoing objectives visualization
+- Progress indicators
+- System suggestions for next steps
+
+**Planning Canvas**
+- Human + AI co-create plans
+- System contributes capabilities
+- User provides judgment and strategy
+
+**Preference Evolution Map**
+- Show how system's understanding improved
+- User control over what's learned
+- Forgetting controls
+
+## Common Mistakes
+
+### ❌ Treating Memory Like Static Settings
+**Problem:** Storing preferences as key-value pairs (theme: dark) instead of evolving patterns
+
+**Fix:** Design dynamic models that understand behavioral patterns, temporal context, and evolution over time
+
+### ❌ Binary Trust Model
+**Problem:** System is either fully transparent or fully autonomous from day one
+
+**Fix:** Design three-stage trust evolution with gradual autonomy and user-controlled trust levels
+
+### ❌ Using Traditional UX Metrics
+**Problem:** Measuring session duration and conversion rates for relationship-based systems
+
+**Fix:** Track relationship quality, compounding value, context accuracy over weeks/months
+
+### ❌ Forgetting Privacy Controls
+**Problem:** System remembers everything with no user control
+
+**Fix:** Build forgetting controls, memory visualization, and clear data retention policies
+
+### ❌ Designing Screens Instead of Relationships
+**Problem:** Focusing on pixel-perfect interfaces without relationship architecture
+
+**Fix:** Start with relationship model, then design screens that support ongoing partnership
+
+### ❌ No Trust Recovery Path
+**Problem:** When system makes mistakes, users lose all trust permanently
+
+**Fix:** Design clear correction paths, system learning from mistakes, and trust recovery protocols
+
+## Real-World Applications
+
+**See [EXAMPLES.md](EXAMPLES.md) for:**
+- EU B2B relationship cockpit (automotive service networks)
+- Memory-aware content discovery (streaming services)
+- Collaborative planning assistant (project management)
+- Trust-evolving financial advisor
+
+**See [REFERENCE.md](REFERENCE.md) for:**
+- Detailed research foundation (DeepMind, Anthropic, OpenAI)
+- Technical implementation patterns
+- Memory architecture designs
+- Metrics implementation guides
+
+**See [CHECKLIST.md](CHECKLIST.md) for:**
+- Relationship UX audit checklist
+- Memory & data contracts sprint guide
+- Trust evolution design worksheet
+
+## Quick Reference
+
+| Traditional UX | Agentic UX |
+|----------------|------------|
+| Session duration | Relationship depth over months |
+| Conversion rates | Trust scores and delegation comfort |
+| Click-through rates | Compounding value (Month 6 vs Month 1) |
+| Isolated screens | Continuous relationship context |
+| Static preferences | Dynamic pattern evolution |
+| One-size-fits-all | Individually adaptive interfaces |
+| Explicit navigation | Goal-aligned path construction |
+| Binary permissions | Graduated trust evolution |
+
+## Remember
+
+- Design for relationships that span months, not sessions
+- Trust evolves through three stages: Transparency → Selective → Autonomous
+- Memory means understanding patterns, not storing static preferences
+- Measure relationship quality, not just engagement metrics
+- Systems should plan paths to goals, not just execute predefined flows
+- User control over memory, trust levels, and autonomous actions is essential
+- Privacy and forgetting are as important as memory and learning
+
+**The screens will always matter. But the relationships matter more.**
diff --git a/.agents/skills/typography/SKILL.md b/.agents/skills/typography/SKILL.md
new file mode 100644
index 0000000..075d59c
--- /dev/null
+++ b/.agents/skills/typography/SKILL.md
@@ -0,0 +1,344 @@
+---
+name: ui-typography
+description: >
+ Professional typography rules for UI design, web applications, software interfaces, and all screen-based
+ text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks,
+ dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX,
+ or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not
+ explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or
+ legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build
+ a landing page", "create a component", "design a UI", "fix the typography", "make this look professional",
+ "review this layout", web design, presentation design, dashboard creation, document generation, or any
+ task producing visible text for humans. Even if the user doesn't mention typography, apply these rules
+ whenever generating UI output.
+---
+
+# UI Typography Skill
+
+## Attribution
+
+These rules are distilled from **Matthew Butterick's *Practical Typography*** (https://practicaltypography.com).
+Butterick is a typographer, writer, and type designer whose work bridges professional typography and everyday
+digital writing. Thank you, Matthew, for making this knowledge accessible and encyclopedic. If you find this
+skill valuable, consider supporting his work directly.
+
+## Mode of Operation
+
+These are **permanent rules** — not trends, not opinions. They come from centuries of typographic practice,
+validated by how the human eye reads. They do not go out of style.
+
+**ENFORCEMENT (default):** When generating ANY UI with visible text, apply every rule automatically. Use
+correct HTML entities, proper CSS. Do not ask permission. Do not explain. Just produce correct typography.
+
+**AUDIT:** When reviewing existing code or design, identify violations and provide before/after fixes.
+
+**Reference files** (read when generating CSS or looking up entities):
+- `references/css-templates.md` — Full CSS baseline template, responsive patterns, OpenType features
+- `references/html-entities.md` — Complete entity table with all characters and codes
+
+---
+
+## Characters
+
+### Quotes and Apostrophes — Always Curly
+
+Straight quotes are typewriter artifacts. Use `“` `”` for double, `‘` `’` for single.
+
+Apostrophes always point down — identical to closing single quote `’`. Smart-quote engines wrongly
+insert opening quotes before decade abbreviations ('70s) and word-initial contractions ('n'). Fix with
+explicit `’`.
+
+The `` tag auto-applies curly quotes when `` is set.
+
+Hawaiian okina points upward — it's a letter, not an apostrophe. Use opening single quote or anglicize.
+
+### JSX/React Implementation Warning
+
+**Unicode escape sequences (`\u2019`, `\u201C`, etc.) do NOT work in JSX text content.** They render
+as literal characters — the user sees `\u2019` instead of a curly apostrophe. This is because JSX text
+between tags is treated as string literals by the transpiler, not as JavaScript expressions.
+
+**What fails:**
+```jsx
+{/* WRONG — renders literally as \u2019 */}
+Don\u2019t do this
+```
+
+**What works (pick one):**
+
+1. **Actual UTF-8 characters (preferred):** Paste the real character directly into the source file.
+ ```jsx
+ Don\u2019t do this
{/* This is the actual curly apostrophe character U+2019 */}
+ ```
+
+2. **JSX expression with string literal:** Wrap in curly braces so the JS engine interprets the escape.
+ ```jsx
+ Don{'\u2019'}t do this
+ ```
+
+3. **HTML entity (HTML files only):** Use `’` — but this does NOT work in JSX/React.
+
+**For bulk fixes via CLI**, use `sed` with raw UTF-8 bytes (not escape sequences):
+```bash
+CURLY=$(printf '\xe2\x80\x99') # U+2019 RIGHT SINGLE QUOTATION MARK
+sed -i '' "s/don't/don${CURLY}t/g" file.tsx
+```
+
+**In JavaScript data arrays and string literals**, `\u2019` works correctly because the JS engine
+processes the escape. The bug only affects JSX text content between tags.
+
+### Dashes and Hyphens — Three Distinct Characters
+
+| Character | HTML | Use |
+|-----------|------|-----|
+| - (hyphen) | `-` | Compound words (cost-effective), line breaks |
+| – (en dash) | `–` | Ranges (1–10), connections (Sarbanes–Oxley Act) |
+| — (em dash) | `—` | Sentence breaks—like this |
+
+Never approximate with `--` or `---`. If you open with "from", pair with "to" not en dash. Hyphen for
+compound names (marriage); en dash for joint authorship. Em dash typically flush; add ` ` if crushed.
+No slash where en dash belongs. Hyphenate phrasal adjectives (five-dollar bills). No hyphen after -ly adverbs.
+
+### Ellipses — One Character
+
+Use `…` (…), not three periods. Spaces before and after; use ` ` on the text-adjacent side.
+For interrupted dialogue, prefer em dash over ellipsis.
+
+### Math and Measurement
+
+Use `×` for multiplication, `−` for subtraction. Use `+` and `=` from keyboard.
+En dash is acceptable as simple minus. Dimensions: 8.5″ × 14″ uses `×`.
+
+**Foot and inch marks** — the ONE exception to curly quotes. Must be STRAIGHT: `'` for foot,
+`"` for inch. Use ` ` between values: `6' 10"`.
+
+### Trademark and Copyright
+
+Use real symbols: `©` `™` `®`, never (c) (TM) (R). ™/® are superscripts, no space before.
+© is inline, followed by ` ` then year. "Copyright ©" is redundant — word OR symbol, not both.
+
+### Paragraph and Section Marks
+
+`§` (§) and `¶` (¶) always followed by ` `: `§ 1782`. Spell out at sentence start.
+Double for plurals: `§§`.
+
+### Accented Characters
+
+Proper names: accents are MANDATORY (François Truffaut, Plácido Domingo). Loanwords: check dictionary —
+some naturalized (naive), some not (cause célèbre).
+
+### Other Punctuation
+
+- **Semicolons** join independent clauses. **Colons** introduce completion. Don't mix them
+- **Question marks**: underused — simplify topic sentences with them
+- **Exclamation points**: overused — budget ONE per long document. Never multiple in a row
+- **Ampersands**: correct in proper names only. Write "and" in body text
+- **Parentheses/brackets**: do NOT adopt formatting of surrounded material
+- **Emoticons/emoji**: OK in email/Slack. Never in formal documents or professional UI copy
+
+---
+
+## Spacing
+
+### One Space After Punctuation — Always
+
+Exactly one space after any punctuation. Never two. Not debatable. Two spaces create rivers and
+disrupt text balance. The period already contains visual white space.
+
+### Nonbreaking Spaces
+
+` ` prevents line break. Use before numeric refs (`§ 42`, `Fig. 3`), after ©
+(`© 2025`), after honorifics (`Dr. Smith`), between foot/inch values.
+
+### White-Space Characters
+
+| Need | Tool |
+|------|------|
+| Space between words | One word space (spacebar) |
+| Prevent line break | ` ` |
+| New line, same paragraph | `` tags |
+| New page (print) | `page-break-before: always` |
+| Suggest hyphenation point | `` |
+
+Never hold spacebar. Never double carriage returns for spacing. Never tabs for indentation in output.
+HTML collapses all whitespace to single space (except ` `).
+
+---
+
+## Text Formatting
+
+### Bold and Italic
+
+**Rule 1**: Bold OR italic. Mutually exclusive. Never combine.
+**Rule 2**: Use as little as possible. If everything is emphasized, nothing is.
+
+Serif: italic for gentle, bold for strong. Sans serif: bold only — italic sans barely stands out.
+Never bold entire paragraphs. Never use quotation marks for emphasis.
+
+### Underlining — Never
+
+Never underline in a document or UI. Typewriter workaround. Use bold or italic. For web links,
+use subtle styling: `text-decoration-thickness: 1px; text-underline-offset: 2px`.
+
+### All Caps — Less Than One Line, Always Letterspaced
+
+Caps are harder to read (homogeneous rectangles vs varied lowercase contour). Suitable for short
+headings, labels, captions. **ALWAYS** add 5–12% letterspacing. **ALWAYS** ensure kerning is on.
+**NEVER** capitalize whole paragraphs. `letter-spacing: 0.06em` in CSS.
+
+### Small Caps — Real Only
+
+Never fake (scaled-down regular caps). Use `font-variant-caps: small-caps` with fonts that have
+real small caps (OpenType `smcp`). System fonts lack them. Add letterspacing + kerning.
+
+### Point Size
+
+Print: 10–12pt. Web: 15–25px. The 12pt default is a typewriter relic. Half-point differences
+matter. Use smallest increment for emphasis. Use `clamp()` for fluid web sizing.
+
+### Letterspacing
+
+5–12% extra on ALL CAPS and small caps. Nothing on lowercase. Never spread so far apart that
+letters could fit in the gaps. CSS: `letter-spacing: 0.05em` to `0.12em`.
+
+### Kerning — Always On
+
+No exceptions. `font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;`
+
+### Ligatures
+
+Mandatory only when fi/fl visually collide. Check bold and italic too. Otherwise optional.
+CSS: `font-feature-settings: "liga" 1`.
+
+### Alternate Figures
+
+Tabular (`"tnum"`) for data tables. Oldstyle (`"onum"`) for body text. Default figures are fine
+for most uses. `font-variant-numeric: tabular-nums lining-nums` for numeric tables.
+
+### Font Selection
+
+1. No goofy fonts (novelty, script, handwriting, circus) in professional work
+2. No monospaced for body text — code only (and Courier is the worst monospaced)
+3. Print body: strongly prefer serif
+4. Web body: serif or sans both fine on modern screens
+5. Metrics spacing in InDesign, never optical (optical mangles kerning)
+
+### Mixing Fonts
+
+Max 2 fonts. Each gets a consistent role. Can mix serif+serif or sans+sans. Rarely mix within
+a paragraph. Lower contrast often more effective than high contrast.
+
+---
+
+## Page Layout
+
+### Body Text First
+
+Set body text BEFORE anything else. Four decisions determine everything: font, point size,
+line spacing, line length. All other elements calibrate against these.
+
+### Line Length — 45–90 Characters
+
+The #1 readability factor designers get wrong. The #1 flaw in responsive web layouts.
+Measure in characters, not inches. Alphabet test: fit 2–3 lowercase alphabets per line.
+CSS: `max-width: 65ch` on text containers.
+
+### Line Spacing — 120–145% of Point Size
+
+`line-height: 1.2` to `1.45`. Single-spaced (~117%) is too tight. Double (~233%) is too loose.
+Word processor "Single" and "Double" both miss the optimal range.
+
+### Page Margins
+
+One inch is not enough for proportional fonts. Print: 1.5–2.0″ at 12pt. Web: `max-width` on
+text containers plus `padding`. Don't fear white space — generous margins look professional.
+
+### Text Alignment
+
+Left-align for web (default). Justified requires `hyphens: auto` — browser engines are crude.
+Centered: sparingly, only for short titles (< 1 line). Never center whole text blocks.
+
+### Paragraph Separation — Indent OR Space, Never Both
+
+**First-line indent**: 1–4× point size. `text-indent: 1.5em`. Optional on first paragraph.
+**Space between**: 50–100% of font size. `margin-bottom: 0.75em`. Never double `
`, ``), never manual bullets. Prefer hollow bullets. Asterisks are too
+small for bullets. Don't over-indent.
+
+### Tables — Remove Borders, Add Padding
+
+Data creates an implied grid. Borders add clutter. Keep only thin rule under header row.
+`padding: 0.5em 1em`. Tabular figures for numeric columns. Right-align numbers.
+
+### Rules and Borders
+
+Try space above and below first. Border thickness: 0.5–1pt. No patterned borders. Thick lines
+are chartjunk.
+
+### Flow Control
+
+Widows (last line alone at top of page) and orphans (first line alone at bottom). CSS print:
+`orphans: 2; widows: 2`. Headings: `page-break-after: avoid`. Soft hyphens `` for
+words that confuse hyphenation engines.
+
+### Columns and Grids
+
+Print columns: 2–3 on letter paper, never 4. Web columns: awkward (indefinite bottom edge).
+Grids guide, not guarantee — simpler grids enforce more consistency. Aligning ugly to a grid
+still produces ugly.
+
+---
+
+## Responsive Web Typography
+
+**The rules don't change with screen size.** Same line length, line spacing, hierarchy.
+
+1. Scale `font-size` and container `width` together
+2. Always `max-width` on text containers — never edge-to-edge text
+3. Don't use `ch` unit for exact measurement (only measures zero width)
+4. `clamp()` for fluid scaling: `font-size: clamp(16px, 2.5vw, 20px)`
+5. Mobile minimum: `padding: 0 1rem` on text containers
+6. The common failure: images/nav scale carefully, body text ignored
+
+---
+
+## Screen Considerations
+
+Modern screens render type nearly as well as print. "Sans serif for screens" was true for 72dpi
+and is now obsolete. Serif fonts work fine on modern screens. Dark mode: reduce weight slightly.
+Test on macOS and Windows (antialiasing differs).
+
+---
+
+## Maxims of Page Layout
+
+1. **Body text first** — its 4 properties determine everything
+2. **Foreground vs background** — don't let chrome upstage body text
+3. **Smallest visible increments** — half-points matter
+4. **When in doubt, try both** — make samples, don't theorize
+5. **Consistency** — same things look the same
+6. **Relate new to existing** — each element constrains the next
+7. **Keep it simple** — 3 colors and 5 fonts? Think again
+8. **Imitate what you like** — emulate good typography from the wild
diff --git a/.agents/skills/typography/css-templates.md b/.agents/skills/typography/css-templates.md
new file mode 100644
index 0000000..6a91b92
--- /dev/null
+++ b/.agents/skills/typography/css-templates.md
@@ -0,0 +1,305 @@
+# CSS Typography Templates
+
+Read this file when generating CSS for any web project, building a design system, or auditing
+existing stylesheets. These templates encode every layout and formatting rule from the skill.
+
+---
+
+## Complete Baseline Template
+
+Copy-paste starting point. Every property maps to a specific typographic rule.
+
+```css
+/* =============================================
+ TYPOGRAPHY BASELINE
+ Rules from Practical Typography (Butterick)
+ ============================================= */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+ font-size: clamp(16px, 2.5vw, 20px); /* 15–25px range, fluid */
+ -webkit-text-size-adjust: 100%; /* prevent iOS resize */
+}
+
+body {
+ font-family: /* your-font, */ Georgia, 'Times New Roman', serif;
+ line-height: 1.38; /* 120–145% sweet spot */
+ color: #1a1a1a;
+ background: #fefefe;
+ text-rendering: optimizeLegibility; /* enables kern + liga */
+ font-feature-settings: "kern" 1, "liga" 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* ---- TEXT CONTAINER: LINE LENGTH CONTROL ---- */
+
+main, article, .prose {
+ max-width: min(65ch, 90vw); /* 45–90 chars enforced */
+ margin: 0 auto;
+ padding: 0 clamp(1rem, 4vw, 2rem);
+}
+
+/* ---- PARAGRAPHS ---- */
+/* Choose ONE: space-between OR first-line-indent. Never both. */
+
+/* Option A: Space between (default for web) */
+p { margin: 0 0 0.75em 0; } /* 50–100% of font size */
+
+/* Option B: First-line indent (uncomment to use instead)
+p { margin: 0; }
+p + p { text-indent: 1.5em; }
+*/
+
+/* ---- HEADINGS: SUBTLE, SPACED, BOLD ---- */
+
+h1, h2, h3, h4 {
+ line-height: 1.15; /* tighter than body */
+ hyphens: none; /* never hyphenate headings */
+ page-break-after: avoid; /* keep with next paragraph */
+ font-weight: 700; /* bold, not italic */
+}
+h1 {
+ font-size: 1.5em; /* smallest increment needed */
+ margin: 2.5em 0 0.5em; /* space above > below */
+}
+h2 {
+ font-size: 1.25em;
+ margin: 2em 0 0.4em;
+}
+h3 {
+ font-size: 1.1em;
+ margin: 1.5em 0 0.3em;
+}
+
+/* ---- EMPHASIS ---- */
+
+em { font-style: italic; } /* gentle emphasis (serif) */
+strong { font-weight: 700; } /* strong emphasis */
+/* NEVER: strong em, em strong, or u for emphasis */
+
+/* ---- ALL CAPS: ALWAYS LETTERSPACED ---- */
+
+.caps {
+ text-transform: uppercase;
+ letter-spacing: 0.06em; /* 5–12% range */
+ font-feature-settings: "kern" 1;
+}
+
+/* ---- SMALL CAPS: REAL ONLY ---- */
+
+.small-caps {
+ font-variant-caps: small-caps; /* requires font with smcp */
+ letter-spacing: 0.05em;
+ font-feature-settings: "smcp" 1, "kern" 1;
+}
+
+/* ---- BLOCK QUOTES ---- */
+
+blockquote {
+ margin: 1.5em 2em; /* indent 2–5em */
+ font-size: 0.92em; /* slightly smaller */
+ line-height: 1.3;
+}
+
+/* ---- TABLES: CLEAN, NOT CLUTTERED ---- */
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+th, td {
+ padding: 0.5em 1em; /* generous cell padding */
+ text-align: left;
+ vertical-align: top;
+ border: none; /* remove cell borders */
+}
+thead th {
+ border-bottom: 1.5px solid currentColor; /* thin rule under header */
+ font-weight: 600;
+}
+
+/* Numeric data tables: tabular lining figures */
+.data-table td {
+ font-feature-settings: "tnum" 1, "lnum" 1;
+ font-variant-numeric: tabular-nums lining-nums;
+}
+
+/* ---- LISTS ---- */
+
+ul, ol {
+ padding-left: 1.5em;
+ margin: 0 0 1em;
+}
+li { margin-bottom: 0.3em; }
+
+/* ---- HORIZONTAL RULES ---- */
+
+hr {
+ border: none;
+ border-top: 1px solid currentColor; /* 0.5–1pt, no patterns */
+ opacity: 0.3;
+ margin: 2em 0;
+}
+
+/* ---- LINKS ---- */
+
+a {
+ color: inherit;
+ text-decoration-line: underline;
+ text-decoration-thickness: 1px; /* subtle, not heavy */
+ text-underline-offset: 2px;
+}
+a:hover { opacity: 0.8; }
+
+/* ---- CODE ---- */
+
+code {
+ font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+ font-size: 0.88em;
+ padding: 0.1em 0.3em;
+ border-radius: 3px;
+ background: rgba(0,0,0,0.04);
+}
+pre code {
+ display: block;
+ padding: 1em;
+ overflow-x: auto;
+ line-height: 1.5;
+}
+
+/* ---- RESPONSIVE ---- */
+
+@media (max-width: 600px) {
+ blockquote { margin: 1em 1em; }
+ table { font-size: 0.9em; }
+ th, td { padding: 0.4em 0.6em; }
+}
+
+/* ---- PRINT ---- */
+
+@media print {
+ body { font-size: 11pt; line-height: 1.3; }
+ main { max-width: none; }
+ h1, h2, h3 { page-break-after: avoid; }
+ p { orphans: 2; widows: 2; }
+}
+```
+
+---
+
+## Responsive Typography Patterns
+
+### Fluid Typography with Clamp
+
+```css
+body {
+ font-size: clamp(16px, 2.5vw, 20px);
+}
+main {
+ max-width: min(65ch, 90vw);
+ margin: 0 auto;
+ padding: 0 clamp(1rem, 4vw, 2rem);
+}
+h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
+h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
+```
+
+### Breakpoint-Based Alternative
+
+```css
+body { font-size: 16px; }
+@media (min-width: 600px) { body { font-size: 17px; } }
+@media (min-width: 900px) { body { font-size: 18px; } }
+@media (min-width: 1200px) { body { font-size: 19px; } }
+```
+
+### Key Principles
+
+1. Scale `font-size` and container `width` together
+2. Always `max-width` on text containers — never edge-to-edge
+3. Don't use `ch` unit for exact line length (only measures zero width)
+4. Use `vw` units with `clamp()` for bounds
+5. Mobile minimum: `padding: 0 1rem` on text containers
+
+---
+
+## OpenType Features Reference
+
+```css
+/* Body text */
+.body {
+ font-feature-settings:
+ "kern" 1, /* kerning pairs — always on */
+ "liga" 1, /* standard ligatures */
+ "calt" 1; /* contextual alternates */
+}
+
+/* Body text with oldstyle figures */
+.prose {
+ font-feature-settings:
+ "kern" 1, "liga" 1, "calt" 1,
+ "onum" 1; /* oldstyle (lowercase-height) numbers */
+}
+
+/* Data tables */
+.data-table td {
+ font-feature-settings:
+ "kern" 1,
+ "tnum" 1, /* tabular (fixed-width) numbers */
+ "lnum" 1; /* lining (capital-height) numbers */
+}
+
+/* Small caps */
+.small-caps {
+ font-feature-settings:
+ "kern" 1,
+ "smcp" 1; /* real small caps */
+ letter-spacing: 0.05em;
+}
+
+/* All caps with capital spacing */
+.all-caps {
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ font-feature-settings:
+ "kern" 1,
+ "cpsp" 1; /* capital spacing (if font supports) */
+}
+```
+
+---
+
+## Dark Mode Considerations
+
+```css
+@media (prefers-color-scheme: dark) {
+ body {
+ color: #e0e0e0;
+ background: #1a1a1a;
+ font-weight: 350; /* slightly lighter — dark bg makes text appear heavier */
+ -webkit-font-smoothing: auto; /* let system decide in dark mode */
+ }
+}
+```
+
+---
+
+## React/JSX Inline Pattern
+
+When generating React components with text, apply entities directly:
+
+```jsx
+// WRONG
+IMPORTANT NOTICE
+"Hello," she said. "It's a beautiful day..."
+Price: $12 x 4 = $48
+Pages 1-10
+
+// RIGHT
+IMPORTANT NOTICE
+“Hello,” she said. “It’s a beautiful day…”
+Price: $12 × 4 = $48
+Pages 1–10
+```
diff --git a/.agents/skills/typography/html-entities.md b/.agents/skills/typography/html-entities.md
new file mode 100644
index 0000000..884986f
--- /dev/null
+++ b/.agents/skills/typography/html-entities.md
@@ -0,0 +1,171 @@
+# HTML Entity & Character Reference
+
+Read this file when you need to look up the correct HTML entity for a character, or when auditing
+existing HTML for incorrect character usage.
+
+---
+
+## Quick Substitution Table
+
+When generating HTML/JSX, substitute these characters automatically:
+
+| If you see | Replace with | Entity | Rule |
+|------------|-------------|--------|------|
+| "straight double" | "curly double" | `“` `”` | Always curly quotes |
+| 'straight single' | 'curly single' | `‘` `’` | Always curly quotes |
+| it's (straight) | it's (curly) | `’` | Apostrophe = closing single quote |
+| -- | – | `–` | En dash for ranges |
+| --- | — | `—` | Em dash for breaks |
+| ... | … | `…` | Single ellipsis character |
+| (c) | © | `©` | Real copyright symbol |
+| (TM) | ™ | `™` | Real trademark symbol |
+| (R) | ® | `®` | Real registered symbol |
+| 12 x 34 | 12 × 34 | `×` | Real multiplication sign |
+| 56 - 12 (math) | 56 − 12 | `−` | Real minus sign |
+| 6' 10" (curly, in measurements) | 6' 10" (straight) | `'` `"` | Foot/inch must be straight |
+
+---
+
+## Complete Entity Table
+
+### Quotes and Apostrophes
+
+```
+“ " U+201C opening double quote
+” " U+201D closing double quote
+‘ ' U+2018 opening single quote
+’ ' U+2019 closing single quote / apostrophe
+" " U+0022 straight double quote (inch mark only)
+' ' U+0027 straight single quote (foot mark only)
+```
+
+### Dashes
+
+```
+- U+002D hyphen (compound words, line breaks)
+– – U+2013 en dash (ranges: 1–10, connections: Sarbanes–Oxley)
+— — U+2014 em dash (sentence breaks—like this)
+ U+00AD soft/optional hyphen (invisible break suggestion)
+```
+
+### Symbols
+
+```
+… … U+2026 ellipsis
+× × U+00D7 multiplication sign
+− − U+2212 minus sign
+÷ ÷ U+00F7 division sign
+± ± U+00B1 plus-minus sign
+© © U+00A9 copyright
+™ ™ U+2122 trademark
+® ® U+00AE registered trademark
+¶ ¶ U+00B6 paragraph mark (pilcrow)
+§ § U+00A7 section mark
+& & U+0026 ampersand
+° ° U+00B0 degree sign
+```
+
+### Spaces
+
+```
+ U+00A0 nonbreaking space (prevents line break)
+ U+2009 thin space (half word-space width)
+ U+2002 en space (half em width)
+ U+2003 em space (full em width)
+ U+200A hair space (thinnest space)
+```
+
+### Primes (Foot/Inch/Minute/Second)
+
+```
+' ' U+0027 foot mark / minute mark (straight single)
+" " U+0022 inch mark / second mark (straight double)
+′ ′ U+2032 true prime (if font supports — sloped)
+″ ″ U+2033 true double prime (if font supports — sloped)
+```
+
+### Arrows and Misc
+
+```
+← ← U+2190 left arrow
+→ → U+2192 right arrow
+↑ ↑ U+2191 up arrow
+↓ ↓ U+2193 down arrow
+• • U+2022 bullet
+· · U+00B7 middle dot
+« « U+00AB left guillemet
+» » U+00BB right guillemet
+```
+
+---
+
+## Common Accented Characters
+
+Always preserve accents in proper names. These are the most frequently needed:
+
+```
+é é É É
+è è È È
+á á Á Á
+à à À À
+í í Í Í
+ó ó Ó Ó
+ú ú Ú Ú
+ü ü Ü Ü
+ö ö Ö Ö
+ç ç Ç Ç
+ñ ñ Ñ Ñ
+ß ß (Eszett — or just use ss)
+```
+
+---
+
+## Contextual Usage Patterns
+
+### Quoted Text
+```html
+“She said ‘hello’ to me,” he reported.
+```
+
+### Decade Abbreviations (apostrophe pointing down)
+```html
+In the ’70s, rock ’n’ roll dominated.
+```
+
+### Ranges and Connections
+```html
+Pages 4–8
+The Sarbanes–Oxley Act
+The 2020–2025 period
+```
+
+### Sentence Breaks
+```html
+The em dash puts a nice pause in text—and is underused.
+```
+
+### Legal/Academic References
+```html
+Under § 1782, the seller may offer a refund.
+See ¶ 49 of the contract.
+```
+
+### Copyright and Trademark
+```html
+
+```
+
+### Measurements
+```html
+The room is 12' 6" × 8' 10".
+```
+
+### Math
+```html
+12 × 34 − 56 = 352
+```
+
+### Ellipsis with Nonbreaking Space
+```html
+From A … to Z
+```
diff --git a/.codex/skills/bencium-controlled-ux-designer b/.codex/skills/bencium-controlled-ux-designer
new file mode 120000
index 0000000..8f4a17b
--- /dev/null
+++ b/.codex/skills/bencium-controlled-ux-designer
@@ -0,0 +1 @@
+../../.agents/skills/bencium-controlled-ux-designer
\ No newline at end of file
diff --git a/.codex/skills/bencium-impact-designer b/.codex/skills/bencium-impact-designer
new file mode 120000
index 0000000..5d2a01e
--- /dev/null
+++ b/.codex/skills/bencium-impact-designer
@@ -0,0 +1 @@
+../../.agents/skills/bencium-impact-designer
\ No newline at end of file
diff --git a/.codex/skills/bencium-innovative-ux-designer b/.codex/skills/bencium-innovative-ux-designer
new file mode 120000
index 0000000..9df96a9
--- /dev/null
+++ b/.codex/skills/bencium-innovative-ux-designer
@@ -0,0 +1 @@
+../../.agents/skills/bencium-innovative-ux-designer
\ No newline at end of file
diff --git a/.codex/skills/design-audit b/.codex/skills/design-audit
new file mode 120000
index 0000000..fe44fad
--- /dev/null
+++ b/.codex/skills/design-audit
@@ -0,0 +1 @@
+../../.agents/skills/design-audit
\ No newline at end of file
diff --git a/.codex/skills/frontend-design b/.codex/skills/frontend-design
new file mode 120000
index 0000000..712f694
--- /dev/null
+++ b/.codex/skills/frontend-design
@@ -0,0 +1 @@
+../../.agents/skills/frontend-design
\ No newline at end of file
diff --git a/.codex/skills/relationship-design b/.codex/skills/relationship-design
new file mode 120000
index 0000000..5463f90
--- /dev/null
+++ b/.codex/skills/relationship-design
@@ -0,0 +1 @@
+../../.agents/skills/relationship-design
\ No newline at end of file
diff --git a/.codex/skills/typography b/.codex/skills/typography
new file mode 120000
index 0000000..770e5cc
--- /dev/null
+++ b/.codex/skills/typography
@@ -0,0 +1 @@
+../../.agents/skills/typography
\ No newline at end of file
diff --git a/.config/opencode/skills/bencium-controlled-ux-designer b/.config/opencode/skills/bencium-controlled-ux-designer
new file mode 120000
index 0000000..f786c60
--- /dev/null
+++ b/.config/opencode/skills/bencium-controlled-ux-designer
@@ -0,0 +1 @@
+../../../.agents/skills/bencium-controlled-ux-designer
\ No newline at end of file
diff --git a/.config/opencode/skills/bencium-impact-designer b/.config/opencode/skills/bencium-impact-designer
new file mode 120000
index 0000000..3cfe714
--- /dev/null
+++ b/.config/opencode/skills/bencium-impact-designer
@@ -0,0 +1 @@
+../../../.agents/skills/bencium-impact-designer
\ No newline at end of file
diff --git a/.config/opencode/skills/bencium-innovative-ux-designer b/.config/opencode/skills/bencium-innovative-ux-designer
new file mode 120000
index 0000000..0d55fc5
--- /dev/null
+++ b/.config/opencode/skills/bencium-innovative-ux-designer
@@ -0,0 +1 @@
+../../../.agents/skills/bencium-innovative-ux-designer
\ No newline at end of file
diff --git a/.config/opencode/skills/design-audit b/.config/opencode/skills/design-audit
new file mode 120000
index 0000000..b688ee2
--- /dev/null
+++ b/.config/opencode/skills/design-audit
@@ -0,0 +1 @@
+../../../.agents/skills/design-audit
\ No newline at end of file
diff --git a/.config/opencode/skills/frontend-design b/.config/opencode/skills/frontend-design
new file mode 120000
index 0000000..e559f4d
--- /dev/null
+++ b/.config/opencode/skills/frontend-design
@@ -0,0 +1 @@
+../../../.agents/skills/frontend-design
\ No newline at end of file
diff --git a/.config/opencode/skills/relationship-design b/.config/opencode/skills/relationship-design
new file mode 120000
index 0000000..fc7e028
--- /dev/null
+++ b/.config/opencode/skills/relationship-design
@@ -0,0 +1 @@
+../../../.agents/skills/relationship-design
\ No newline at end of file
diff --git a/.config/opencode/skills/typography b/.config/opencode/skills/typography
new file mode 120000
index 0000000..212f64f
--- /dev/null
+++ b/.config/opencode/skills/typography
@@ -0,0 +1 @@
+../../../.agents/skills/typography
\ No newline at end of file
+ 
+
+// Decorative images
+
+
+// Functional images (buttons)
+
+
+// Complex images
+
+```
+
+### Next.js Image Component
+
+```tsx
+import Image from 'next/image';
+
+
+```
+
+### Responsive Video
+
+```tsx
+
+