Initial commit

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