claudewatch
Advanced tools
Automated validation and self-healing system for Claude Code projects. ClaudeWatch automatically validates your web applications for visual elements, accessibility, performance, and more—then intelligently fixes common issues.
Tell Claude to install ClaudeWatch:
npm install -g claudewatch
claudewatch claude-setup
ClaudeWatch will now automatically validate your work whenever Claude completes a task.
# Install globally
npm install -g claudewatch
# Initialize in your project
cd your-project
claudewatch init
# Visual analysis is enabled by default
# Start your dev server, then run validation
npm start
claudewatch validate
ClaudeWatch provides comprehensive visual validation:
| Command | Description |
|---|---|
claudewatch claude-setup | Quick setup optimized for Claude Code |
claudewatch init | Initialize ClaudeWatch in your project |
claudewatch validate | Run validation tests |
claudewatch self-heal | Run validation with automatic fixes |
claudewatch status | Show system status and configuration |
claudewatch report | View validation history and reports |
claudewatch config | Open configuration file in editor |
claudewatch cleanup | Clean up old logs and screenshots |
ClaudeWatch provides comprehensive visual validation by combining screenshot analysis with DOM inspection:
ClaudeWatch can automatically fix:
your-project/
├── .claudewatch/
│ ├── config.js # Validation configuration
│ ├── validator.js # Main validation script
│ └── self-healer.js # Self-healing script
├── .claude/
│ └── settings.json # Claude Code hook configuration
├── validation-logs/ # Detailed JSON reports
├── validation-screenshots/ # Screenshots from all viewports
└── CLAUDE.md # Instructions for Claude
Edit .claudewatch/config.js to customize validation:
module.exports = {
baseUrl: 'http://localhost:3000',
pages: [
{
path: '/',
name: 'homepage',
validations: ['h1', 'nav', '.hero-section'],
forms: [{
selector: '.contact-form',
submitButton: 'button[type="submit"]',
testInvalidData: {
field: 'input[name="email"]',
value: 'invalid-email'
},
errorSelector: '.error-message'
}],
apis: [
{ url: '/api/health' },
{ url: '/api/user/profile' }
]
}
],
validationTypes: {
visual: true,
accessibility: true,
performance: true,
forms: true,
api: true,
console: true,
links: true
}
};
When you install ClaudeWatch with claude-setup, it automatically:
CLAUDE.md with guidance for ClaudeUser: "Add a contact form to the homepage"
Claude: I'll add a contact form to your homepage.
[Claude implements the form]
Auto-validation triggers via hook
Self-healing fixes any issues found
Report generated with screenshots
Summary sent to Claude
Claude: "Contact form added and validated! ClaudeWatch confirmed:
- Form elements present
- Validation working
- Accessibility compliant
- Mobile responsive"
validation-logs/)validation-screenshots/)Add your own validation logic:
// In .claudewatch/config.js
pages: [{
path: '/dashboard',
name: 'dashboard',
customValidations: async (page) => {
// Custom validation logic
const userCount = await page.textContent('.user-count');
return parseInt(userCount) > 0;
}
}]
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? 'https://myapp.com'
: 'http://localhost:3000',
// ...
};
# .github/workflows/validate.yml
- name: Run ClaudeWatch Validation
run: |
npm start &
sleep 5
claudewatch validate
kill %1
MIT License - see LICENSE file.
Built for the Claude Code community to enable automated, intelligent validation of web applications.
Made by PolarOrchid for Claude Code developers
© 2025 PolarOrchid - PolarOrchid.com
FAQs
Automated validation and self-healing system for Claude Code projects
The npm package claudewatch receives a total of 5 weekly downloads. As such, claudewatch popularity was classified as not popular.
We found that claudewatch demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.