mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
Paul BakausandClaude Opus 4.7
81f880d030
Adds a full annotation pipeline to /impeccable live. On Go, the browser
captures the selected element as a PNG (with annotations composed in),
uploads it to the live helper, and sends the generate event with the
screenshot path so the agent reads user intent visually instead of from
HTML alone.
Annotation tools (while an element is picked):
- Click inside the outline to drop a magenta comment pin with a text input
- Drag to paint a magenta SVG stroke (5 px click-vs-drag threshold)
- Click a pin to edit; double-click to delete; drag a pin to reposition
- Click a stroke to delete it (wider invisible hit path)
- Clear chip top-right wipes everything; hidden when no annotations
Capture pipeline:
- modern-screenshot vendored as an IIFE (scripts/modern-screenshot.umd.js)
and lazy-loaded from the live helper
- Font fix: cross-origin @font-face rules are fetched and fonts are inlined
as base64 data URIs before being handed to modern-screenshot via
font.cssText, since SVGs rasterized via canvas can't fetch external
resources (fix for "Impeccable" rendering bold-serif and items wrapping
wrong in the capture)
- Annotations are temporarily attached to the live element (not only the
clone) so computed styles resolve during the embed pass
- Session screenshots live in .impeccable-live/annotations/session-*/ in
the project root (gitignored) so the agent's Read tool doesn't trip a
per-path permission prompt
Loading shader (activates during GENERATING):
- WebGL overlay rendering the captured PNG as a halftone — cells with
luma-driven dot radius, rendered on paper-cream underneath a magenta
roller that sweeps top-to-bottom with a 3.4s cycle and clean overshoot
- Fixed asymmetric bandAt() using one-sided smoothsteps (previous reversed
smoothstep was undefined on d>0, giving "trail=1 everywhere below")
- Graceful <img> fallback when WebGL is unavailable; prefers-reduced-motion
freezes the band at t=0
Server:
- POST /annotation endpoint (raw image/png body, token + eventId query),
session-scoped tmpdir cleaned up on shutdown
- GET /modern-screenshot.js serves the vendored UMD with aggressive caching
- Optional screenshotPath / comments / strokes fields on generate events
- Fixed pre-existing /source crash on ENOENT (writeHead called twice)
Agent side:
- reference/live.md step 0 tells the agent to Read the screenshot first,
with four rules for interpreting annotations: comments are position-
anchored and scoped to the sub-element under their {x,y}; strokes are
gestures (loop=focus, arrow=direction, cross=delete); comments and
strokes are independent unless adjacent; don't silently guess on
ambiguous strokes
Also:
- Generating bar no longer claims "Generating 1 of 3..." (variants arrive
atomically) — now says "Generating N variants..."
- tests/live-server.test.mjs fixed to read the PID file from project root,
matching the server; adds coverage for the new endpoints and validator
fields
- .impeccable-live/ added to .gitignore
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
79 lines
2.3 KiB
JSON
79 lines
2.3 KiB
JSON
{
|
|
"name": "impeccable",
|
|
"version": "2.1.7",
|
|
"author": "Paul Bakaus",
|
|
"description": "Design skills, commands, and anti-pattern detection for AI coding agents",
|
|
"keywords": [
|
|
"design",
|
|
"frontend",
|
|
"ux",
|
|
"skills",
|
|
"ai",
|
|
"anti-patterns",
|
|
"lint",
|
|
"accessibility",
|
|
"css",
|
|
"html",
|
|
"detection",
|
|
"ci-cd"
|
|
],
|
|
"license": "Apache-2.0",
|
|
"homepage": "https://impeccable.style",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "git+https://github.com/pbakaus/impeccable.git"
|
|
},
|
|
"engines": {
|
|
"node": ">=18"
|
|
},
|
|
"type": "module",
|
|
"bin": {
|
|
"impeccable": "bin/cli.js"
|
|
},
|
|
"main": "./src/detect-antipatterns.mjs",
|
|
"exports": {
|
|
".": "./src/detect-antipatterns.mjs",
|
|
"./browser": "./src/detect-antipatterns-browser.js"
|
|
},
|
|
"files": [
|
|
"bin/",
|
|
"src/",
|
|
"LICENSE"
|
|
],
|
|
"scripts": {
|
|
"build": "bun run scripts/build.js",
|
|
"build:browser": "node scripts/build-browser-detector.js",
|
|
"build:extension": "node scripts/build-extension.js",
|
|
"clean": "rm -rf dist build",
|
|
"rebuild": "bun run clean && bun run build",
|
|
"dev": "bun run server/index.js",
|
|
"preview": "bun run build && wrangler pages dev",
|
|
"deploy": "bun run build && wrangler pages deploy build/",
|
|
"test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-server.test.mjs",
|
|
"prepack": "cp README.md README.repo.md && cp README.npm.md README.md",
|
|
"postpack": "cp README.repo.md README.md && rm README.repo.md",
|
|
"screenshot": "bun run scripts/screenshot-antipatterns.js",
|
|
"og-image": "bun run scripts/generate-og-image.js"
|
|
},
|
|
"dependencies": {
|
|
"jsdom": "^29.0.0",
|
|
"marked": "^16.1.0"
|
|
},
|
|
"optionalDependencies": {
|
|
"puppeteer": "^24.39.1"
|
|
},
|
|
"devDependencies": {
|
|
"@ai-sdk/anthropic": "^3.0.69",
|
|
"@ai-sdk/openai": "^3.0.53",
|
|
"@anthropic-ai/claude-agent-sdk": "^0.2.110",
|
|
"@google/genai": "^1.50.1",
|
|
"ai": "^6.0.162",
|
|
"archiver": "^7.0.1",
|
|
"modern-screenshot": "^4.7.0",
|
|
"motion": "^12.38.0",
|
|
"playwright": "^1.58.2",
|
|
"wrangler": "^4.75.0",
|
|
"zod": "^4.3.6"
|
|
}
|
|
}
|