136 lines
3.0 KiB
Markdown
136 lines
3.0 KiB
Markdown
---
|
|
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
|