使用此技能在部署、合并或依赖升级后监控已部署的URL是否存在回归问题。
npx skills add https://github.com/affaan-m/ECC --skill canary-watchانسخ والصق هذا الأمر في Claude Code لتثبيت المهارة
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.
Agent-driven scheduling and publishing of social media posts across 13 platforms via SocialClaw. Use when the user wants to publish to X, LinkedIn, Instagram, Facebook Pages, TikTok, Discord, Telegram, YouTube, Reddit, WordPress, or Pinterest — or when managing campaigns, uploading media, or monitoring post delivery status.
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches.
Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.
| name | canary-watch |
| description | 使用此技能在部署、合并或依赖升级后监控已部署的URL是否存在回归问题。 |
| origin | ECC |
监控已部署 URL 是否存在回归问题。循环运行，直至手动停止或监控窗口过期。
1. HTTP 状态 — 页面是否返回 200？
2. 控制台错误 — 是否出现之前没有的新错误？
3. 网络故障 — 是否存在失败的 API 调用、5xx 响应？
4. 性能 — LCP/CLS/INP 与基线相比是否有退化？
5. 内容 — 关键元素是否消失？（h1、导航、页脚、CTA）
6. API 健康 — 关键端点是否在 SLA 内响应？
快速检查（默认）：单次执行，报告结果
/canary-watch https://myapp.com
持续监控：每 N 分钟检查一次，持续 M 小时
/canary-watch https://myapp.com --interval 5m --duration 2h
差异模式：对比预发布环境与生产环境
/canary-watch --compare https://staging.myapp.com https://myapp.com
critical: # immediate alert
- HTTP status != 200
- Console error count > 5 (new errors only)
- LCP > 4s
- API endpoint returns 5xx
warning: # flag in report
- LCP increased > 500ms from baseline
- CLS > 0.1
- New console warnings
- Response time > 2x baseline
info: # log only
- Minor performance variance
- New network requests (third-party scripts added?)
当超过关键阈值时：
~/.claude/canary-watch.log## Canary 报告 — myapp.com — 2026-03-23 03:15 PST
### 状态：健康 ✓
| 检查项 | 结果 | 基线 | 偏差 |
|-------|--------|----------|-------|
| HTTP | 200 ✓ | 200 | — |
| 控制台错误 | 0 ✓ | 0 | — |
| LCP | 1.8s ✓ | 1.6s | +200ms |
| CLS | 0.01 ✓ | 0.01 | — |
| API /health | 145ms ✓ | 120ms | +25ms |
### 未检测到回归问题。部署状态良好。
配合使用：
/browser-qa 进行部署前验证git push 上添加 PostToolUse 钩子，部署后自动检查