Initial commit

commands/test-responsive.md

@@ -0,0 +1,45 @@
+---
+description: Test responsive design across mobile, tablet, and desktop viewports. Takes screenshots at each breakpoint.
+allowed-tools: Bash(*)
+argument-hint: [url]
+model: sonnet
+---
+
+# Test Responsive Design
+
+Capture screenshots at multiple viewport sizes to verify responsive design.
+
+## Instructions
+
+1. If URL provided in $ARGUMENTS, navigate first:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-nav.js "$ARGUMENTS"
+   ```
+
+2. Test **Mobile** (375×667 - iPhone SE):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-resize.js --mobile
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js --output=/tmp/responsive-mobile.png
+   ```
+
+3. Test **Tablet** (768×1024 - iPad):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-resize.js --tablet
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js --output=/tmp/responsive-tablet.png
+   ```
+
+4. Test **Desktop** (1920×1080):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-resize.js --desktop
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js --output=/tmp/responsive-desktop.png
+   ```
+
+5. **Analyze all screenshots** and report:
+   - Layout shifts between breakpoints
+   - Text overflow or truncation
+   - Overlapping elements
+   - Hidden/missing content
+   - Spacing and alignment issues
+   - Navigation usability at each size
+
+Provide specific recommendations for any issues found.