ConsolePatrol Skill\r

\r

Name\r

\r console-patrol\r \r

Description\r

\r AI-First Console Error & Warning Detector for Web Applications. Automatically scans web pages to detect console errors and warnings, with framework-specific rules for Ant Design, React, and Element UI.\r \r

When to Use\r

\r Use this skill when the user asks to:\r

• "Check for console errors"\r
• "Scan pages for warnings"\r
• "Audit a web app"\r
• "Find issues in the application"\r
• "Debug console output"\r
• Fixing React/antd/Element UI warnings\r \r

Prerequisites\r

\r The skill uses console-patrol package:\r \r

pip install console-patrol\r
playwright install chromium\r
```\r
\r
## Core Workflow\r
\r
### 1. Quick Scan (Recommended)\r
\r
```python\r
from console_patrol import ConsolePatrol\r
\r
patrol = ConsolePatrol()\r
result = patrol.scan(\r
    url="http://localhost:3000",\r
    routes=[\r
        "http://localhost:3000/",\r
        "http://localhost:3000/dashboard",\r
        "http://localhost:3000/settings",\r
    ],\r
    wait_time=2.0,\r
)\r
\r
print(f"Issues found: {result.report.total_issues}")\r
for issue in result.issues:\r
    print(f"[{issue.severity.value}] {issue.rule_id}")\r
    print(f"  Fix: {issue.suggestion}")\r
```\r
\r
### 2. Auto-Discover Routes\r
\r
```python\r
from console_patrol import ConsolePatrol\r
\r
patrol = ConsolePatrol()\r
result = patrol.scan(\r
    url="http://localhost:3000",\r
    router_type="react",\r
    base_path="/admin",\r
    auto_discover=True,  # Auto-discover common routes\r
)\r
```\r
\r
### 3. With Framework Auto-Detection\r
\r
```python\r
result = patrol.scan(\r
    url="http://localhost:3000",\r
    routes=["http://localhost:3000/"],\r
    detect_framework=True,  # Auto-detect UI framework\r
)\r
print(f"Detected: {result.framework_info.ui_framework}")\r
```\r
\r
### 4. CLI Usage\r
\r
```bash\r
# Scan with auto-discovery\r
console-patrol scan http://localhost:3000 --router-type react --auto-discover\r
\r
# Scan specific routes\r
console-patrol scan http://localhost:3000 --routes "/,/dashboard,/about"\r
\r
# With screenshots on errors\r
console-patrol scan http://localhost:3000 --screenshot\r
\r
# Output formats\r
console-patrol scan http://localhost:3000 --format markdown\r
```\r
\r
## Detection Rules\r
\r
### Severity Levels\r
\r
| Level | Meaning | Exit Code |\r
|-------|---------|-----------|\r
| P0 | Fatal (crashes, JS exceptions) | 2 |\r
| P1 | Warning (framework issues) | 1 |\r
| P2 | Hint (code smell) | 0 |\r
\r
### Built-in Rules\r
\r
#### Ant Design\r
- `antd-useForm-unhooked` (P1): `form.getFieldValue()` called outside Form\r
- `antd-modal-context` (P1): Static modal in React 18\r
- `antd-tree-missing-keys` (P1): Tree wildcard keys\r
- `antd-table-duplicate-key` (P0): Duplicate key in Table\r
\r
#### React\r
- `react-uncaught-error` (P0): Uncaught JS exception\r
- `react-chunk-load-error` (P0): Module load failure\r
- `react-hooks-rules` (P1): Hooks violation\r
- `react-list-missing-key` (P2): Missing key prop\r
\r
## Response Format\r
\r
When issues are found, respond with:\r
\r
```\r
## ConsolePatrol Scan Results\r
\r
**Pages Scanned:** N\r
**Total Issues:** N\r
\r
| Severity | Count |\r
|----------|-------|\r
| P0 (Fatal) | N |\r
| P1 (Warning) | N |\r
| P2 (Hint) | N |\r
\r
### Issues\r
\r
**[P0] react-uncaught-error**\r
- Message: Error description\r
- Location: page URL\r
- Fix: Suggestion\r
\r
**[P1] antd-useForm-unhooked**\r
- Message: Error description\r
- Location: page URL\r
- Fix: Use state instead of form.getFieldValue() in render\r
```\r
\r
## Important Notes\r
\r
1. **Wait Time**: Default 2s after page load. Increase for SPAs with lazy loading.\r
2. **Screenshots**: Use `--screenshot` flag to capture error screenshots.\r
3. **Frameworks**: Pass `--frameworks antd,react` to limit rule scope.\r
4. **Exit Codes**: Use in CI/CD: `if [ $? -gt 0 ]; then echo "Issues found"; fi`\r
\r
## Installation for Agent\r
\r
If `console-patrol` is not installed:\r
\r
```python\r
import subprocess\r
subprocess.run(["pip", "install", "console-patrol"], check=True)\r
subprocess.run(["playwright", "install", "chromium"], check=True)\r
```\r
\r
## Edge Cases\r
\r
- **Page not loading**: Timeout is 30s by default. Check if dev server is running.\r
- **No issues found**: Report success, no action needed.\r
- **P0 issues**: Always highlight as critical, suggest immediate fix.\r
- **Framework not detected**: Use default rules (antd, react, element).\r