Agent skill
page-reviewer
Review pages visually and test accessibility using agent-browser CLI
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/page-reviewer
SKILL.md
Page Reviewer
Visual and accessibility testing for JusticeHub pages using agent-browser.
When to Use
- Test page rendering and layout
- Check accessibility tree structure
- Verify interactive elements work
- Capture screenshots for review
- Debug console errors
Invocation
/page-reviewer [scope]
| Scope | What It Reviews |
|---|---|
all |
All key pages (default) |
/path |
Specific page path |
full-url |
Any URL directly |
Quick Start
# Ensure dev server running
npm run dev &
# Review single page
agent-browser open http://localhost:3000/community-map
agent-browser snapshot -i -c
agent-browser screenshot --full /tmp/review.png
agent-browser errors
agent-browser close
Key Commands
| Command | Purpose |
|---|---|
agent-browser open <url> |
Navigate to page |
agent-browser snapshot -i -c |
Interactive elements with refs |
agent-browser screenshot --full <path> |
Full-page capture |
agent-browser click @ref |
Click element by ref |
agent-browser fill @ref "text" |
Fill form input |
agent-browser get text @ref |
Extract text content |
agent-browser errors |
Console errors |
agent-browser close |
Close browser |
Review Checklist
For each page:
- Load: Page renders without errors
- Navigation: Links and buttons accessible
- Forms: Inputs have labels, submit works
- Data: Content loads from database
- Responsive: Layout works at different widths
- Errors: No console errors
Key Pages
| Priority | Page | Path |
|---|---|---|
| High | Homepage | / |
| High | Community Map | /community-map |
| High | Community Programs | /community-programs |
| Medium | People Directory | /people |
| Medium | Youth Justice Report | /youth-justice-report |
| Medium | Stories | /stories |
| Low | Admin Dashboard | /admin |
Output Format
## [Page Name] - /path
**Status**: OK | Issues Found
**Elements**: [count] interactive elements
**Errors**: None | [list]
**Accessibility**:
- [x] Navigation present
- [x] Forms labeled
- [ ] Issue: [description]
**Screenshot**: /tmp/review-[page].png
Troubleshooting
| Issue | Solution |
|---|---|
agent-browser not found |
npm install -g agent-browser && agent-browser install |
| Browser crash | agent-browser install to reinstall Chromium |
| Page 404 | Check route exists, dev server running |
| Timeout | Page slow loading, wait longer |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?