Initial commit

commands/take-screenshot.md

@@ -0,0 +1,107 @@
+---
+description: Take screenshots of web pages
+---
+
+<url>--url</url>
+<viewports>--viewports</viewports>
+
+## Take Screenshots
+
+Capture screenshots of web pages across different viewports. Screenshots are saved to `.web-tests/screenshots/` in your working directory.
+
+**Works from any directory** - Saves screenshots to your working directory's `.web-tests/screenshots/` folder.
+
+## How It Works
+
+When you run `/screenshot`, Claude will:
+
+1. **Auto-detect dev server** (or use provided URL)
+2. **Create screenshot script** in `.web-tests/scripts/`
+3. **Capture screenshots** across specified viewports
+4. **Save to** `.web-tests/screenshots/` with timestamps
+5. **Report** file locations
+
+## Usage
+
+```bash
+# Screenshot current dev server
+/screenshot
+
+# Screenshot specific URL
+/screenshot --url http://localhost:3001
+
+# Screenshot across all viewports
+/screenshot --viewports all
+
+# Screenshot specific viewports
+/screenshot --viewports desktop,mobile
+
+# Screenshot external site
+/screenshot --url https://example.com --viewports desktop
+```
+
+## Viewport Options
+
+- `all` - Desktop (1920x1080), Tablet (768x1024), Mobile (375x667)
+- `desktop` - 1920x1080
+- `tablet` - 768x1024
+- `mobile` - 375x667
+- `custom` - Claude will ask for dimensions
+
+## What Claude Will Do
+
+1. **Auto-detect dev server** (if no URL provided)
+2. **Create screenshot script** in `.web-tests/scripts/screenshot-{timestamp}.js`
+3. **Execute script** with: `CWD=$(pwd) cd <skill-dir> && node run.js .web-tests/scripts/screenshot-*.js`
+4. **Take screenshots** across specified viewports
+5. **Report file locations**
+
+## Output Structure
+
+```
+your-repo/
+└── .web-tests/
+    ├── scripts/
+    │   └── screenshot-2025-10-23.js
+    └── screenshots/
+        ├── desktop-2025-10-23T12-30-45.png
+        ├── tablet-2025-10-23T12-30-48.png
+        └── mobile-2025-10-23T12-30-51.png
+```
+
+## Screenshot Options
+
+Claude can configure:
+
+- **Full page** - Captures entire scrollable page (default: `true`)
+- **Specific element** - Screenshot just one element
+- **Visible viewport** - Only visible portion
+- **Wait for load** - Waits for page to fully load
+
+## Examples
+
+```bash
+# Quick screenshot of current dev server
+/screenshot
+
+# Screenshot homepage across all devices
+/screenshot --url http://localhost:3001 --viewports all
+
+# Mobile-only screenshot
+/screenshot --viewports mobile
+
+# Screenshot specific page
+/screenshot --url http://localhost:3001/dashboard --viewports desktop
+```
+
+## Tips
+
+- Screenshots include **full page** by default (scrolls entire page)
+- **Timestamps in filenames** prevent overwriting
+- **Saved in working directory** - easy to commit or share
+- **Browser visible** - see what's being captured
+
+## See Also
+
+- `/test` - Run automated tests
+- `/check` - Check for broken links or issues