Add shared design skills

.agents/skills/bencium-impact-designer/ACCESSIBILITY.md

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

.agents/skills/bencium-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)
+<button className="transition-colors duration-150 ease-out hover:bg-blue-700">
+
+// Fade + slide (Framer Motion)
+<motion.div
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: 0.3, ease: "easeOut" }}
+/>
+
+// Stagger children
+<motion.ul variants={{ visible: { transition: { staggerChildren: 0.1 } } }}>
+  <motion.li variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} />
+</motion.ul>
+```
+
+## Performance Rules
+
+- Only animate `transform` and `opacity` (GPU-accelerated)
+- Avoid animating `width`, `height`, `margin`, `padding`
+- Keep durations under 500ms for UI interactions
+- Respect `prefers-reduced-motion`:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+## Resources
+
+- [Framer Motion](https://www.framer.com/motion/)
+- [CSS Easing Functions](https://easings.net/)

.agents/skills/bencium-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
+<div className="
+  w-full          // mobile: full width
+  sm:w-1/2        // 480px+: half
+  md:w-1/3        // 768px+: third
+  lg:w-1/4        // 1024px+: quarter
+">
+
+// Responsive grid
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+
+// Responsive typography
+<h1 className="text-3xl md:text-4xl lg:text-5xl">
+
+// Show/hide by breakpoint
+<div className="block md:hidden">Mobile only</div>
+<div className="hidden md:block">Desktop only</div>
+```
+
+## Fluid Typography
+
+```css
+h1 { font-size: clamp(2rem, 5vw, 4rem); }
+p { font-size: clamp(1rem, 2.5vw, 1.25rem); }
+```
+
+## Touch Targets
+
+- Minimum **44x44px** for all interactive elements
+- Use `touch-manipulation` to prevent 300ms tap delay
+- Adequate spacing between targets
+
+```tsx
+<button className="min-w-[44px] min-h-[44px] touch-manipulation">
+```
+
+## Mobile Simplification
+
+| Desktop | Mobile |
+|---------|--------|
+| Full nav bar | Hamburger menu |
+| Side-by-side fields | Stacked fields |
+| Multi-column grid | Single column |
+| Inline buttons | Fixed bottom bar |
+| Data table | Collapsed cards |
+| Visible sidebar | Hidden/collapsible |
+
+## Images
+
+```tsx
+// Responsive images
+<img
+  srcSet="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
+  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+  loading="lazy"
+/>
+
+// Next.js
+<Image src="/hero.jpg" width={1200} height={600} priority className="w-full h-auto" />
+```
+
+## Testing
+
+Test at these widths:
+- 375px (iPhone SE)
+- 390px (iPhone 14)
+- 768px (iPad)
+- 1024px (iPad Pro)
+- 1280px+ (Desktop)
+
+## Resources
+
+- [Tailwind Responsive](https://tailwindcss.com/docs/responsive-design)