Initial commit - Phase 3/4

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

UI_GUIDELINES.md

@@ -2,15 +2,16 @@
 
 ## Design Philosophy
 
-**Resource-Constrained Excellence**: Build a beautiful, functional interface that respects the Pi Zero 2 W's limited resources while providing an excellent user experience.
+**Mobile-First, Resource-Constrained Excellence**: Build a beautiful, touch-optimized interface that works perfectly on smartphones while respecting the Pi Zero 2 W's limited resources.
 
 ### Core Principles
 
-1. **Performance First** - Every byte counts
-2. **Progressive Enhancement** - Works without JavaScript, better with it
-3. **Mobile-First** - Optimize for small screens (most users access via phone)
-4. **Single-Purpose Focus** - One task at a time, clear hierarchy
-5. **Instant Feedback** - Users should never wonder what's happening
+1. **Mobile-First** - PRIMARY target is smartphone users (📱 80% of usage)
+2. **Touch-Optimized** - 44×44px minimum touch targets, gesture support
+3. **Performance First** - Every byte counts, code splitting for charts
+4. **Progressive Enhancement** - Works without JavaScript, better with it
+5. **Cross-Platform** - Shared components for Web/Mobile/Desktop apps
+6. **Instant Feedback** - Users should never wonder what's happening
 
 ---
 
@@ -25,10 +26,17 @@
 ### Performance Targets
 - **First Contentful Paint**: < 1.5s
 - **Time to Interactive**: < 3s
-- **Total Bundle Size**: < 150KB (gzipped)
+- **Base Bundle Size**: ~120KB (gzipped)
+- **With Victory Charts**: ~170KB (via code splitting)
 - **CSS**: < 20KB (gzipped)
 - **Fonts**: System fonts only (no web fonts)
 
+### Mobile-First Targets
+- **Viewport**: 375px width (iPhone SE) as baseline
+- **Touch Targets**: 44×44px minimum (iOS HIG)
+- **Gesture Support**: Pan, zoom, swipe for charts
+- **Orientation**: Portrait primary, landscape support
+
 ---
 
 ## Visual Design System
@@ -162,6 +170,93 @@ Validation: Inline, immediate feedback
 1. **Inline validation** - Show errors near the field
 2. **Error boundaries** - Graceful degradation
 3. **Retry options** - Always offer a way forward
+
+---
+
+## Data Visualization (Victory Charts)
+
+### Mobile-First Chart Design
+
+**Victory** is the official charting library for cross-platform support:
+- Web (Remix.js)
+- React Native (iOS/Android)
+- Electron (Desktop)
+
+### Chart Guidelines
+
+#### Touch Interactions
+```typescript
+// Victory provides built-in mobile gestures
+<VictoryChart
+  containerComponent={
+    <VictoryZoomContainer
+      zoomDimension="x"        // Horizontal zoom
+      allowPan={true}          // Swipe to pan
+      allowZoom={true}         // Pinch to zoom
+      minimumZoom={{ x: 1 }}
+    />
+  }
+>
+  <VictoryLine data={waveformData} />
+</VictoryChart>
+```
+
+#### Responsive Sizing
+- **Mobile**: Full-width charts (375px - 20px padding)
+- **Tablet**: 60-80% width with legends
+- **Desktop**: Max 800px width
+
+#### Performance
+- **Code Splitting**: Lazy load charts only when needed
+- **Data Points**: Limit to 1000 points for smooth interaction
+- **Downsampling**: For waveforms > 10k samples
+
+### Color Scheme for Charts
+
+```css
+/* Match cyberpunk theme */
+--chart-primary: #00ffff;     /* Cyan - main data line */
+--chart-secondary: #ff00ff;   /* Magenta - comparison */
+--chart-accent: #00ff88;      /* Green - success threshold */
+--chart-warning: #ffaa00;     /* Orange - warning threshold */
+--chart-grid: rgba(255, 255, 255, 0.1);  /* Subtle grid */
+```
+
+### Guided Workflow UI
+
+Multi-step wizards for PM3 operations:
+
+#### Progress Indicator
+```
+[✓] Tune Antenna → [●] Read Card → [ ] Write Target
+```
+
+#### Step Navigation
+- **Mobile**: Full-screen steps, clear back/next buttons (bottom)
+- **Desktop**: Sidebar with step list, main area for content
+- **Validation**: Disable "Next" until step requirements met
+
+#### Touch-Optimized Actions
+```
+┌─────────────────────────────────┐
+│ Step 2: Read Source Card        │
+├─────────────────────────────────┤
+│                                 │
+│ [Large icon: Card on reader]   │
+│                                 │
+│ Place card on Proxmark3         │
+│ antenna and tap button below    │
+│                                 │
+│  ┌───────────────────────────┐ │
+│  │    Read Card (44px)       │ │  ← Touch target
+│  └───────────────────────────┘ │
+│                                 │
+│ [Progress: 0 of 64 blocks]     │
+│                                 │
+├─────────────────────────────────┤
+│ [Back]              [Next →]   │  ← Navigation
+└─────────────────────────────────┘
+```
 4. **Clear messages** - Explain what happened and why
 
 ### Real-Time Updates (SSE)