mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-21 02:26:31 +03:00
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:
co-authored by
Claude Opus 4.6
parent
740f2a1975
commit
3edb1bbe40
+6
-1
@@ -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));
|
||||||
|
|||||||
Generated
+3819
File diff suppressed because it is too large
Load Diff
+1
-6
@@ -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": [
|
||||||
|
|||||||
@@ -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.
|
||||||
|
|||||||
Reference in New Issue
Block a user