Delegate detection to @impeccable/detect package, add live command

Replace local detection engine dependency with @impeccable/detect (BSL-1.1
licensed, github:pbakaus/impeccable-detect). The main CLI now delegates
both `detect` and `live` commands to the external package.

Update critique skill to use `npx @impeccable/detect live` instead of
python3 http.server for serving the browser detection overlay.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-03 16:17:08 -07:00
co-authored by Claude Opus 4.6
parent 740f2a1975
commit 3edb1bbe40
4 changed files with 3838 additions and 18 deletions
+6 -1
View File
@@ -22,6 +22,7 @@ if (!command || command === '--help' || command === '-h') {
Commands: Commands:
detect [file-or-dir-or-url...] Scan for UI anti-patterns and design quality issues detect [file-or-dir-or-url...] Scan for UI anti-patterns and design quality issues
live [--port=PORT] Start browser detection overlay server
skills help List all available skills and commands skills help List all available skills and commands
skills install Install impeccable skills into your project skills install Install impeccable skills into your project
skills update Update skills to the latest version skills update Update skills to the latest version
@@ -42,8 +43,12 @@ if (command === '--version' || command === '-v') {
if (command === 'detect') { if (command === 'detect') {
process.argv = [process.argv[0], process.argv[1], ...args.slice(1)]; process.argv = [process.argv[0], process.argv[1], ...args.slice(1)];
const { detectCli } = await import('../source/skills/critique/scripts/detect-antipatterns.mjs'); const { detectCli } = await import('@impeccable/detect');
await detectCli(); await detectCli();
} else if (command === 'live') {
process.argv = [process.argv[0], process.argv[1], ...args.slice(1)];
const { liveCli } = await import('@impeccable/detect');
await liveCli();
} else if (command === 'skills') { } else if (command === 'skills') {
const { run } = await import('./commands/skills.mjs'); const { run } = await import('./commands/skills.mjs');
await run(args.slice(1)); await run(args.slice(1));
+3819
View File
File diff suppressed because it is too large Load Diff
+1 -6
View File
@@ -7,16 +7,11 @@
}, },
"files": [ "files": [
"bin/", "bin/",
"source/skills/critique/scripts/detect-antipatterns.mjs",
"source/skills/critique/scripts/detect-antipatterns-browser.js",
"lib/download-providers.js", "lib/download-providers.js",
"LICENSE" "LICENSE"
], ],
"dependencies": { "dependencies": {
"jsdom": "^29.0.0" "@impeccable/detect": "github:pbakaus/impeccable-detect"
},
"optionalDependencies": {
"puppeteer": "^24.39.1"
}, },
"description": "Detect UI anti-patterns and design quality issues from the command line", "description": "Detect UI anti-patterns and design quality issues from the command line",
"keywords": [ "keywords": [
+12 -11
View File
@@ -4,10 +4,10 @@ description: "Evaluate design from a UX perspective, assessing visual hierarchy,
argument-hint: "[area (feature, page, component...)]" argument-hint: "[area (feature, page, component...)]"
user-invocable: true user-invocable: true
allowed-tools: allowed-tools:
- Bash(python3 -m http.server 8384 *) - Bash(npx @impeccable/detect *)
- Bash(kill $(lsof -ti:8384)*) - Bash(npx impeccable detect *)
- Bash(lsof -ti:8384*) - Bash(kill $(lsof -ti:*)*)
- Bash(node *detect-antipatterns*) - Bash(lsof -ti:*)
--- ---
## STEPS ## STEPS
@@ -59,7 +59,7 @@ Run the bundled deterministic detector, which flags 25 specific patterns (AI slo
**CLI scan**: **CLI scan**:
```bash ```bash
node {{scripts_path}}/detect-antipatterns.mjs --json [--fast] [target] npx @impeccable/detect --json [--fast] [target]
``` ```
- Pass HTML/JSX/TSX/Vue/Svelte files or directories as `[target]` (anything with markup). Do not pass CSS-only files. - Pass HTML/JSX/TSX/Vue/Svelte files or directories as `[target]` (anything with markup). Do not pass CSS-only files.
@@ -72,25 +72,26 @@ node {{scripts_path}}/detect-antipatterns.mjs --json [--fast] [target]
The overlay is a **visual aid for the user** -- it highlights issues directly in their browser. Do NOT scroll through the page to screenshot overlays. Instead, read the console output to get the results programmatically. The overlay is a **visual aid for the user** -- it highlights issues directly in their browser. Do NOT scroll through the page to screenshot overlays. Instead, read the console output to get the results programmatically.
1. **Serve the script**: 1. **Start the live detection server**:
```bash ```bash
python3 -m http.server 8384 -d {{scripts_path}}/ & npx @impeccable/detect live &
``` ```
Note the port printed to stdout (auto-assigned). Use `--port=PORT` to fix it.
2. **Create a new tab** and navigate to the page (use dev server URL for local files, or direct URL) -- do not reuse existing tabs 2. **Create a new tab** and navigate to the page (use dev server URL for local files, or direct URL) -- do not reuse existing tabs
3. **Label the tab** via `javascript_tool` so the user can distinguish it: 3. **Label the tab** via `javascript_tool` so the user can distinguish it:
```javascript ```javascript
document.title = '[Human] ' + document.title; document.title = '[Human] ' + document.title;
``` ```
4. **Scroll to top** -- ensure the page is scrolled to the very top before injection 4. **Scroll to top** -- ensure the page is scrolled to the very top before injection
5. **Inject** via `javascript_tool`: 5. **Inject** via `javascript_tool` (replace PORT with the port from step 1):
```javascript ```javascript
const s = document.createElement('script'); s.src = 'http://localhost:8384/detect-antipatterns-browser.js'; document.head.appendChild(s); const s = document.createElement('script'); s.src = 'http://localhost:PORT/detect.js'; document.head.appendChild(s);
``` ```
6. Wait 2--3 seconds for the detector to render overlays 6. Wait 2--3 seconds for the detector to render overlays
7. **Read results from console** using `read_console_messages` with pattern `impeccable` -- the detector logs all findings with the `[impeccable]` prefix. Do NOT scroll through the page to take screenshots of the overlays. 7. **Read results from console** using `read_console_messages` with pattern `impeccable` -- the detector logs all findings with the `[impeccable]` prefix. Do NOT scroll through the page to take screenshots of the overlays.
8. **Cleanup**: Kill the HTTP server when done: 8. **Cleanup**: Kill the live server when done:
```bash ```bash
kill $(lsof -ti:8384) 2>/dev/null; echo "done" kill $(lsof -ti:PORT) 2>/dev/null; echo "done"
``` ```
For multi-view targets, inject on 3--5 representative pages. If injection fails, continue with CLI results only. For multi-view targets, inject on 3--5 representative pages. If injection fails, continue with CLI results only.