Initial commit

2025-11-30 08:39:20 +08:00
commit b92d349a51
9 changed files with 1101 additions and 0 deletions
--- a/commands/check.md
+++ b/commands/check.md
@@ -0,0 +1,135 @@
+---
+description: Check webpage for issues (broken links, errors, etc.)
+---
+
+<url>--url</url>
+<check-type>--check-type</check-type>
+
+## Check Webpage for Issues
+
+Automatically check webpages for common issues like broken links, console errors, missing images, or accessibility problems.
+
+**Works from any directory** - Saves report to your working directory's `.web-tests/` folder.
+
+## How It Works
+
+When you run `/check`, Claude will:
+
+1. **Auto-detect dev server** (or use provided URL)
+2. **Create check script** in `.web-tests/scripts/`
+3. **Run automated checks** based on check-type
+4. **Generate report** in `.web-tests/reports/`
+5. **Show summary** of findings
+
+## Usage
+
+```bash
+# Check for broken links
+/check --check-type links
+
+# Check for console errors
+/check --url http://localhost:3001 --check-type console
+
+# Check for missing images
+/check --check-type images
+
+# Check accessibility
+/check --check-type a11y
+
+# Check all issues
+/check --check-type all
+```
+
+## Check Types
+
+- `links` - Find broken links (404s, timeouts)
+- `console` - Capture JavaScript errors and warnings
+- `images` - Check for missing or broken images
+- `a11y` - Basic accessibility checks (ARIA, alt text, etc.)
+- `performance` - Basic performance metrics
+- `all` - Run all checks
+
+## What Claude Will Do
+
+1. **Auto-detect dev server** (if no URL provided)
+2. **Create check script** in `.web-tests/scripts/check-{type}-{timestamp}.js`
+3. **Execute checks** with: `CWD=$(pwd) cd <skill-dir> && node run.js .web-tests/scripts/check-*.js`
+4. **Generate report** in `.web-tests/reports/`
+5. **Display summary** of issues found
+
+## Output Structure
+
+```
+your-repo/
+└── .web-tests/
+    ├── scripts/
+    │   └── check-links-2025-10-23.js
+    └── reports/
+        └── check-links-2025-10-23.md
+```
+
+## Report Contents
+
+The report will include:
+
+- **Summary** - Total issues found
+- **Details** - Each issue with location and description
+- **Severity** - Critical, Warning, Info
+- **Suggestions** - How to fix each issue
+
+## Examples
+
+```bash
+# Check for broken links
+/check --check-type links
+
+# Check for console errors on specific page
+/check --url http://localhost:3001/dashboard --check-type console
+
+# Full health check
+/check --check-type all
+
+# Check accessibility
+/check --url http://localhost:3001 --check-type a11y
+```
+
+## What Gets Checked
+
+**Links:**
+- External links (status codes)
+- Internal links (navigation)
+- Anchor links
+- Download links
+
+**Console:**
+- JavaScript errors
+- Network failures
+- Console warnings
+
+**Images:**
+- Missing images (404s)
+- Broken src attributes
+- Missing alt text
+
+**Accessibility:**
+- Missing ARIA labels
+- Color contrast (basic)
+- Semantic HTML
+- Keyboard navigation
+
+**Performance:**
+- Page load time
+- Resource sizes
+- Number of requests
+
+## Tips
+
+- **Run before deployment** - Catch issues early
+- **Check after changes** - Verify nothing broke
+- **Commit reports** - Track issues over time
+- **Automated quality checks** - Quick health check
+
+## See Also
+
+- `/test` - Run automated tests
+- `/screenshot` - Take screenshots
--- a/commands/take-screenshot.md
+++ b/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
--- a/commands/test-feature.md
+++ b/commands/test-feature.md
@@ -0,0 +1,100 @@
+---
+description: Test a webapp feature with Playwright
+---
+
+<url>--url</url>
+<test-type>--test-type</test-type>
+
+## Test Webapp Feature
+
+Run automated browser tests for your webapp using Playwright. Tests are saved to `.web-tests/` in your current working directory.
+
+**Works from any directory** - Saves test scripts and screenshots to your working directory's `.web-tests/` folder.
+
+## How It Works
+
+When you run `/test`, Claude will:
+
+1. **Auto-detect running dev servers** (or use the provided URL)
+2. **Create a custom test script** in `.web-tests/scripts/`
+3. **Execute the test** with visible browser
+4. **Save screenshots** to `.web-tests/screenshots/`
+5. **Show results** with console output
+
+## Usage
+
+```bash
+# Test specific feature
+/test --test-type login
+
+# Test with specific URL
+/test --url http://localhost:3001 --test-type form
+
+# Test responsive design
+/test --test-type responsive
+
+# Test page load
+/test --url https://example.com --test-type page-load
+```
+
+## Common Test Types
+
+- `login` - Test login flow and authentication
+- `form` - Test form filling and submission
+- `responsive` - Test across multiple viewports (desktop, tablet, mobile)
+- `page-load` - Test if page loads correctly
+- `navigation` - Test navigation and routing
+- `custom` - Claude will ask what to test
+
+## What Claude Will Do
+
+1. **Auto-detect dev server** (if testing localhost)
+2. **Write test script** to `.web-tests/scripts/test-{type}-{timestamp}.js`
+3. **Execute test** using: `CWD=$(pwd) cd <skill-dir> && node run.js .web-tests/scripts/test-*.js`
+4. **Report results** with any errors or successes
+5. **Save screenshots** automatically to `.web-tests/screenshots/`
+
+## Output Structure
+
+```
+your-repo/
+└── .web-tests/
+    ├── scripts/
+    │   └── test-login-2025-10-23.js
+    └── screenshots/
+        ├── login-page-2025-10-23T12-30-45.png
+        └── dashboard-2025-10-23T12-30-50.png
+```
+
+## Environment Variables
+
+Claude can use these environment variables:
+
+- `CWD` - Your current working directory (auto-set)
+- `HEADLESS` - Set to `true` for background execution (default: `false`)
+- `SLOW_MO` - Slow down actions for debugging (default: `0`)
+
+## Examples
+
+```bash
+# Test login with credentials
+/test --test-type login
+
+# Test contact form
+/test --test-type form --url http://localhost:3001/contact
+
+# Test homepage across viewports
+/test --test-type responsive --url http://localhost:3001
+```
+
+## Tips
+
+- Tests run with **visible browser** by default (easier to debug)
+- **Screenshots are automatic** - saved to `.web-tests/screenshots/`
+- **Test scripts are reusable** - found in `.web-tests/scripts/`
+- **Auto-detects servers** - no need to specify URL for localhost
+
+## See Also
+
+- `/screenshot` - Take screenshots of pages
+- `/check` - Check for broken links or issues