mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
e3ad2eff2509a67e19f6fbc474a4322cec8a1cd9
91
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
  Paul BakausandClaude Opus 4.7
|
a8b032d362 |
skill: drop quality tiers, keep the real brand-craft guardrails
Codex's craft/brand pass introduced fast/ship/showpiece "quality bars" plus brand-specific build gates, asset ledgers, sub-agent review, and self-graded fallback labels. In practice those tiers became escape hatches rather than craft pressure: the final output should always be 10/10, and the real decision points are splashiness and maximalism, not quality. Removed: - All quality-bar / showpiece / fast / ship framing in shape.md and craft.md - Standalone Brand Direction (#4) and Asset Requirements (#10) sections in shape's brief; renumbered back to 1-10 - The Brand hard rules section in brand.md (folded its real prohibitions into the existing Imagery and Brand bans sections) - Brand-specific build-gate item, mock-fidelity bullet, production-bar bullet, present-step bullet in craft.md - Asset ledger ceremony in craft Step 4 - Review-only sub-agents and "self-reviewed fallback, not independently validated" machinery in craft.md and polish.md - The For brand surfaces, assess hard failures subsection in polish.md and the brand checklist row - tests/brand-showpiece-reference.test.mjs (and its package.json wiring) Kept (the real nuggets): - Asset-substitution prohibition: image-led briefs ship real/generated assets or canvas/SVG/WebGL, not generic CSS panels, cards, bullets, or copy - Repeated tiny uppercase tracked kicker labels as a brand ban - Detector/QA output is defect evidence only, never proof of quality - "What visual assets are real content here?" discovery question - Inspect each major section individually for brand and long-form work - repeated-section-kickers detection rule + fixture - CLI improvements (JSON to stdout, -json/-fast aliases, severity field) - critique.md: npx impeccable detect --json fix Harness output dirs refreshed via bun run build. Full test suite (186) passes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
 
