canary-watch — ai-agents canary-watch, everything-claude-code, official, ai-agents, ide skills, anthropic, claude-code, developer-tools, Claude Code, Cursor, Windsurf

Verified
v1.0.0
GitHub

About this Skill

Perfect for Monitoring Agents needing automated regression detection and performance analysis. Use this skill to monitor a deployed URL for regressions after deploys, merges, or dependency upgrades.

# Core Topics

affaan-m affaan-m
[116.8k]
[15188]
Updated: 3/30/2026

Agent Capability Analysis

The canary-watch skill by affaan-m is an open-source official AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for ai-agents, anthropic, claude-code.

Ideal Agent Persona

Perfect for Monitoring Agents needing automated regression detection and performance analysis.

Core Value

Empowers agents to monitor deployed URLs for regressions, tracking HTTP status, console errors, network failures, performance, and content changes, with customizable alert thresholds and notifications via Slack, Discord, or desktop notifications.

Capabilities Granted for canary-watch

Automating post-deploy monitoring for production and staging environments
Debugging regressions after merging risky PRs or dependency upgrades
Verifying fixes and monitoring launch windows for critical applications

! Prerequisites & Limits

  • Requires a deployed URL to monitor
  • Limited to HTTP-based applications
  • Needs configuration for alert thresholds and notification settings
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

canary-watch

Install canary-watch, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Canary Watch — Post-Deploy Monitoring

When to Use

  • After deploying to production or staging
  • After merging a risky PR
  • When you want to verify a fix actually fixed it
  • Continuous monitoring during a launch window
  • After dependency upgrades

How It Works

Monitors a deployed URL for regressions. Runs in a loop until stopped or until the watch window expires.

What It Watches

1. HTTP Status — is the page returning 200?
2. Console Errors — new errors that weren't there before?
3. Network Failures — failed API calls, 5xx responses?
4. Performance — LCP/CLS/INP regression vs baseline?
5. Content — did key elements disappear? (h1, nav, footer, CTA)
6. API Health — are critical endpoints responding within SLA?

Watch Modes

Quick check (default): single pass, report results

/canary-watch https://myapp.com

Sustained watch: check every N minutes for M hours

/canary-watch https://myapp.com --interval 5m --duration 2h

Diff mode: compare staging vs production

/canary-watch --compare https://staging.myapp.com https://myapp.com

Alert Thresholds

yaml
1critical: # immediate alert 2 - HTTP status != 200 3 - Console error count > 5 (new errors only) 4 - LCP > 4s 5 - API endpoint returns 5xx 6 7warning: # flag in report 8 - LCP increased > 500ms from baseline 9 - CLS > 0.1 10 - New console warnings 11 - Response time > 2x baseline 12 13info: # log only 14 - Minor performance variance 15 - New network requests (third-party scripts added?)

Notifications

When a critical threshold is crossed:

  • Desktop notification (macOS/Linux)
  • Optional: Slack/Discord webhook
  • Log to ~/.claude/canary-watch.log

Output

markdown
1## Canary Report — myapp.com — 2026-03-23 03:15 PST 2 3### Status: HEALTHY ✓ 4 5| Check | Result | Baseline | Delta | 6|-------|--------|----------|-------| 7| HTTP | 200 ✓ | 200 || 8| Console errors | 0 ✓ | 0 || 9| LCP | 1.8s ✓ | 1.6s | +200ms | 10| CLS | 0.01 ✓ | 0.01 || 11| API /health | 145ms ✓ | 120ms | +25ms | 12 13### No regressions detected. Deploy is clean.

Integration

Pair with:

  • /browser-qa for pre-deploy verification
  • Hooks: add as a PostToolUse hook on git push to auto-check after deploys
  • CI: run in GitHub Actions after deploy step

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is canary-watch?

Perfect for Monitoring Agents needing automated regression detection and performance analysis. Use this skill to monitor a deployed URL for regressions after deploys, merges, or dependency upgrades.

How do I install canary-watch?

Run the command: npx killer-skills add affaan-m/everything-claude-code/canary-watch. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for canary-watch?

Key use cases include: Automating post-deploy monitoring for production and staging environments, Debugging regressions after merging risky PRs or dependency upgrades, Verifying fixes and monitoring launch windows for critical applications.

Which IDEs are compatible with canary-watch?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for canary-watch?

Requires a deployed URL to monitor. Limited to HTTP-based applications. Needs configuration for alert thresholds and notification settings.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add affaan-m/everything-claude-code/canary-watch. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use canary-watch immediately in the current project.

Related Skills

Looking for an alternative to canary-watch or another official skill for your workflow? Explore these related open-source skills.

View All

flags

Logo of facebook
facebook

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.

243.6k
0
Developer

extract-errors

Logo of facebook
facebook

Use when adding new error messages to React, or seeing unknown error code warnings.

243.6k
0
Developer

fix

Logo of facebook
facebook

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

243.6k
0
Developer

flow

Logo of facebook
facebook

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

243.6k
0
Developer