initial commit

_bmad/wds/workflows/4-ux-design/templates/instructions/responsive.instructions.md

@@ -0,0 +1,64 @@
+# Responsive Behavior
+
+**Include when:** Page needs different layouts across breakpoints
+
+---
+
+## Breakpoints
+
+| Name | Range | Primary Use |
+|------|-------|-------------|
+| Mobile | < 768px | Touch, single column |
+| Tablet | 768px - 1024px | Touch/mouse, flexible |
+| Desktop | > 1024px | Mouse, multi-column |
+
+---
+
+## Mobile (< 768px)
+
+### Layout Changes
+- {What changes from desktop}
+
+### Hidden Elements
+- {Elements not shown on mobile}
+
+### Mobile-Specific
+- {Touch targets, gestures, etc.}
+
+---
+
+## Tablet (768px - 1024px)
+
+### Layout Changes
+- {What changes}
+
+### Adaptations
+- {Specific tablet behaviors}
+
+---
+
+## Desktop (> 1024px)
+
+### Full Layout
+- {Desktop-specific features}
+
+### Enhancements
+- {Hover states, keyboard shortcuts}
+
+---
+
+## Component Breakpoint Behavior
+
+| Component | Mobile | Tablet | Desktop |
+|-----------|--------|--------|---------|
+| `{component}` | {behavior} | {behavior} | {behavior} |
+
+---
+
+## Navigation Changes
+
+| Breakpoint | Navigation Style |
+|------------|------------------|
+| Mobile | {hamburger / bottom nav / etc.} |
+| Tablet | {style} |
+| Desktop | {full nav / sidebar / etc.} |