|
e587004ee4 |
Refactor: cleaner top-level directory structure (#138)
* refactor(content): merge content/site/ into site/content/ Phase 1 step 1 of the directory restructure. The dual content tree was called out in CLAUDE.md as cleanup; both trees were already in sync except for anti-patterns-catalog.js, which moves to site/data/. - Delete content/site/skills/ and content/site/tutorials/ (duplicates of site/content/, which is what Astro's content collection actually reads). - Move content/site/anti-patterns-catalog.js -> site/data/. - Update scripts/lib/sub-pages-data.js and scripts/build.js to read from site/content/ and site/data/. - Drop content/site/ from validateProse target list (site/content was already there). - Rewrite the "Two content trees" section in CLAUDE.md as a single-tree pointer; update stale dev-server text mentioning the deleted server/index.js. Tests: 186/186 pass. Skills build: clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(skill): rename source/skills/impeccable/ -> skill/ Phase 1 step 2 of the directory restructure. The path was redundantly nested ("source/" wrapper plus "skills/impeccable/" — singular content hidden behind the plural). Collapses to flat skill/SKILL.md + skill/reference/ + skill/scripts/. - Move source/skills/impeccable/ -> skill/. - Rewrite scripts/lib/utils.js readSourceFiles(): drop the multi-skill iteration (CLAUDE.md commits to a single user-invocable skill); read skill/SKILL.md directly. - Update scripts/build.js, scripts/generate-og-image.js, and the sub-pages data layer to point at skill/. - Update tests/lib/utils.test.js: drop the "multi-skill" and "dir-name fallback" cases, update single-skill paths to skill/. - Update tests/build.test.js similarly: drop "multiple skills" integration test, update paths. - Update non-glob path joins in tests/framework-fixtures.test.mjs, tests/live-e2e/session.mjs, tests/live-e2e/agents/llm-agent.mjs, tools/live-loop.mjs. - Update prose/text references in CLAUDE.md, AGENTS.md, DEVELOP.md, README.md, scripts/lib/sub-pages-data.js, bin/commands/skills.mjs, site/data/anti-patterns-catalog.js, site/pages/docs/[...slug].astro, docs/adr-live-variant-mode.md, docs/plans/. Eval framework note: the separate impeccable-evals repo reads ../impeccable/source/skills/impeccable/ and needs a coordinated rename to ../impeccable/skill/. Tests: 186/186 pass. Skills build: clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor: rename docs/ -> notes/ Phase 1 step 3 of the directory restructure. The internal docs/ dir (ADRs and plans) clashed with the site's /docs route. Renaming it "notes/" makes the difference unambiguous: notes/ is project-internal process, /docs is the user-facing route under site/pages/docs/. No code references the dir; the rename is a clean git mv. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(site): move public/ under site/public/ Phase 2 step 4 of the directory restructure. Public assets and the Astro publicDir now live alongside the rest of the site, so site/ is fully self-contained for static content. - git mv public site/public. - astro.config.mjs: add publicDir: './site/public'. Astro defaults to ./public at the project root, so the override is required. - scripts/build.js: write generated _data, _headers, _redirects, _routes.json, and js/detect-antipatterns-browser.js into site/public/. Also delete the dead _REMOVED() Bun static-site builder (replaced by Astro at #130; the placeholder no longer earns its keep). - scripts/build.js validateProse: replace the stale public/index.html reference (deleted at the Astro migration) with site/pages/index.astro in the count-validation file list, restoring homepage drift detection. - scripts/generate-og-image.js: write OG image into site/public/. - scripts/screenshot-antipatterns.js: read examples from + write screenshots to site/public/antipattern-{examples,images}/. - scripts/lib/sub-pages-data.js: load command demos from site/public/js/demos/commands. - .gitignore: rename the public/* generator-output entries to site/public/*. - CLAUDE.md: refresh CSS/data-file paths (still pointing at the old pre-Astro public/css/ + public/js/ tree), point the changelog and command-add checklists at site/pages/index.astro and site/scripts/data.js + site/scripts/components/framework-viz.js. Cloudflare Pages note: functions/ stays at the repo root because CF Pages auto-discovers it there with no configuration knob to relocate. Moving it under site/ would either break deployment or require a build-time copy step that adds more complexity than the cleanup is worth. Tests: 186/186 pass. Skills + site build clean. _headers, _redirects, _routes.json, _data/ all land in build/ correctly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(cli): consolidate bin/ + src/ + lib/ under cli/ Phase 2 step 5 of the directory restructure. The CLI surface was split across three top-level dirs whose names were easy to mistake for each other (especially src/ vs source/ pre-step-2). Consolidates under cli/. - git mv bin -> cli/bin (CLI entry + skills sub-command) - git mv src -> cli/engine (detect-antipatterns engine + browser variant) - git mv lib -> cli/lib (download-providers helper) Update package.json: - bin.impeccable: cli/bin/cli.js - main + exports: cli/engine/detect-antipatterns.mjs and the ./browser variant - files: ["cli/", "LICENSE"] Update internal references: - cli/bin/cli.js: dynamic import points at ../engine/, package.json read goes one level deeper (../../package.json). - functions/api/download/[type]/[provider]/[id].js + bundle/[provider].js: cli/lib/download-providers.js path. - scripts/build.js, scripts/build-browser-detector.js, scripts/build-extension.js: cli/engine path constants. - scripts/lib/sub-pages-data.js, scripts/lib/utils.js, skill/scripts/ live-server.mjs: comment refs. - tests/detect-antipatterns{,-browser,-fixtures}.test.{js,mjs}, tests/windows-path-fix.test.js: import + read paths. - AGENTS.md, CLAUDE.md: doc paths. Verified: - npx node cli/bin/cli.js --version, --help, detect --help all work. - bun run build, bun run build:browser, bun run build:extension all clean. Browser detector lands at cli/engine/detect-antipatterns-browser.js; extension/detector/detect.js still emits to the same location. - bun run test: 186/186 pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: update browser-detector paths missed in cli/ rename Bugbot caught two runtime path leaks where the comment got renamed to cli/engine/ but the actual code still used the old src/ segment. - skill/scripts/live-server.mjs: detectPaths array now joins cli, engine, detect-antipatterns-browser.js for both the repo-relative lookup (4 dirs up from .claude/skills/impeccable/scripts/ to repo root) and the npm node_modules fallback. Without this fix, the detection overlay would silently not load during live-server sessions. - scripts/build.js: the post-build copy of the browser detector into site/public/js/ was reading from src/. The if (fs.existsSync(...)) guard meant the copy was silently skipping, so antipattern-examples pages would 404 on /js/detect-antipatterns-browser.js once the site was deployed. Tests: 186/186 pass. Build clean. site/public/js/detect-antipatterns-browser.js re-emits as expected. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: cleanup-deprecated import path missed an extra .. in cli/ rename Bugbot caught three call sites in cli/bin/commands/skills.mjs that import '../../skill/scripts/cleanup-deprecated.mjs'. Pre-rename, that was correct from bin/commands/ (one parent to bin/, one to repo root). After moving the file from bin/commands/ to cli/bin/commands/, the path is one directory deeper, so it needs three .. segments to reach the repo root. Without the fix, every cleanup invocation throws on import and gets swallowed by the surrounding try/catch — silent skip. cli/bin/cli.js's package.json read already uses '../../package.json' (the same depth pattern), confirming three levels is correct. Verified: dynamic import resolves and exports the expected functions. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore: sweep stale path/file references missed in the restructure Same root cause as the two bugbot finds: some references in moved or related files weren't tracked because they didn't match a simple sed pattern. Caught the rest by walking each moved dir's depth and each Astro-migration deletion. Stale path references (post-Astro migration, missed earlier): - CLAUDE.md: legacy URL redirects "live in server/index.js" -> point at the actual sources (scripts/build.js generateCFConfig + site/public/_redirects). - AGENTS.md: counts.js path (public/ -> site/public/), changelog file (public/index.html -> site/pages/index.astro), screenshots note (public/ -> site/), source-of-truth dirs (source/, src/ -> skill/, cli/). - tests/detect-antipatterns-browser.test.mjs: comment about routes "in server/index.js". - skill/reference/live.md: workflow.css example for "this repo" was pre-Astro (public/css/) -> site/styles/. (User-project Vite/Next example unchanged.) Stale path that pointed at moved files: - tests/skills-cli.test.js: CLI path was '..', 'bin', 'cli.js'; now '..', 'cli', 'bin', 'cli.js'. Test isn't wired into bun run test but it would have failed if invoked. Dead files (orphaned by Astro migration, never cleaned up): - tests/server/download-validation.test.js: imported from ../../server/lib/{validation,api-handlers}.js which were deleted in |
||
|
d874af046a |
feat(live): make live sessions recoverable (#125)
* feat(live): make live sessions recoverable tired of live mode losing the plot when the browser moved faster than the agent. now the state is boring: journal it, resume it, finish it. --- - add durable live-session journal, checkpoint events, and status/resume/complete commands - split browser session storage into a testable helper and harden accept/discard completion - fix Astro live CSS preview mode and add recovery/live E2E coverage - declare Bun as the package manager and add a Bun-native audit script * fix(live): acknowledge fallback recovery states * fix(live): flush recoverable handoffs promptly * fix(live): keep recovery handoffs accurate * fix(live): preserve poll reply metadata * fix(live): treat event HTTP failures as failed sends * fix(live): acknowledge manual completion through helper * Add .impeccable project state paths * Fix live disconnect recovery phase * Refine live CSS authoring contract * Test live CSS authoring guidance * Harden live LLM E2E recovery * Fix live recovery review issues --------- Co-authored-by: Paul Bakaus <paulbakaus@pauls-mbp-3.lan> |
||
|
444e4acad3 |
Detector: add italic-serif display headline + hero eyebrow chip rules (#127) (#129)
* feat(detector): flag italic-serif display heroes and uppercase eyebrow chips (#127) Two new rules covering the structural tells of late-2025/early-2026 AI-generated marketing pages. - italic-serif-display: oversized italic serif (Fraunces, Recoleta, Newsreader, Playfair, Cormorant, Tiempos, ...) as the primary hero headline. Anchored on h1 (or h2 at >= 48px) with font-style: italic and a serif primary face. - hero-eyebrow-chip: uppercase letter-spaced label sitting as the previousElementSibling of a hero h1 (font-size >= 48px). Bounded text length 2-30 chars, letter-spacing >= 1.6px, font-size <= 14px. The pill-chip variant (background + border-radius: 999px) falls out of the same gates for free. Both follow the existing icon-tile-stack pattern: pure check function + browser DOM adapter + jsdom adapter, wired into both element loops. Two-column fixtures (4 flag / 6 pass each) drive the jsdom tests. Skill copy in source/skills/impeccable/reference/typography.md and critique.md calls out the patterns by name. The italic-serif rule's description acknowledges that editorial/magazine register may legitimately want the pattern -- judge by context. Closes #127 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add sandbox gotchas for Codex * Trim verbose detector skill copy --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Paul Bakaus <paulbakaus@pauls-mbp-3.lan> |
||
|
Paul BakausandClaude Opus 4.7
|
64c6df216b |
fix(detector): contrast checks run on styled <a> and <button> (v1.0.3)
SAFE_TAGS skipped <a> and <button> categorically to avoid noise on inline links and unstyled controls. The blanket skip overshot: a pill-style anchor or styled button with its own opaque background was silently exempted from the contrast check, so a "Get started" button with charcoal text on near-black background (~2:1) read as fine to both the CLI and the browser overlay. The bail in checkColors now permits <a> and <button> when they have their own opaque background AND direct text. Inline links and bare controls keep skipping. checkElementColorsDOM no longer short-circuits before reaching checkColors so the exception fires on the browser path. Adds readOwnBackgroundColor() helper to handle jsdom's missing shorthand decomposition; falls back to parsing the inline style attr when getComputedStyle returns empty (real browsers always decompose, so the fallback is a no-op there). Fixture gains four cases: pill-style <a> low-contrast (flag), <button> low-contrast (flag), inline <a> with no own bg (pass), pill-style <a> with high contrast (pass). Three new tests assert the right flags fire and the no-regression cases stay clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
b5c203f38a |
feat(detector): flag Fraunces, Geist, and the new monoculture fonts
Adds Fraunces, Geist (Sans/Mono), Mona Sans, Plus Jakarta Sans, Space Grotesk, Recoleta, and Instrument Sans to OVERUSED_FONTS. Brand-domain exceptions for Geist on vercel.com / nextjs.org / v0.app and Mona Sans on github.com / githubnext.com. Updates four should-pass fixtures that used the now-flagged faces as "good examples"; switches to Newsreader + Karla. Adds positive assertions for Fraunces and Geist. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
 Dan DocaandGitHub
|
c332c7aa91 |
feat(load-context): resolve context dir outside repo root (#119) (#123)
Adds a configurable lookup path for PRODUCT.md / DESIGN.md / DESIGN.json so
they don't have to live at the project root. Resolution order (first match
wins):
1. process.env.IMPECCABLE_CONTEXT_DIR (absolute or relative to cwd)
2. cwd, when canonical or legacy files are at the root (back-compat)
3. Auto-fallback subdirs of cwd: .agents/context/ then docs/
4. cwd as a default "no context found" location
Existing layouts (PRODUCT.md / DESIGN.md at repo root) keep working unchanged
- step 2 preserves the current behaviour. The auto-fallback covers the two
most common conventions seen in the wild (.agents/context/ for AGENTS.md
auto-import setups, docs/ for the request in the issue) without needing any
configuration.
Changes:
- load-context.mjs: export resolveContextDir() and use it inside
loadContext(); add contextDir to the JSON output
- live-server.mjs: import resolveContextDir and read PRODUCT.md /
DESIGN.md / DESIGN.json from the resolved dir instead of process.cwd()
- SKILL.md: short note on the env var and fallback dirs in Setup -> Context
- tests/load-context.test.mjs: 19 cases covering env var, fallbacks,
legacy migration scope, and back-compat
Legacy .impeccable.md -> PRODUCT.md auto-migration stays scoped to cwd root;
fallback dirs are read-only as far as auto-rename is concerned.
Closes #119
|
||
|
|
9a5d0e71a9 |
fix(live): switch live-poll to execFileSync, validate ids strictly (#124)
* fix(live): switch live-poll to execFileSync, validate ids strictly
live-poll.mjs built the live-accept invocation with execSync and string
interpolation of event.id and event.variantId. Both fields originate in
the browser; validateEvent only checked truthiness, so shell metacharacters
in either field would land in the shell-parsed command.
Real exploitability is gated by the per-session token (loopback only,
unguessable UUID), so risk is low. The construction itself is structurally
unsafe though, and the fix is small.
- live-poll.mjs: execSync(string) → execFileSync('node', argv). Drops the
hand-rolled single-quote wrap for --param-values; execFileSync passes
each arg as a discrete argv slot, no shell parsing.
- live-server.mjs validateEvent: tighten id and variantId to match the
actual generator shapes (8 hex chars and 1-3 digit numeric strings).
Defense in depth so any value reaching downstream code is inert by
construction.
- live-server.test.mjs: add three regression tests covering accept/discard
rejection of shell-metachar ids and non-numeric variantIds. Update the
three existing fixture ids to match the new pattern.
Reported in #122.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* chore: refresh pnpm-lock.yaml to match package.json
Cloudflare Pages runs pnpm install --frozen-lockfile and was failing on
ERR_PNPM_OUTDATED_LOCKFILE: the lockfile was missing entries for
@ai-sdk/anthropic, @ai-sdk/openai, @anthropic-ai/claude-agent-sdk,
@anthropic-ai/sdk, @google/genai, ai, modern-screenshot, zod, and had
stale specifiers for jsdom, marked, playwright, wrangler, puppeteer.
Drift was introduced when package.json was last edited without a lockfile
regen. Running pnpm install --lockfile-only resolves it; verified with
pnpm install --frozen-lockfile (clean install succeeds).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Paul Bakaus <paulbakaus@pauls-mbp-3.lan>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
 
|
18fa503d44 |
fix: normalize quoted user-invocable frontmatter (#87)
* fix: normalize quoted user-invokable frontmatter Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai> * fix: preserve quoted non-boolean frontmatter values Only normalize quoted booleans for the user-invocable frontmatter flag so other quoted fields like argument-hint and description continue to round-trip as plain strings. Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai> --------- Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai> |
||
|
Paul BakausandGitHub
|
f67add25e5 |
Merge pull request #120 from vinaypokharkar/feature/qoder-support
feat: add Qoder harness support |
||
|
Paul BakausandClaude Opus 4.7
|
1f760aff61 |
fix(live): expandReplaceRange handles multi-line self-closing JSX <div />
Cursor Bugbot review on
|
||
|
Paul BakausandClaude Opus 4.7
|
8660d3aa22 |
fix(live): wrap shape-of-output bugs from second Bugbot review
Two more Cursor Bugbot findings on commit
|
||
|
Paul BakausandClaude Opus 4.7
|
11dfad81da |
fix(live): CSP-meta patch+revert preserves space before self-closing /
Sanity-check on the live-inject unwrap path turned up a real round-trip
bug on HTML files that ship a `<meta http-equiv="Content-Security-Policy"
content="..." />` tag (the leading space before `/>` is the canonical
self-closing form).
Trace:
- The tag-finder regex (`<meta\s+([^>]*?)\/?>`) captures any whitespace
between the last attribute and the closing `/>` as part of `attrs`.
- patchCspMeta did `attrs.replace(content, newContent) + ' ' + marker`,
appending the marker AFTER that captured trailing whitespace. Result:
`...content="..." data-...="..."` — a double space inside attrs and
the original space-before-slash gone.
- revertCspMeta then strips the marker via `\s*${origAttr.full}`, which
greedily eats both spaces — so the round trip leaves `"/>` with no
space, even though the original was `" />`.
Fix: split off the trailing whitespace from `attrs` before patching,
splice the marker into the attribute body with a single leading space,
and re-append the original trailing whitespace. The marker-removal
regex then consumes exactly one space and the trailing space rides
through unchanged.
Test coverage:
- New `round-trips through CSP-meta patch and revert` test in
live-inject.test.mjs covers the canonical Vite shape (CSP meta with
` />`).
- Plus a `round-trips with insertAfter` test for symmetry — the existing
suite only covered insertBefore.
- Existing 4 round-trip tests (HTML, JSX layout, multi-file, column-0)
all still pass byte-for-byte.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
a701ee613a |
fix(live): wrap preserves relative indent of multi-line picked elements
Companion to the prior outer-indent fix. live-wrap.mjs's
`originalLines.map(l => indent + ' ' + l.trimStart())` calls
`trimStart()` on every line, which strips ALL leading whitespace and
collapses multi-line picked elements to a uniform indent. So a 6/8/6
shape like
<aside className="card">
<h1 className="hero-title">Hero</h1>
</aside>
was being reindented to 10/10/10 inside the wrapper, and on
accept/discard the round-trip restored 6/6/6 — the <h1> ended up at
its parent's depth instead of nested inside it.
Fix: extract `minLeadingSpaces(lines)` and strip only the COMMON
minimum across the picked lines before reindenting under the wrapper.
That mirrors how `deindentContent` on the accept side already works,
so wrap+accept now form a clean round-trip.
Test coverage:
- Expanded the indent regression test in live-accept.test.mjs to
also assert the inner `<h1>` at 8-space indent and the closing
`</aside>` at 6 — proving the relative depth survives wrap and
discard end-to-end.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
99e68370b9 |
fix(live): JSX accept/discard restores at original indent (Bugbot review)
Cursor Bugbot caught this on PR #118 review: > JSX discard/accept restores content with wrong indentation. In the JSX > path, `indent` is captured from `lines[block.start]` — the marker comment > line inside the wrapper div, which is indented 2 extra spaces relative > to the original element. But `expandReplaceRange` expands the replacement > to include the outer `<div data-impeccable-variants>` wrapper, which sits > at the original element's indent level. `deindentContent(original, indent)` > restores content to the marker's deeper indent, so all restored lines end > up 2 spaces deeper than the original element was. I'd actually noticed the symptom during the live testing session ("some odd indentation in card-2 after discard") and dismissed it as cosmetic. Bugbot's analysis matches exactly. Fix: anchor the deindent base on `replaceRange.start` instead of `block.start`. For HTML the two are identical (markers sit outside the wrapper), so HTML is unchanged. For JSX `replaceRange.start` is the outer `<div>` at the original element's indent — correct base. Also dropped a duplicate `expandReplaceRange` call in handleAccept that the earlier edit left orphaned. Test coverage: - Two new regression tests in live-accept.test.mjs: - `discard restores JSX content at the original indent` runs the real wrap CLI and asserts the restored <aside> opener lands at its original 6-space indent (was 8 before the fix). - `accept (no carbonize, raw HTML) restores at the original indent on JSX` exercises the same anchor on the accept path. - Inner-element indent loss inside the wrapped content (`<h1>` ending up at the same indent as its parent `<aside>`) is a separate, pre-existing wrap behavior — left for a follow-up; explicitly noted in the test comments. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
fdb9e7c6f8 |
fix(live): screenshot overlay no longer flashes solid black during loading
Same alpha-string trap pattern as the recent detectPageTheme fix, on a
different code path. resolveCanvasBackground walks parents looking for
an opaque background; on a page that doesn't set its own bg the loop
runs out and fell through to:
return getComputedStyle(document.body).backgroundColor
|| getComputedStyle(document.documentElement).backgroundColor
|| '#ffffff';
`getComputedStyle(body).backgroundColor` for a default-bg page returns
the literal string "rgba(0, 0, 0, 0)" — non-empty, truthy — so the `||`
chain short-circuits to transparent-black instead of falling through to
'#ffffff'. modern-screenshot then composites the capture onto a black
canvas; the WebGL shader overlay flashes solid black until the shader
finishes loading.
Fix: drop the buggy fallback. The while-loop already covered <body> and
<html>; if neither is opaque the only sensible answer is the browser's
default canvas color (white).
Test coverage:
- New tests/live-browser-regression.test.mjs pins the anti-pattern
with a static-source check (live-browser.js is an IIFE with no module
exports, so this is the cheapest reliable regression guard). Also
pins the equivalent guard for detectPageTheme's readOpaque helper
added in the prior commit.
- Wired the new test file into `bun run test`'s explicit list.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
9ec904302b |
fix(live): textContent disambiguation handles missing inter-element whitespace
While driving the new live loop end-to-end against the repeated-aside
fixture, --text disambiguation silently fell back to first-match instead
of landing on the picked card.
Root cause: `el.textContent` concatenates child text nodes without
inserting whitespace, so `<h1>Hero Two</h1><p>Second card body copy.</p>`
reads as "Hero TwoSecond card body copy." — but the source has whitespace
between </h1> and <p>. The single-space normalization on both sides
missed the join boundary; substring comparison failed; filterByText
returned [] and the caller fell through to first-match.
Fix: filterByText now compares both single-space AND no-whitespace
normalizations on each side, accepting the candidate if EITHER matches.
Bumped the minimum-target-length threshold from 6 to 8 to compensate
for the slightly looser comparison.
Plus two doc clarifications surfaced during the same session:
- live.md now warns that variant CSS using bare `:scope { ... }` styles
the variant wrapper div, not the picked element. Always use a
descendant combinator (`:scope > .card`, `:scope .hero-title`, etc.) —
the fake test agent's CSS is the canonical template.
- live.md documents the agent-side abort path. Aborting an in-flight
generate via `live-accept --discard` only mutates source — the browser
bar stays in GENERATING forever. Use `live-poll --reply EVENT_ID error
"msg"` instead so the browser receives the error SSE and resets.
Test coverage:
- New unit test in live-wrap.test.mjs covering the textContent-without-
inter-element-whitespace shape (three identical <aside> branches each
with <h1> + <p>, picks the second by --text).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
54d9f05ea5 |
fix(live): land valid TSX through wrap → preview → accept → carbonize
Closes #114. Three orthogonal bugs that surfaced together when live mode picked an element inside a Vite React/TSX component with sibling branches: 1. JSX wrapper insertion produced invalid TSX - Replacing a single picked JSX child with [comment, <div>, comment] yields three adjacent siblings, which oxc rejects with "Adjacent JSX elements must be wrapped in an enclosing tag." - A Fragment `<></>` solves the adjacency case but breaks `cloneElement`-using parents (Radix `asChild`, Headless UI, etc.) with "Invalid prop supplied to React.Fragment." - Fix: keep the wrapper `<div data-impeccable-variants="ID">` as the single JSX-slot child and tuck both marker comments INSIDE it. accept/discard now expands its replacement range to include the wrapper's `<div>` open/close lines via div-depth tracking. 2. carbonize produced nested template literals in TSX `<style>` - extractCss captured `{` / `` `} `` lines from the agent's existing `<style>{`…`}</style>` template, then handleAccept re-wrapped with another pair, producing `<style>{`{`@scope…`}`}</style>` which oxc rejects with "Expected `}` but found `@`". - Fix: extractCss now strips a leading `{` and trailing `` `} `` wherever they appear in the captured content (own line OR attached to the first/last CSS line), so re-wrapping always yields exactly one `{` ` … ` `}` pair. 3. Ambiguous source matching for repeated JSX branches - `findElement` returned the first substring match. Multiple `<aside className="card">` siblings all matched the same query, so wrap silently landed on the first regardless of which one the user picked. - Fix: live-wrap accepts `--text TEXT` (the picked element's textContent), collects ALL candidates via `findAllElements`, and narrows by a tag-stripped, JSX-expression-stripped substring match. Returns `element_ambiguous + candidates[]` when multiple branches match equally; falls back to first-match when source uses dynamic content (`<h1>{title}</h1>`) so existing flows aren't broken. - The fake e2e agent now forwards `event.element.textContent` to wrap, and live.md tells the agent to do the same. Test coverage: - New `vite8-react-tsx-repeated-aside` e2e fixture: three identical `<aside>` branches, picks the second card's <h1>, runs the full wrap → Go → cycle → accept → carbonize cycle on a real Vite + TSX dev server, asserts that Hero One and Hero Three survive untouched (proving wrap landed on the correct branch). - Six new unit tests across live-wrap.test.mjs and live-accept.test.mjs covering the Fragment-replacement design, both leading/trailing template-literal placements, --text disambiguation, the dynamic- content fallback, and the element_ambiguous error shape. - New `runtime.assertSourceContains` fixture hook so other regression fixtures can assert sibling-branch survivability cheaply. All 186 unit + static-fixture tests pass; all 21 live e2e fixtures (20 prior + new TSX) pass with no console errors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
 VinaywhoandClaude Opus 4.7
|
c812d76b6f |
feat: wire qoder into the download API allowlist
Add qoder to FILE_DOWNLOAD_PROVIDER_CONFIG_DIRS so the download endpoint accepts /api/download/skill/qoder/* and resolves to dist/qoder/.qoder/. Without this, the website install surface returned 400 Invalid provider even though qoder was a first-class harness everywhere else. Cover the new provider with two assertions in download-validation.test.js (allowlist + path resolution). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
630e586b01 |
feat(live): make picker chrome modal-host friendly (Radix, Headless UI, vaul)
Closes #113. Picker chrome could become unclickable inside Radix Dialog portals, and clicking it dismissed the host dialog. Three orthogonal issues surfaced during manual verification: 1. Modal-aware chrome - Add `defangOutsideHandlers` and apply it to bar, picker, params panel, annotation overlay, global bar, and design panel host. - Sets `pointer-events: auto !important` on interactive chrome so Radix's `body { pointer-events: none }` modal scroll-lock can't silence our UI. - Stops `pointerdown` / `mousedown` / `focusin` propagation at the chrome boundary so DismissableLayer / FocusScope outside-handlers never fire for clicks that land on us. 2. detectPageTheme: misread transparent body as black - `getComputedStyle(body).backgroundColor` returns `rgba(0,0,0,0)` when no bg is set; the prior regex captured (0,0,0) and ignored alpha, calling every default-bg page "dark." - Honor alpha, walk body → html, fall back to `prefers-color-scheme` only when both are transparent. 3. Exit X invisible on host pages with `button { padding: ... }` - Every other chrome button sets padding inline; exitBtn didn't. Host resets like `button { padding: 0.5rem 1rem }` (in the new fixture, common in the wild) inflated the 24x24 button into 56x40 and pushed the SVG into a non-rendering region — DevTools showed the right styles, the X just didn't paint. - Pin `padding: 0` + `box-sizing: border-box`, match the toggle icon spec (14 / stroke 1.5 / textDim → text on hover). 4. Toast no longer obscures the global bar - Position the toast above globalBarEl's actual rect instead of a fixed bottom: 16px that overlapped the bar's bottom: 14px. Test coverage: new `vite8-react-radix-dialog` fixture exercises the full pick → Go → cycle → Accept loop with `@radix-ui/react-dialog` + `Portal` + `Overlay` + `Content`. Without the fix, clicking Go dismisses the dialog and unmounts the picked element. All 20 live e2e fixtures pass; all 180 unit tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
 voidborne-dandPaul Bakaus
|
94b315ef63 |
fix: use fileURLToPath for Windows path resolution (#95)
On Windows, `new URL(import.meta.url).pathname` returns `/C:/...` (with a leading slash). Passing that to `path.resolve()` or `path.join()` causes Node to prepend the drive letter again, producing doubled paths like `C:\C:\Users\...\detect-antipatterns-browser.js`. Replace both occurrences (puppeteer scan at ~L2690 and live detect at ~L3506) with `fileURLToPath(import.meta.url)` from `node:url`, which correctly strips the leading slash on Windows while remaining a no-op on POSIX. Add regression tests verifying the source no longer uses the raw `.pathname` accessor for local path construction and that `fileURLToPath` handles both Windows and POSIX file URLs correctly. Closes #95 |
||
|
Paul BakausandClaude Opus 4.7
|
6e96f62803 |
fix(live): readable freeform input on dark bar + tools/live-loop.mjs
The configure row's text input filled its background with translucent
magenta (BP.accentSoft) on focus. Composited against the dark bar surface
this produced a murky purple where the browser's default placeholder
gray washed out — flagged in a real session as "godawful styling, gray
text on dark magenta really hurts my eyes". Fix: focus state shows an
accent-colored border only, no fill; placeholder color is set explicitly
to BP.textDim via a one-shot stylesheet so it reads in both themes.
tests/live-e2e/agent.mjs: runAgentLoop's wrapTarget now accepts either a
static {classes,tag,elementId} (test fixture mode) OR a function that
derives the target from each generate event (real-use mode where the
picked element is unknown ahead of time).
tools/live-loop.mjs: standalone runner that attaches the LLM agent to a
running live-server. Used as a test-harness shortcut for validating live
mode out of band; in production the user's coding agent (Claude Code,
Cursor, etc.) plays this role directly via the live skill spec.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
d26ccac1be |
feat(test): pluggable LLM agent for live-mode E2E suite
tests/live-e2e/agents/llm-agent.mjs: a Claude-backed VariantAgent that
implements the same one-method interface as the fake agent
(generateVariants(event, context) → { scopedCss, variants[] }). Default
model claude-haiku-4-5; override via IMPECCABLE_E2E_LLM_MODEL.
Prompt caching is on — the system prompt (instructions + the live-mode
spec from reference/live.md) is the cacheable prefix. First call writes
~10K tokens to cache; subsequent fixtures pay only the cache-read rate.
JSON output is validated for shape (scopedCss, variants[N].innerHtml),
with light error messages on parse failure.
tests/live-e2e.test.mjs: read IMPECCABLE_E2E_AGENT (fake|llm). When 'llm',
construct the LLM agent and skip the case cleanly if ANTHROPIC_API_KEY is
unset. Param-manifest assertions are gated to fake mode (LLM may emit
zero-param "fixed point" variants per the live.md spec). The accepted-h1
class assertion now allows hero-title as one of multiple classes so an
LLM agent that adds classes alongside the original still passes.
Test timeouts widen for LLM mode: 25s first-pass on conditional-render
fixtures (vs 5s for fake), 60s on direct waits (vs 30s). Without these,
the LLM's 3-8s generate latency races the orchestration's state-loss
recovery window.
tests/live-e2e/ui.mjs: clickGo retries up to 3× on stability failures.
Required because conditional-render fixtures (modal/tabs) animate the bar
mid-transition when preActions trigger framework HMR; a single click can
land during a re-render and Playwright's stability gate times out.
Pass rate on a typical sweep: 18/19 in LLM mode, 19/19 in fake mode.
The modal fixture's intrinsic state-loss flake (Fast Refresh resetting
useState(open) when source changes) is amplified by LLM latency and may
need a re-run; documented in CLAUDE.md.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
c8de59d81e |
test(live): add full-cycle E2E framework-fixture suite with pluggable agent
19 fixtures (11 styling/build variants + 4 conditional-render scenarios + 4 meta-frameworks) drive the entire user flow end-to-end: handshake, pick, configure, Go, cycle, accept, carbonize cleanup. Each fixture installs real deps, boots the framework dev server, and runs Playwright Chromium against a deterministic fake agent that produces realistic variants (colocated style with @scope rules, full data-impeccable-params manifests covering range + steps + toggle, JSX/HTML/Svelte syntax-aware rendering). The agent is pluggable via a one-method interface — generateVariants(event) — so a future LLM-backed agent slots in by implementing the same shape. The orchestrator handles wrap, file write, accept, and carbonize cleanup deterministically regardless of which agent is plugged in. Schema extensions (tests/framework-fixtures/README.md): runtime block adds preActions / reloadProbe / pickSelector / scheme / ignoreHTTPSErrors so fixtures can drive conditional UI (modal, tab, route) before pick and verify the carbonized variant survives a reload. Static fixture suite filtered to skip dirs without fixture.json so empty scaffold dirs no longer break discovery. Total: 178 static checks, 19 E2E full cycles, ~107s wall clock for the E2E suite. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
e1cfba0f25 |
feat(design): align DESIGN.md with Stitch's frontmatter spec
Adopt the Stitch google-labs-code/design.md format's two-layer shape: YAML frontmatter carries machine-readable tokens, prose body covers the six canonical sections. The sidecar DESIGN.json now extends frontmatter rather than duplicating it. - document.md: new frontmatter section, Step 2b staging, sidecar scoped to extensions, Do's/Don'ts now cite PRODUCT.md anti-references by name, OKLCH vs hex presented as project posture not mandate. - design-parser.mjs: tiny YAML-subset reader, exposes model.frontmatter, schemaVersion bumped to 2, prose-scraping fallback intact. - live-browser.js: "basic view" CTA copy reflects frontmatter-first model. - DESIGN.md: add frontmatter with 10 colors, 9 type roles, 7 components; OKLCH values direct per The OKLCH-Only Rule. - tests/design-parser.test.mjs: coverage for no-frontmatter, Stitch-shape, missing-terminator, comment handling. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
99cccc2f9b |
fix(live-inject): preserve indentation on remove, no orphan blank line
The insert path puts the block's opener line right after the anchor's indent (e.g. six spaces plus </body>), which transfers the indent onto the opener line and leaves the anchor unindented in the injected file. The remove path consumed the block's trailing newline but left the pre-block indent behind, producing two bugs in one: Before insert: ` </body>` After remove: ` \n</body>` (orphan indent + unindented anchor) Fix: capture `([ \t]*)` immediately before each marker and replace the whole block (including its trailing newline and any trailing spaces on the ender line) with just the captured indent. The indent now hands itself back to the anchor line that follows — the file round-trips byte-for-byte. New tests/live-inject.test.mjs with four round-trip cases: - HTML file with indented </body> - JSX layout with indented </body> (EAC shape) - Multi-file batch - Column-0 </body> (no indent — already worked; regression baseline) All four pass after the fix. Full suite clean via `bun run test`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
cd8dbff014 |
fix(live-accept): handle JSX self-closing <style />, single-line variants, and same-line style blocks
Three related extraction bugs surfaced in the EAC session all rooted in the line-based state machine: 1. `<style ... />` (JSX self-closing) had no separate `</style>` for the "skip until close" mode to exit on, so the state machine stuck and every `data-impeccable-variant` marker after it got missed. Accept reported `handled: false, error: "Variant N not found"`. 2. A variant whose entire `<div ...>...</div>` sits on one line had its body silently discarded — the marker line was `continue`d past, and the extractor started capturing from the next line, which usually belonged to a different variant or the wrapper close. 3. `extractCss` kept scanning for `</style>` after a self-closing opener, greedily swallowing every subsequent variant div as "CSS". Result: a mangled carbonize block stuffed with HTML and a duplicate variant rendered below. ## Fix Replaced the line-based state machine with a string-based flow: - `stripStyleAndJoin(lines, block)` returns the wrapper text with `<style>` elements fully removed. Handles self-closing, same-line open+close, and multi-line open/close. Markers inside CSS strings (e.g. `@scope ([data-impeccable-variant="1"])`) are gone by the time extraction runs — no false positives. - `extractInnerByAttr(text, attrMatch)` is a balanced-tag matcher that walks the joined text finding `<TAG ...attrMatch...>…</TAG>` with proper depth tracking for nested same-tag elements. Handles single-line, multi-line, and deeply nested variants. - `extractOriginal` and `extractVariant` are thin wrappers over the above. - `extractCss` gets explicit same-line handling: returns null for self-closing (nothing to carbonize), extracts inner content via regex for same-line `<style>…</style>`, falls through to the existing multi-line path otherwise. ## Tests New tests/live-accept.test.mjs with four cases — all failing before, all passing after: - Self-closing `<style />` with dangerouslySetInnerHTML - Single-line `<style>…</style>` - Multi-line `<style>...</style>` (regression baseline) - Discard restores the original element after self-closing style Wired into `bun run test`. Full suite passes. Credit: precise repro + root-cause trace from the other agent in the EAC session. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
a4832adf2f |
fix(live-wrap): JSX/TSX correctness — multi-line tags, className, tag narrowing
Five related bugs that surfaced in a real Next.js App Router project
(EAC) all rooted in live-wrap.mjs treating source as line-anchored HTML:
1. findElement matched on raw substring anywhere, so it landed on a
className continuation line of a multi-line JSX tag whose class
happened to collide with a later target. The wrong tag got wrapped
(really, its attribute line got wrapped, producing broken JSX).
2. findClosingLine's opener regex required whitespace or `>` after the
tag name, so a bare `<section\n className="..."\n>` opener was
unrecognised; it returned `start` silently, capturing only one line.
3. buildSearchQueries only emitted `class="..."`, missing React's
`className="..."`. The full-combo query never fired in JSX, so
search silently degraded to single-class substring matching.
4. Wrapper output used `style="display: contents"` unconditionally,
which is invalid JSX (type error in strict setups, parser hazard
in production transforms).
5. --tag was ignored during the primary class search. Ambiguous class
hits inside the wrong element type weren't filtered out.
## Fixes
- New OPENER_RE `/<([A-Za-z][A-Za-z0-9]*)(?=[\s/>]|$)/` recognises
tag openers at end-of-line too.
- New findOpenerLine(lines, matchLine, tag): walks up to 10 lines
backward to the enclosing opener when the match lands on a
continuation line. Aborts the walk if it hits a different tag.
- findElement now iterates all matches (not just the first), takes
a tag parameter, and routes through findOpenerLine; wrapCli passes
--tag through.
- buildSearchQueries emits both `class="..."` and `className="..."`
for multi-class queries, and both `<tag class="..."` /
`<tag className="..."` for tag+class combos.
- Wrapper builder emits `style={{ display: "contents" }}` when
commentSyntax is JSX and `style="display: contents"` otherwise.
- findClosingLine uses the same OPENER_RE so its tag-name extraction
works on multi-line openers too.
## Tests
Five new regression tests in tests/live-wrap.test.mjs, all failing
before the fix, all passing after:
- wraps the correct <section> when a class collides with a multi-line
tag elsewhere
- emits JSX-safe style attribute ({{ }}) in .tsx files
- finds elements via className= (React) when the exact class combo is
unique there
- respects --tag to reject matches inside the wrong element type
- findClosingLine recognises an opener line where the tag sits at
end-of-line (multi-line JSX)
31/31 in tests/live-wrap.test.mjs and 54/54 in
tests/framework-fixtures.test.mjs pass.
Credit: precise bug report from the other agent in the EAC session
made diagnosis and test design straightforward.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
67e468f84c |
fix(cleanup): authoritative lock signal + fingerprint fallback for orphan dirs
The content heuristic for deciding whether a deprecated skill dir belongs to us returned false for harden and optimize (their v2.x SKILL.md never said "impeccable"), while lock-entry cleanup used the authoritative source field. Result: lock entries purged, dirs orphaned. Layer three signals now: lock source (authoritative), word heuristic, then per-skill description fingerprints for the two stock v2.x skills that predate the self-identification convention. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
05b0ac3e1f |
feat(live): extend CSP detection to SvelteKit and Nuxt
Shape names renamed to describe the patch mechanism (what the agent does) rather than the origin (where the CSP lives). One template now covers multiple frameworks. ## Shape rename - shared-helper → append-arrays - inline-headers → append-string append-arrays applies wherever CSP is a structured directive array. append-string applies wherever CSP is a literal value string. ## New detection coverage - SvelteKit kit.csp.directives in svelte.config.js → append-arrays - Nuxt routeRules / nitro.routeRules CSP header → append-string - Nuxt-security module's contentSecurityPolicy → append-arrays ## New fixtures - sveltekit-csp/: SvelteKit config with kit.csp.directives. Includes expected-after-patch.js showing the array spread. - nuxt-csp/: Nuxt 3 config with routeRules CSP. Includes expected-after-patch.ts showing the string splice. ## Skill docs Single append-arrays template covers Next monorepo, SvelteKit, and Nuxt-security. Single append-string template covers inline Next headers() and Nuxt routeRules. Per-framework specifics listed as sub-bullets under each shape. 54 tests across 9 fixtures, all passing. Clean fixtures (plain vite, nextjs-app, astro, sveltekit, multipage-with-generator) still classify as shape: null. Astro and Vue (non-Nuxt) left unhandled by design: Astro has no first-party CSP mechanism; Vue without Nuxt is covered by the existing Vite fixture. Plain Svelte has no framework CSP primitive and inherits from its bundler (Vite/Rollup). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
d5480caee3 |
feat(live): CSP detection + consent-gated patch flow at first-time setup
Real-world tests (EAC Next turborepo) confirmed that CSP is the common
blocker for live mode. Adds setup-time detection with a one-time user
consent flow — the patch becomes a permanent, dev-guarded entry in the
user's own config, not a transient add/remove.
## Changes
- New detect-csp.mjs helper: grep-based classifier returning
{ shape, signals }. Shape is one of:
- "shared-helper" (monorepo CSP helper with additional*Src arrays)
- "inline-headers" (literal CSP string in headers())
- "middleware" (response.headers.set in middleware.ts; detect-only v1)
- "meta-tag" (<meta http-equiv>; detect-only v1)
- null (no CSP)
Max depth 6, skips node_modules / build / cache dirs, 64KB per file.
- cspChecked boolean on config.json. First-run setup runs detection;
subsequent runs skip. Users re-trigger by deleting the flag.
Validator accepts it.
- Skill live.md gains:
- CSP detection step in first-time setup (gated by cspChecked)
- Consent-prompt template (so every agent phrases it the same way)
- Shape 1 patch template: append `...__impeccableLiveDev` to
additionalScriptSrc/additionalConnectSrc in the app's config
- Shape 2 patch template: two-point edit — declare a dev-only
variable, interpolate into script-src and connect-src in the
CSP literal string
- Troubleshooting note for "said no but now live doesn't work"
## Fixtures
- nextjs-turborepo/: Turborepo shape (shared CSP helper with
additionalScriptSrc options). Sanitized from a real monorepo so the
patch mechanics get tested against realistic layering. Includes
expected-after-patch.ts for human/agent review.
- nextjs-inline-csp/: app-level next.config.js with a literal CSP
string. Includes expected-after-patch.js showing the Shape 2 edit.
## Tests
Framework-fixture harness extended with a detect-csp shape-classification
assertion per fixture. 42 tests across 7 fixtures pass. Clean fixtures
(vite-react, nextjs-app, astro, sveltekit, multipage-with-generator)
correctly return shape: null.
## Deliberately not doing
- No patches[] array, no marker-based rollback, no add/remove lifecycle.
The patch is a permanent dev-guarded config line — the same kind of
edit a user would make themselves.
- No base URL rewriting or proxy mechanism. Script tag still points at
localhost:8400; CSP permits it once patched. No browser-side changes.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.7
|
444f881295 |
fix(test): un-ignore fixture dist/ trees so they actually track
Top-level .gitignore excludes dist/ broadly, which silently dropped the multipage-with-generator fixture's files/dist/*.html from the previous commit. The fixture tests need those files on disk to copy into the tmp repo and assert is-generated behavior — without them, the test suite fails on a fresh clone. Added a negation pattern that re-includes tests/framework-fixtures/**/dist/ paths. The real dist/ output directories elsewhere in the repo remain ignored. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
c9c152f0f0 |
test(live): framework fixture matrix for inject / wrap / is-generated
Five representative project shapes under tests/framework-fixtures/ that stage into fresh tmp git repos and drive the live scripts against each: - vite-react: tracked index.html shell + src/App.jsx - nextjs-app: app/layout.tsx as JSX inject target - astro: src/layouts/Layout.astro - sveltekit: src/app.html shell + src/routes/+page.svelte - multipage-with-generator: src/ tracked, dist/ gitignored (our own repo's shape); exercises the is-generated guard and element_not_in_source fallback Each fixture declares its config, expected source/generated paths, and wrap cases in fixture.json. The harness copies into tmpdir, applies gitignore, commits, then asserts: - inject --port lands the script tag at the correct anchor across all configured files - inject --remove strips it cleanly - is-generated classifies source vs generated paths correctly - wrap routes to the expected source file or emits the expected fallback error Plumbing + bug caught while building out the matrix: - IMPECCABLE_LIVE_CONFIG env var so tests can point live-inject at a fixture-specific config.json without clobbering the harness copy. Backwards-compatible. - live-wrap.mjs no longer hardcodes dist/build in its directory skip list. Only node_modules and .git remain universal skips; the isGeneratedFile check is now the sole guard for generated paths. This lets the includeGenerated second pass find elements in dist/ and report generatedMatch, which is what the multipage-with-generator fixture needs to exercise. Wired into bun run test. 25 tests, 5 suites. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.7
|
81f880d030 |
feat(live): annotation capture, comment pins, drawing, and halftone loading shader
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>
|
||
|
Paul Bakaus
|
66630a0ead |
chore: sync skills, live tooling, and eval ignores
- Ship design-parser and refreshed live scripts/document refs across provider skill trees; align live.mjs and live-poll with source - Update build/skills harness metadata, skills CLI test, and devDependencies (AI SDKs, zod) - Gitignore .codex/ harness artifacts and tests/evals-v2/ Made-with: Cursor |
||
|
Paul BakausandClaude Opus 4.6
|
4092ee5f22 |
Move PID file to project root (.impeccable-live.json)
os.tmpdir() returns /var/folders/.../T/ on macOS, not /tmp/. The skill reference was telling the agent to cat /tmp/impeccable-live.json which didn't exist. Moving the PID file to the project root makes it predictable across platforms and project-scoped (multiple projects can run independent live sessions). Changed in: live-server.mjs, live-poll.mjs, live.md reference. Added .impeccable-live.json to .gitignore. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
455fe39155 |
Add 41 tests for live-wrap and live-server, add auto-execute guards
Tests: - tests/live-wrap.test.mjs (26 tests): unit tests for buildSearchQueries, findElement, findClosingLine, detectCommentSyntax (20 pure function tests) + integration tests for the full wrapCli on HTML and JSX fixtures with temp dirs (6 tests covering wrapping, ID/class lookup, error handling, content preservation). - tests/live-server.test.mjs (15 tests): integration tests that start a real server on port 8499, then test /health, /live.js, /detect.js, /poll (timeout + auth), /events POST (validation + auth), browser→agent event flow (POST event → poll receives it), agent→browser SSE flow (POST reply → SSE stream delivers it), /source (read, path traversal rejection, auth, 404). Also: - Added auto-execute guards to live-wrap.mjs and live-poll.mjs so they work when run directly with `node live-wrap.mjs ...` (needed for both skill instructions and integration tests). - Exported buildSearchQueries, findElement, findClosingLine, detectCommentSyntax from live-wrap.mjs for unit testing. - Updated package.json test script to include the new test files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
2233d82f3a |
Bump skills to 3.0, remove prefixed bundle, redesign install section
- Bump skills plugin version 2.1.1 -> 3.0.0 (plugin.json, marketplace.json, harness SKILL.md files). CLI and Chrome extension unchanged. - Remove prefixed universal zip bundle and all related code: factory.js prefix/outputSuffix options, zip.js variant pass, utils.js prefixSkillReferences, the "universal-prefixed" entry in download-providers.js, and the matching test suite in utils.test.js. - Redesign Get Started step 1 "Install the skill and CLI": two terminal rows (npx skills + npm i -g impeccable) with paired notes, drop the Recommended badge. - Collapse "Other install methods" back into a <details> element so the primary install path is the first thing users see. - Simplify step 3 to "Add the Chrome extension": remove the CLI tool block (now in step 1), use standard .btn .btn-primary for the CTA so it matches other primary buttons (square corners, accent slide-up hover), and lay out the preview screenshot next to the button instead of stacked so the screenshot no longer dominates vertical space. - CLAUDE.md: rewrite with v3.0 architecture, the "no em dash also means no --" rule, the harness-dirs-are-tracked gotcha, the named-export test-spy warning, and the evals inline-skill.ts sync note. - AGENTS.md, DEVELOP.md: drop prefixed variant references. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
b0f44f83c6 |
Consolidate 18 skills into 1 /impeccable skill with 20 commands
Biggest change in a while. Users previously had 18 standalone skill
entries cluttering their /menu; now they have one entry (/impeccable)
that routes to 20 specialized commands via argument dispatch. The pin
mechanism (/impeccable pin audit) restores standalone shortcuts on
demand for commands users hit all the time.
## Architecture
- Single /impeccable skill with command router section in SKILL.md
- 20 commands served via reference files under source/skills/impeccable/reference/
- /impeccable pin <command> creates a lightweight redirect shim so users
who prefer /audit, /polish, etc. can still have them
- Context gathering (teach) auto-runs on first use
- command-metadata.json is the single source of truth for command
descriptions, argument hints, and relationships
## Site rewrite
- Docs URL: /skills renamed to /docs (with /skills permanent redirects)
- Homepage hero frames Impeccable as "one skill with 20 commands"
- "Get Started" split into 50/50 install + how-to-use with editorial
numbered steps, /impeccable shown as the home command with three modes
- New /docs overview: home command hero card + dense category rows
matching the old cheatsheet density, with leads-to/pairs-with/
combines-with relationship metadata served from a shared source
- Cheatsheet merged into /docs, /cheatsheet redirects
- Magazine spread and mobile cards show /impeccable as a stacked
namespace label above the command name at full display size
- Periodic table updated with craft/teach/extract as first-class cells
- Skill detail pages generate from reference files, with an editorial
wrapper per command for tagline + body
- Tutorials and anti-patterns pages updated to use /impeccable <cmd>
## Build system
- Dead code removed (scripts/lib/transformers/shared.js)
- Build log wording fixed ("1 skill" not "1 skills (1 user-invocable)")
- generateApiData fallback branch removed (throws loudly if metadata
missing instead of silently degrading)
- Commands API includes editorial tagline alongside the long description;
UI surfaces prefer tagline for human display, description for auto-
trigger keyword matching
## Gitignore
- Added .claude/scheduled_tasks.lock, .claude/settings.local.json to
ignore list (local Claude Code state that should not be tracked).
- Harness skill directories (.claude/skills/, .agents/skills/, etc.)
remain tracked by design: npx skills reads them from this repo at
install time and they enable clean submodule use.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.6
|
f957fcad20 |
Fix: quote YAML scalars that contain colon-space in frontmatter
generateYamlFrontmatter only re-quoted values starting with `[` or `{`,
but parseFrontmatter strips surrounding quotes on input. Descriptions
containing `: ` (e.g. "Also handles: critique...") round-tripped into
unquoted plain scalars that YAML parsers reject. Added a yamlNeedsQuoting
check covering colon-space, space-hash, YAML indicator chars, reserved
keywords, and number-like strings, plus regression tests.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.6
|
00d485659a |
Fix false positives: bg-black opacity modifiers and background-image contrast
Two detector bugs that produced false positives on sites like uselinkshot.com: 1. The bg-black regex matched Tailwind opacity modifiers (bg-black/3, hover:bg-black/5) because / is a word boundary. Added negative lookahead. 2. resolveBackground ignored url() background-images, walking past them to the body's white bg. White text on a dark hero image was flagged as 1.0:1 white-on-white. Now bails on url() images like it does for gradients. Also: extension build auto-generates dist/extension.zip, version bumps for CLI (2.1.7) and extension (1.0.1). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
f9b50d65be |
Add cleanup script for deprecated skills with 20 tests
Bundled as source/skills/impeccable/scripts/cleanup-deprecated.mjs, runs via the self-deleting <post-update-cleanup> section in the skill. The script: - Finds all harness skill dirs (.claude, .cursor, .agents, etc.) - Deletes deprecated skill directories (arrange, normalize, onboard, extract, frontend-design, teach-impeccable) and i-prefixed variants - Verifies each file contains "impeccable" before deleting to avoid touching unrelated user skills with the same name - Handles both symlinks and regular directories - Removes matching entries from skills-lock.json (only if source is pbakaus/impeccable) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
6e12f215c8 |
Detect side-tab borders built with CSS variables
jsdom's CSSOM silently drops any border shorthand containing var(), leaving the computed style empty — which hid the canonical real-world side-tab pattern (border-left: Npx solid var(--brand)) from the Node detector path. Real browsers resolve var() natively, so this only affected the jsdom path. Add a pre-pass that walks the stylesheets, reads border shorthands off rule.style (jsdom preserves them there even when it drops them from cssText), resolves var() against :root custom properties via the documentElement's computed style, and attaches the result to a per- element override map. checkElementBorders consults the map whenever jsdom returned an empty width, or substitutes a resolved color when jsdom kept a literal var() string. Hex and named colors are normalized to rgb() so isNeutralColor can classify them correctly — without that, --line:#e5e7eb slipped through as non-neutral. Adds four flag cases and three pass cases to modern-color-borders.html covering shorthand, mixed neutral+colored, border-right, card-shaped label, neutral-resolving var, thin var, and uniform all-sides var. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul Bakaus
|
30d1e06a75 |
Detect side-tab borders on modern color formats and label cards
- Fix isNeutralColor to handle oklch, oklab, lch, lab, hsl, and hwb with format-specific chroma/saturation thresholds. jsdom returns these formats literally, so the previous rgb-only regex caused every modern-format border color to be silently treated as neutral and skipped by checkBorders. - Flip the unknown-format fallback from neutral to colored, so unrecognized color strings err on the side of detection. - Introduce a narrower BORDER_SAFE_TAGS set (SAFE_TAGS minus 'label') used only by the border checks. Card-shaped clickable labels with thick colored side borders are now detected, while colors, motion, and nested-card checks continue to skip labels to avoid false positives on real form labels. - Add tests/fixtures/antipatterns/modern-color-borders.html with 8 flag cases (oklch x3, oklab, lch, lab, plus 2 label cards) and 10 pass cases (neutrals across formats, plain inline labels, thin/neutral-bordered labels, colored-on-all-sides). Reproducer (preop-portal demo): side-tab findings rise from 0 to 12. |
||
|
Paul BakausandClaude Opus 4.6
|
06ef4f3c14 |
Handle emoji-only text in contrast and icon-tile detection
Emojis render as multicolor glyphs regardless of CSS \`color\`, so the text color is irrelevant for contrast calculations. The detector was flagging emoji icons as low-contrast whenever the surrounding bg/text colors were close (e.g. an emoji card with text-color set to match the bg). Adds an isEmojiOnlyText() helper that returns true when the direct text consists entirely of emoji characters (and zero-width joiners, variation selectors, skin-tone modifiers, regional indicators), and skips both gray-on-color and low-contrast checks when it's true. Same insight fixes a missed icon-tile-stack detection: many AI- generated cards use \`<div class="card-icon">⚡</div>\` where the tile contains the emoji directly as text, not an <svg>/<i> child. The detector now also recognizes these "inline emoji icon" tiles. Both fixes are TDD'd: new test cases in color.html (two emoji cards with matching text/bg colors) and icon-tile-stack.html (the inline emoji tile pattern). The test suite went from green → red → green across both rules. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
3569085cea |
Make cramped-padding rule asymmetric and proportional to font-size
The old rule used a fixed 8px floor on minPad, which produced false positives on small inline pills (like the homepage's .detection-cmd at 6px vertical / 14px horizontal on 13px font) and false negatives on large text (a 24px heading with 8px padding all around passed the floor but is genuinely too tight for the text size). The new rule uses two independent axis thresholds that scale with font-size: vertical: max(4px, fontSize × 0.3) horizontal: max(8px, fontSize × 0.5) The asymmetry reflects typographic reality: line-height already provides built-in vertical breathing room (the line box is taller than the cap height), so vertical padding can be tighter than horizontal. Both thresholds scale with font-size — bigger text demands proportionally more padding. Behavior changes - Small inline pills with line-height-aware padding now pass (.detection-cmd: V 6 ≥ 4, H 14 ≥ 8). The homepage CSS is unchanged. - Cramped large text now flags (24px heading with 8px padding fails H 8 < 12). The old rule missed this entirely. - All original 8px-floor flag cases still flag — 4px on 14px text is still 4 < 4.2 vertical, 2px is still cramped, etc. - Snippet now indicates which axis failed and the specific threshold for the font-size: "6px vertical padding (need ≥4.8px for 16px text)" instead of the old "6px padding (need >=8px)". Fixture - tests/fixtures/antipatterns/cramped-padding.html is a new comprehensive side-by-side fixture with 8 flag cases and 12 pass cases spanning small pills, cards, code blocks, interactive elements, and big text. Replaces the prior 3-case version. Test - tests/detect-antipatterns-browser.test.mjs asserts exactly 8 cramped-padding findings with detailed comments listing each expected case and which axis fails. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
5bc5ece1ab |
Wire quality rules into the CLI and add Puppeteer fixture tests
The quality detection rules (line-length, cramped-padding, tight-leading, tiny-text, justified-text, all-caps-body, wide-tracking, skipped-heading) were originally added as browser-only and wired only into the overlay loop. The CLI's jsdom path silently skipped all of them. Two of the eight rules genuinely need real browser layout (line-length reads rect.width for chars-per-line; cramped-padding reads rect.width/height to filter small badges). The other six only need computed CSS values and pure DOM walks — they can run in jsdom too. Refactor - Extract a pure checkQuality(opts) from checkElementQualityDOM, taking pre-resolved lineHeightPx and letterSpacingPx so each adapter handles its own unit resolution. - Add resolveFontSizePx(el, win) — walks the parent chain to compute effective font-size in pixels, handling px / rem / em / % through inheritance. Browsers do this automatically in getComputedStyle, but jsdom returns "0.875rem" verbatim, which broke naive parseFloat math. - Add resolveLengthPx(value, fontSizePx) — generic CSS length → px helper used for line-height and letter-spacing in the Node adapter. - Extract checkPageQualityFromDoc(doc) and add a Node call site so skipped-heading fires from the CLI too. - Add checkElementQuality(el, style, tag, window) Node adapter and wire it into detectHtml's element loop. Tests - New tests/detect-antipatterns-browser.test.mjs — Puppeteer-backed runner that spins up a temporary static server (port 8765, mirrors the dev server's /fixtures/* and /js/* routes) and uses detectUrl() to load fixtures in headless Chrome. Asserts the two browser-only rules (cramped-padding, line-length) that need real layout. - New tests/fixtures/antipatterns/cramped-padding.html — focused side-by-side fixture for the cramped-padding rule. Pass column includes a faithful replica of .detection-cmd from the homepage (the disputed "small inline pill" case the user is deciding what to do with). Test asserts 3 findings: 2 from the obvious flag column + 1 from the disputed pill. - New tests/fixtures/antipatterns/quality.html — merged side-by-side replacement for the orphaned quality-should-flag/pass.html files. Covers all 7 typography-quality rules. The 6 jsdom-compatible rules are asserted in the jsdom test; line-length stays in the Puppeteer test. - Delete the orphaned quality-should-flag.html / quality-should-pass.html. - Wire the new browser test into bun run test (~2.6s overhead). Coverage win: the CLI now catches tight-leading, tiny-text, justified-text, all-caps-body, wide-tracking, and skipped-heading on real projects, where it previously missed all six. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
8b93dfad5e |
Merge color/motion/glow/layout fixture pairs into side-by-side files
Each problem-space fixture is now a single file with two columns: left
for cases that should flag, right for cases that should not. Matches the
icon-tile-stack convention and makes browser-based visual review easier.
The pass column proves that no false positives leak from look-alike
patterns next to the real anti-patterns.
Merged (4 pairs → 4 files)
- color-should-{flag,pass}.html → color.html
- motion-should-{flag,pass}.html → motion.html
- glow-should-{flag,pass}.html → glow.html
- layout-should-{flag,pass}.html → layout.html
Left untouched
- should-{flag,pass}.html — used by the CLI smoke tests in
detect-antipatterns.test.js, which need a known-clean fixture for the
exit-code-0 path.
- typography-should-{flag,pass}.html — all three typography rules
(overused-font, single-font, flat-type-hierarchy) are page-level and
fundamentally can't share a page with their pass cases. Loading two
font stacks suppresses single-font; varied sizes suppress flat-type-
hierarchy. Documented in the test file.
Test calibration
- Hardcoded the jsdom finding counts (motion: 2 bounce + 2 layout-
transition; glow: 1 dark-glow). Real browser sees more because
jsdom doesn't fully apply class-based styles, but the pass-column
count is reliably 0. Browser-verified all 4 fixtures show expected
flag counts and zero pass-column false positives.
Fixture chrome fixes
- Sub-section labels (.col h3) now use #64748b instead of #94a3b8 so
the fixture's own UI doesn't trigger low-contrast. glow.html got a
CSS restructure into card-dark/card-light/card-medium variants so
every text/background pairing meets WCAG AA. layout.html's "card
with image" gradient changed from blue→purple to amber→rose so it
doesn't trip ai-color-palette.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
||
|
Paul BakausandClaude Opus 4.6
|
e1032b7285 |
Add icon-tile-stack rule and cross-validate engine against skill
A new icon-tile-stack detection (the canonical AI feature-card with a small rounded-square icon container above a heading), backed by a two-column TDD fixture, plus a single-source-of-truth design that ties the engine to the impeccable skill so they can no longer drift silently. Detection - New icon-tile-stack rule (slop): heading's previousElementSibling is a 32–128px rounded-square element with a non-transparent background or border, contains an svg/icon-i child, and sits above (not next to) the heading. Excludes round avatars, wide thumbnails, side-by-side layouts, tiny icons, and hero images. - Two-column fixture convention: a single icon-tile-stack.html with a flag column (4 cases) and pass column (6 cases), with snippet-text matching used by the fixture test. Single source of truth - Each ANTIPATTERNS entry can now declare skillSection + skillGuideline. 18 of 25 rules carry these fields; the build's new validateAntipatternRules() in scripts/build.js fails if any declared skillGuideline isn't found verbatim in the right SKILL.md section. - scripts/build-extension.js now includes the description field in extension/detector/antipatterns.json (it was previously dropped). - The existing count validator was promoted from warn to error so command count drift fails the build the same way detection drift does. Impeccable skill DON'Ts - Added 4 new top-level DON'Ts that target real default AI behavior: single-font, flat-type-hierarchy, all-caps-body, line-length. - Cut 7 new DON'Ts I had drafted (tight-leading, tiny-text, wide-tracking, justified-text, low-contrast, cramped-padding, skipped-heading) because they teach things every model already knows from CSS/a11y basics. The detector still catches all of them. Stale count cleanup - 22 commands → 21 across 17 references in HTML, README, NOTICE, AGENTS, plugin.json, marketplace.json (left over from the validate skill removal). - Dropped the hand-coded "212 design guidelines" marketing copy on the homepage, which never mapped to any real count. Sub-agent - New private .claude/agents/anti-patterns.md captures the full TDD recipe, schema, plug-in points, jsdom constraints, and pre-commit checklist so future sessions can add rules end-to-end without re-investigating the wiring. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|
Paul BakausandClaude Opus 4.6
|
b391485e16 |
Detect low-contrast and gray text over gradient backgrounds
Previously checkColors bailed out whenever an ancestor used a gradient background, since resolveBackground returned null. As a result, gray or low-contrast text inside any gradient container was completely invisible to both rules — e.g. the gray heading on bad-contrast.html. Add a resolveGradientStops fallback that walks parents for gradient stops and runs contrast against the worst-case stop, plus gray-on-color when every stop is chromatic. parseGradientColors now also accepts hex so jsdom fixtures with raw inline gradients work too. Extended the color-should-flag fixture and tests to cover the gradient case. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |