mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 13:46:32 +03:00
main
11
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
  Paul BakausandClaude
|
d7d10277d1 |
Merge main into oneshot-v4, keeping the service layer split out
main still carries the site, so every `site/` path resolves to deleted. `tests/docs-integrity.test.js` goes with it (it imports the site's demo renderer), and `package.json` keeps main's `@anthropic-ai/sdk` bump while dropping `@google/genai` and `@paper-design/shaders`, which nothing in the product layer imports. Real code merges: - hook-lib: main's #391 cache fix (sync the remembered set to the live scan so fixed findings stop being named and a reintroduced one fires again) now runs on the immediate tier rather than the whole filtered set. Remembering a deferred finding the per-edit pass never reported would let the Stop deep pass dedupe it away. main's `maxFileBytes` ceiling, `cleanAcked` once-per-file ack, and template-extensions re-export all land alongside the tiering work. - live-browser: main's `hasParams` gate on the Tune badge, keeping this branch's `C.ink` badge text so it stays legible on kinpaku gold. - detect-text: both the block-level codex-grid-background scan and main's inset-stripe CSS check. - test-suites: union of both trigger sets and file lists, minus the site-only entries (`shiki-theme`, `docs-integrity`). - Two hook tests moved off deferred-tier rules (`overused-font`, `side-tab`) onto immediate-tier ones. They assert cache bookkeeping, which the per-edit pass only reaches for the immediate tier. Also drops the site waivers from `.impeccable/config.json` and stops `build:browser` recreating a stray `site/` tree just to write a bundle the other repo builds itself. Co-Authored-By: Claude <noreply@anthropic.com> |
||
|
373039a837 |
Give DESIGN.md a real type ramp so the design hook stops crying wolf (#390)
* Give DESIGN.md a real type ramp so the design hook stops crying wolf The design hook fired on nearly every CSS file we touched. The cause was DESIGN.md's typography block: it declared seven named roles rather than a scale, and two of those roles used clamp(), which the extractor skipped outright. That left an allowlist of five sizes standing against the 86 distinct font sizes actually in use, so design-system-font-size flagged roughly 500 declarations. Editing any .astro page made it worse, because the companion-stylesheet scan re-reported the whole backlog. Extractor (cli/engine/design-system.mjs): - Read a typography.scale map as the enumerated ramp. - Read both clamp() endpoints as allowed sizes. These stay additive on purpose: clamp endpoints alone cannot switch the rule on, because a fully fluid system enumerates no discrete ramp and inferring one from its endpoints would flag every intermediate size. The existing abstention test still passes, and three new tests cover the added behavior. DESIGN.md: - Document a 19-step ramp, 8px through 72px at a 16px root. - Snap the five discrete role sizes onto ramp steps. This also fixes real drift. DESIGN.md claims to mirror kinpaku-tokens.css verbatim, but wordmark was 1.15rem in the CSS against 1.3rem documented, with tracking at 0.42em against 0.15em. Both are re-synced. Standardization, 64 declarations: - Six near-identical steps between 13.7px and 15.4px collapse onto 14 and 15. - .foundation-card-label, .designing-lane-mock-title and .designing-iterate-name each existed at two different sizes in two files. Now unified. - The wordmark rendered at four sizes (20.8, 18.4, 17, 16.8px). Now 18px, plus one deliberate smaller nav variant. Exemptions, for designs that are foreign on purpose: the antipattern-example fixtures, the neo-mirai case-study build, the periodic-table cell annotations in framework-viz.js (5 to 7px diagram geometry sitting at 2 to 3px offsets), and the .why-slop-* before-state card's Inter and gradient text. Verified by computed style across ten rendered pages: every element lands on a ramp step except clamp() values mid-interpolation, which is what fluid means. Full test suite and build validators pass. Generated provider output is deliberately left out; the sync workflow owns it. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Validate clamp() endpoints in usage, not just when reading DESIGN.md Reading clamp endpoints as documented steps without also checking them in source left an asymmetry: `isAllowedFontSizeRaw` returned true for anything failing the px/rem literal test, so `clamp(99rem, 1vw, 200rem)` passed. That is how `.ptable-symbol` at `clamp(1.45rem, 1.8vw, 1.8rem)` stayed invisible until someone measured computed styles, which is not a check the hook can run. Fluid values are now judged on their min and max. The viewport term interpolates between them and is never a fixed step, so it is left alone. Endpoints that cannot be resolved, such as var() or calc() or em, abstain rather than guess. Findings name the offending endpoint and use it as the ignore-value, because the whole clamp string is not actionable on its own. Turning the check on surfaced 22 fluid declarations that had never been looked at. Three used hero sizes above the ramp's 72px cap (80, 83.2 and 88px) alongside the display role's documented 89.6px max, so the top of the ramp was genuinely incomplete. Added the 80 and 88 steps, which gives the display end consistent 8px increments instead of 48/56/64/72 plus an orphan at 89.6, and fixes two declarations outright. The other 20 are snapped by a stated rule: nearest step, ties toward the smaller step, endpoints already matching a documented fluid role left as-is, and where nearest-step would make a breakpoint override meet or exceed its base, the next smaller step so the override still reduces. That last case applies once, to .designing-page-title. Also narrows the framework-viz.js waiver. The periodic-table cell annotations now carry two `impeccable-disable-line` comments naming the reason, instead of a config entry wildcarding the whole file for the rule. Inline waivers travel with the code and cannot silence future drift elsewhere in that file. Verified at 420px, 900px and 1600px across seven pages. The pinned ends are fully on-ramp; the only off-ramp values at 900px are the vw term mid-interpolation, which is what fluid means. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Address review: wordmark tracking picked the wrong side, stale ramp count Two review findings, both fair. Wordmark tracking (greptile, bugbot). This PR moved DESIGN.md's wordmark letterSpacing from 0.15em to 0.42em on the grounds that DESIGN.md claims to mirror kinpaku-tokens.css and the token read 0.42em. That was the wrong side to trust. `--ks-type-wordmark-track` has exactly one consumer, design-system.css:570, which is the specimen page. Every production lockup (.ks-wordmark, .kinpaku-chrome .site-header-brand-name, .footer-logo) hardcodes 0.15em, so 0.15em is what every visitor actually sees and what DESIGN.md already documented correctly before this PR touched it. Reverted the doc to 0.15em and moved the token to 0.15em as well, so the specimen now renders the same lockup as production instead of a wider one nothing else uses. Verified by computed style: header and specimen both report 18px with 2.7px tracking. No production visual change. Stale ramp count (copilot). The sidecar described an "18-step ramp, 8px through 72px". It went stale twice inside this PR, once when the 8 step was added and again when 80 and 88 were added for the hero display sizes. It is 21 steps, 8px through 88px. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Strip !important from the font-size ignore value Follow-on from the waiver wiring in the hook branch. The ignoreValue is what a `hooks ignore-value` waiver has to match, and `font-size: 1.4rem !important` emitted `1.4rem !important` while a plain declaration emitted `1.4rem`. Once font-size is a direct-value rule, that means the same size needs two different waivers depending on whether it carries a priority marker. font-family already strips the marker before matching, and there is a test for that. font-size now does the same. The snippet still shows the declaration as authored. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Have the wordmark rules consume their tokens instead of copying the values Follow-up to the tracking fix, and the residual half of what the reviewers were pointing at. `.ks-wordmark` and the kinpaku chrome lockup each repeated `1.125rem` and `0.15em` literally rather than reading `--ks-type-wordmark-size` and `--ks-type-wordmark-track`. That duplication is exactly how the token drifted to 0.42em while every production lockup stayed at 0.15em and nobody noticed, which is the confusion that started this thread. The values already agree, so this is a no-op visually and is verified as such: computed styles across the home, design-system, docs and changelog pages all still report 18px with 2.7px tracking. What changes is that there is now one place to edit, so the next tracking change cannot silently apply to the specimen page alone. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Paul Bakaus
|
bbed6eef08 |
Refresh the Impeccable product experience
Rework the landing page proof, steering demo, feature grid, slop catalog, detector coverage, theming, Live workflow, and responsive behavior.\n\nAI-assisted implementation by OpenAI Codex. |
||
|
Paul BakausandClaude Opus 4.8
|
1fe9c41759 |
Replace Alumni Sans Pinstripe with Alumni Sans across the type system
The Pinstripe display face was single-weight, so every `font-weight` on it was inert — the documented h1/h2 weight split never actually rendered. Switch --ks-font-display (and --ks-font-wordmark) to plain Alumni Sans, which honors weight, and set the display scale intentionally: - Display / h1 -> weight 100 (thin hairline hero) - Headline / h2 -> weight 300 via --ks-type-headline-weight (light anchor) - Wordmark 400, body 400, title 500 unchanged Centralize h2 weight: the eight section-title sites that hardcoded 600 now read var(--ks-type-headline-weight), so h2 weight is a single lever. Google Fonts now loads Alumni Sans wght@100;300;...;700 and no longer pulls the Pinstripe family. DESIGN.md, design.json, and the token/CSS comments are updated to match (family, weights, Two-Face and Weight-Inversion rules). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> |
||
|
Paul Bakaus
|
9dc97ce648 | small update to our own DESIGN.md | ||
|
Paul BakausandGitHub
|
51d01e3a5f |
[codex] Add design-aware detector rules (#252)
* Add design-aware detector rules * Fix design-aware detector noise * Unify CLI and hook detector ignores * Fix remaining design-system review findings * Add detector ignore CLI * Fix design detector review findings * Fix design color source false positives * Fix core test suite registration * Add design-aware detector docs * Fix font priority design-system parsing * Fix color ignore value matching |
||
|
Paul BakausandClaude Opus 4.8
|
0c05cb8d2b |
Lighten the IMPECCABLE wordmark from weight 500 to 400
The lockup read a touch heavy. Drop the brand wordmark to 400 across the header, footer, and the .ks-wordmark kit primitive so it stays consistent everywhere. Alumni Sans was only loaded at 500/600/700, so 400 is added to the font request (otherwise it would snap back to 500). DESIGN.md synced. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> |
||
|
c8e973b324 |
Site polish: de-warm the palette, refine chrome, clean up /designing (#176)
* fix(home): command-wheel contrast, slop copy, line-length Address P1/P2/P3 findings from /impeccable critique of the homepage: - Command wheel (The Language): off-center command names floored at ~1.43:1 contrast were illegible (WCAG 1.4.3 fail) and hid most of the 23-command vocabulary. Raise the fisheye opacity floor 0.25 -> 0.62, MIN_SCALE 0.35 -> 0.52, and lift the base color from --ks-text-muted to --ks-text. Off-center now measures >=4.59:1; full list stays scannable while gold + size + weight still carry focus. - Slop section copy: rewrite all 7 discipline cards off the uniform "No X. No Y. No Z." triad into varied cadence with positives, and lead the section with what Impeccable does instead of the "Skills can't..." negation pivot. Drops the en-dash joiners too. - Line length: cap .downloads-rebuild-note (was unbounded, ~102ch) and tighten the homepage .section-lead 68ch -> 62ch (rendered ~86 actual chars/line). The diagonal plinth ramp on the slop grid is intentionally kept per design preference. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): de-warm and brighten the text ramp Warmth now lives only in the gold accents and surfaces, not the type. Body, headings, and the secondary tiers read crisp on lacquer instead of mushing into the warm floor: - --ks-champagne 84% .035 82 -> 91% .006 90 (headings/strong, now neutral; token name kept for compatibility) - --ks-text 81% .03 82 -> 88% .008 90 (body) - --ks-text-muted / -faint / -mute-deep lifted and de-warmed to match DESIGN.md frontmatter + prose synced to the new values. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): outlined testimonials + cleaner hero boundary Testimonials: - Flatten the double container: drop the t-plinth shelf wrapper (markup + CSS); the marquee sits directly in the section and carries its inset. - Outlined cards: no fill, 1px solid neutral border (oklch .64 0 0 / .22), no dead drop-shadow. Removes the mushy gray-on-gray blend and the stacked dotted-divider + gold-hairline chrome. - Section has no background of its own (rides the body lacquer gradient) and no top padding, so cards sit right under the hero divider. Hero: - Drop the bottom fade and the top nav scrim; the kintsugi art runs at full strength. A 1px neutral border-bottom (matching the card border) marks the testimonials boundary instead of a wash. - "How it works" is the kit ghost link (white), not an outlined button. Foundation/slop cards: lift the surface 9% -> 15% so they read as raised specimen cards instead of vanishing into the ground. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(live): quieter, more refined picker chrome Gold is reserved for the brand mark and the active control instead of ringing every container. Applied to the homepage demo, /live-mode, and the real injected picker (skill/scripts/live-browser.js, rebuilt into the harness dirs): - Container: neutral 1px hairline + tight neutral shadow (was a 1.5px gold border + gold halo ring); radius 10px -> 8px. - Active toggle: crisp graphite pill with gold text (was a murky kinpaku-dim wash). - Internal control borders (action pill / input / count): neutral hairline (was a warm gold rule); configure-row controls share one 30px baseline. - Pick outline: crisp 1.5px line, no soft gold glow ring; tighter radius. - Demo browser chrome: small uniform neutral dots, neutral URL pill, slimmer bar; frame edge neutral hairline + tighter shadow that registers on dark. DESIGN.md "Live Mode Picker" spec + "Picker Is Brand Rule" updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): neutral default hairline (--ks-rule) The default border/divider token was a warm gold hairline, used ~200x as the site-wide default border — so every small label, pill, counter, card, and divider carried warmth. Redefine it neutral so borders read clean; gold stays where it signals. - --ks-rule oklch(58% 0.065 82 / 0.32) -> oklch(78% 0 0 / 0.16) - --ks-rule-strong (active/focus/brand borders) unchanged, still gold - GitHub star pill: explicit near-white border (oklch 92% 0 0 / 0.18) - DESIGN.md hairline mirror + prose synced Verified across home, /design-system, and /docs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(home): testimonials separator + visible star-pill border - Move the dotted accent to the bottom of the testimonials (neutral dots) as a deliberate separator into the slop section; drop the oversized bottom padding to 1em so cards sit near the separator. - Star-counter pill: solid oklch(80% 0 0) border. The previous near-white at 0.32 alpha rendered as faded mid-gray on the near-black pill; a solid light border reads as the intended white hairline. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): neutralize body text (--ks-text) Drop the last bit of warm chroma from the body text token; it still read slightly warm at 0.008 chroma. --ks-text oklch(88% 0.008 90) -> oklch(88% 0 0) (pure neutral) DESIGN.md mirror + prose synced. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): neutral text everywhere Zero the residual warm chroma across the rest of the text ramp so no text tier carries warmth (warmth lives only in gold accents + surfaces). - --ks-champagne 91% .006 90 -> 91% 0 0 - --ks-text-muted 72% .01 90 -> 72% 0 0 - --ks-text-faint 62% .008 90 -> 62% 0 0 - --ks-text-mute-deep 52% .008 90 -> 52% 0 0 (--ks-text was already neutralized.) DESIGN.md mirror + prose synced. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): crisp, neutral Desloppification section - Foundation card background: oklch(15% .004 95) -> oklch(15% 0 0) (neutral graphite) so cards read crisp, not warm. - Plinth hatch: kinpaku gold -> neutral (oklch 80% 0 0 / .07) on a neutral base; the gold hatch was washing the section champagne. - Remove the plinth bottom mask-fade so the pedestals end on a clean edge. Gold stays only on the card icons as the accent. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): drop the homepage warm-token overrides The homepage redefined --ks-rule, --ks-rule-strong, and --ks-muted to warm values locally (an old "busier surfaces" tweak), so homepage borders and secondary text stayed champagne even after the global de-warm. That's why the Desloppification cards still read warm. - Remove the --ks-rule / --ks-rule-strong overrides; inherit the global tokens (neutral default border, gold strong/active border). - Alias --ks-muted to the global --ks-text-muted (no divergent value); legacy code still reads the --ks-muted name. Result: all homepage borders + secondary text are neutral; gold stays on accents (icons, mark, CTAs, active/focus). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): canonical code tokens (inline + block) Code styling was all over the place: homepage inline code was gold-on-gold, the slop CLI was a one-off gold-on-raised-lacquer, downloads used a separate --card-cmd-* set, docs used yet another. Add one shared token set and point the canonical surfaces at it. New :root tokens: - --ks-code-fg / --ks-code-bg / --ks-code-radius (inline: neutral chip) - --ks-code-block-fg / -bg / -border / -radius (block/CLI: lacquer terminal) - --ks-code-cmd (code that's a command link) Migrated: homepage inline code (was gold -> neutral chip), slop-teaser-cli (the "weird color" -> neutral terminal), downloads-cmd, and the docs inline + fenced-block rules (now the token source of truth; block text also neutralized). Remaining pages (designing, changelog/faq, detector, case studies) swept next. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): sweep remaining pages onto code tokens Point the rest of the site's code rules at the shared code tokens so inline code and blocks are consistent everywhere: - Inline code (designing, changelog, faq): gold -> neutral chip (--ks-code-fg / --ks-code-bg). - Detector rule pills + table cells: code text -> --ks-code-fg. - Neon-mirai case-study code block -> --ks-code-block-* tokens. Command tags (the gold /command pills: spread-flow-cmd, docs-flow-cmd, designing-phase-cmd, why-ci-cmd, etc.) are intentionally left as their own interactive category, not generic code. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): polish "The Language" section - Command tags (/polish, /adapt): gold command text on a neutral code chip (--ks-code-cmd / --ks-code-bg), dropping the muddy gold-tint border. - Commands panel kept as the solid oklch(0.17 0 0) panel (no border). - Demo preview cleaned up to a single framed split: strip the grid ::before, the gold-grid/radial-glow container background, and the inner drop-shadow; before-half inherits the panel, after-half is near-black, with one thin neutral border on the demo itself (caption sits outside it). - Periodic table: crisp flat neutral graphite tiles. Removed the JS-inlined category bg (var(--cat-*-bg)) + 1.5px colored border + hover drop-shadow, the gold-leaf ::before texture, the ::after accent line, the inset box-shadow, and the gold hover glow. Now a 1px neutral border, white symbols, readable neutral names, and a clean neutral-border hover with no shadow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(design): roomier inline-code padding Inline code chips were tight top/bottom (the homepage one was only 0.05em). Add a --ks-code-pad token (0.3em 0.5em) and point every inline-code rule at it so the chips have consistent breathing room. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(home): drop non-steering commands from the command palette impeccable, init, extract, document, and live are setup/management commands, not steering verbs. Filter them out of the palette (fisheye + mobile carousel) via a shared PALETTE_EXCLUDED set. They stay in the periodic table, which is rendered separately by framework-viz.js. Palette: 23 -> 18 commands. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): flatten the pre-ship nested box The pre-ship cards were a box-in-box: a legacy .designing-polish-grid panel (cream bg + L/R/B border + padding, from docs-visuals.css) wrapping cards that already have their own border + fill. Override the grid to a plain transparent layout so the three cards are the only surface. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): remove step counter + flatten design-debt boxes - Drop the cryptic "03 · 04" pre-ship step counter (.designing-polish-band-meta) and tighten the band to a single bottom hairline. - Design-debt: flatten the box-in-box (bento plinth > tile > stage). The .designing-maintain-stage no longer adds its own border + fill; the demo sits directly in the bento tile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): neutralize code/terminal/panel surfaces The terminal block, surface-cmd chips, command pills, live-frame, and other dark panels used a slightly-warm dark fill (oklch 1X% 0.006 95). Drop the warm chroma so they read neutral like the rest of the de-warmed site; the page ground + deep surfaces stay lacquer-warm. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): neutralize inline code + live-mock picker chrome - Inline code: the phase-sub and avoid-title code were still gold; point them at --ks-code-fg so all inline code reads neutral (gold stays only on command *links*). - docs-viz-live mock: bring the duplicated picker chrome in line with the refactored neutral treatment — neutral 1px container borders (no gold halo), neutral active "Pick" pill (was the kinpaku-dim wash), crisp pick outline (no glow), tighter radii. - CTAs (SEND ME ONE, Accept): pale-cream kinpaku-pale -> solid kinpaku gold. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): flatten lanes + avoid sections - Brand/Product lane mock cards: drop the inner border+fill box; the mock sits directly in the bento tile, separated by a top hairline (no plinth>tile>mock nesting). - "What to avoid" list: flatten the boxed list cards into a clean divided list (hairline separators, no per-item border/fill). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): clean up the Brand/Product lanes - Drop the bento plinth (0.17 fill + 8px gutter that drew the weird gutter "borders") and the tile fill; the two lanes sit on the page split by a single center hairline. - Brand mock title used the pinstripe display face at 1.6rem (reads broken at that size, the "champagne text"); switch it to the clean body face so it matches the product mock title. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(site): update GitHub star count to 31k 31,188 stars as of now; header pill + aria-label were stale at 30k. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Add Neo Kinpaku light mode across the site. Wire theme persistence and a header toggle, then layer light-mode overrides for docs viz contrast, command demos, live-mode pathway cards, and the designing/home surfaces. Co-authored-by: Cursor <cursoragent@cursor.com> * fix(designing): replace em dashes flagged by prose validator Brand/Product lane copy used em dashes ("the deliverable —", "the task —"); swap for colons per STYLE.md so the Cloudflare build's validateProse passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(designing): address Cursor bugbot nits - Fold the duplicate .designing-avoid { gap: 0 } override into the original rule (the gap: 18px was dead code). - Drop the leftover el.style.boxShadow = 'none' in the periodic-tile deactivate handler — activate no longer sets a box-shadow, so this only left a dead inline none that could suppress a future CSS shadow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|
|
9ffd3211d5 |
Neo Kinpaku design system + Live Mode v3 (#169)
* Add neo kinpaku design system page * skill: rip out baked-in category recipes and saturated-default motion tropes Programmatic bias mining (impeccable-evals) traced four major defects back to specific lines in this skill that contradicted SKILL.md's own first-order-reflex warning: - brand.md "Pairing and voice" prescribed four category→aesthetic recipes (editorial → serif+sans, tech/dev/fintech → tight tracking, consumer/food/travel → script/display serif, creative → rule-break). These directly drove OpenAI's 76% extreme-negative letter-spacing on tech briefs and Anthropic/Google's 28-34% italic-serif-display slop on editorial/food briefs. Replaced with one sentence: the shape depends on the brand, not on the brand's category. - brand.md "Brand permissions" had "Typographic risk. Enormous display type, unexpected italic cuts, mixed cases, hand-drawn headlines, a single oversize word as a hero." — a four-for-one slop driver behind 97% OpenAI comically-large H1, 42% bad-SVG illustration, and the editorial-italic slop. Deleted outright. - typeset.md and teach.md repeated the same category recipes; trimmed to the principle without the recipe. - SKILL.md Typography: added a hard hero-H1 ceiling (clamp() max ≤ 6rem ≈ 96px), with a <codex> block to make it explicit since OpenAI over-indexes here (97% ≥128px vs 24% for Anthropic). - animate.md, bolder.md, brand.md: removed "staggered reveals" and "scroll-triggered transitions" as the prescribed default ambitious motion. By 2026 that's the saturated AI tell, not a choreography. Reserved stagger for legitimate list-sibling rhythm. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: anti-cream + codex-specific defect bans + universal slop bans Second pass after measuring more biases against the eval corpus. - SKILL.md Color: explicit "cream/sand/beige body bg is the saturated AI default of 2026" rule. Tone down the "tint every neutral" line so it doesn't read as "default to warm-tinted near-white" (which OpenAI hits at 74% and Anthropic at 31%-47%). - SKILL.md Absolute bans: add universal bans for two slop patterns detected at 55-95% across providers — tiny uppercase tracked eyebrow above every section (the 2023-era kicker that's now AI grammar) and numbered section markers (01/02/03). Also explicit "text that overflows its container is the universal defect on tablet/mobile." - SKILL.md Absolute bans → <codex> block: ban the GPT-specific defects Paul annotated repeatedly — `border:1px solid` + soft-wide-shadow (≥16px blur) "ghost cards", `border-radius:32px+` over-rounding, hand-drawn/sketchy SVG illustrations (loose-sketch / *-sketch classes, feTurbulence paper-grain filters), repeating-linear-gradient stripes, "X theater" AI-slop copy phrases. - SKILL.md Motion → <gemini> block: the image :hover transform tell (38% Google skill-on rate). Hover effects on images add no info; the image isn't an action target. Animate card chrome, not the image. - SKILL.md Typography: hard display letter-spacing floor ≥-0.04em (OpenAI defaults to -0.075em → cramped). Existing hero ceiling <codex> block extended with the letter-spacing rule. - codex.md Step A example: stop seeding "warm-grounded (deep oxblood + cream)" as the warm-palette template, which primes the cream default. - colorize.md Tinted backgrounds: stop printing the literal cream recipe `oklch(97% 0.01 60)`; replace with brand-anchored guidance. - document.md examples: warm-ash-cream → cool-paper so the example doesn't seed cream as the canonical neutral example. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: universal anti-slop bans + contrast/font-count/all-caps-body rules Third pass after measuring the rest of the cross-provider matrix: - Color: explicit "Verify contrast" rule. Low-contrast text fires at 68% across all providers skill-on (90+% off). The most common failure is muted gray body on a tinted near-white; light-gray-for- elegance is named as the single biggest cause of unreadable AI pages. - Typography: max-3-font-families rule. Overused-fonts (>4 families) fires at 28% Anthropic / 36% Google / 0% OpenAI skill-on; >50% off. Also: universal "no all-caps body copy" (moved from brand-only ban to Shared design laws since product-register also overuses caps). - Copy: anti-aphoristic-cadence ban targets Anthropic's signature "X. No Y." / "X. Just Y." voice (63% skill-on copy-slop rate, 77% off — the worst rate in the matrix). Once-is-voice / three-or-more- is-tell framing per the runner's copy-slop detector. - Copy: anti-SaaS-buzzword-string ban with the literal phrase list the detector watches for (streamline/empower/supercharge, trusted- by-leading, best-in-class/enterprise-grade/cutting-edge, etc). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: strengthen anti-cream rule across full warm-neutral band Smoke validation showed the cream fix worked for Google + OpenAI but Anthropic Sonnet italian-restaurant still shipped `--paper: oklch(90% .018 88)` — cream just outside the L≥95% band the rule cited. Broaden the rule: - Band: OKLCH L 0.84-0.97, C < 0.06, hue 40-100 (was 95-97% / 60-95). - Name the token-name tells explicitly (paper / cream / sand / bone / flour / linen / parchment / wheat / biscuit / ivory) — the model defaults to one of these regardless of what hex it lands on. - Call out the specific brief patterns ("warm, traditional, family- coastal-Italian" / "editorial-restraint") that the model translates into cream by reflex. Then provide three explicit non-cream options: saturated brand color, true off-white at C=0, or darker mid-tone. Warmth in the brand is carried by accent + typography + imagery, not by body bg. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * v3.2.0: skill bias-fix release Bumps version from 3.1.1 to mark the four-commit skill cleanup that rips out baked-in category recipes (brand.md), saturated-default motion tropes (staggered reveals everywhere), the cream/sand body-bg AI tell, codex-specific defects (1px+wide-shadow, over-rounding, hand-drawn SVGs, stripes, X-theater copy), the extreme-letter-spacing default, and universal slop bans (all-caps eyebrow on every section, numbered-section markers, all-caps body, font-family-count > 3, aphoristic copy cadence, SaaS buzzword strings). Plus a hard hero-H1 ceiling (clamp() ≤6rem) and a Gemini-specific image:hover transform block. Validated against ~190 post-fix samples — see impeccable-evals biases tab for per-provider deltas. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * drop "no pure black/white" rule entirely The rule was contested in the design world and causing more damage than good — pushing every page into the tinted-near-white default which is the cream/sand AI tell we already explicitly ban elsewhere. Vercel, SVKMS, Brutalist sites, et al. use pure black/white successfully; the skill shouldn't second-guess that. Skill markdown deletions: - SKILL.md Color: drop the "Never use #000 or #fff" bullet. - color-and-contrast.md: drop the "Never Use Pure Gray or Pure Black" subsection, the "Never pure black" table-row prescription, and the "Avoid: Using pure black for large areas" bullet. - colorize.md: drop the "NEVER use pure black or pure white for large areas" bullet. - polish.md: drop the "Tinted neutrals: No pure gray or pure black" half of the bullet (the gray-on-color bullet survives). Detector code (cli/engine): - registry/antipatterns.mjs: remove the `pure-black-white` entry. - rules/checks.mjs: remove the three `findings.push({ id: 'pure-black-white', ... })` emit points (inline #000 bg, Tailwind bg-black class, plain-HTML scan path). - engines/regex/detect-text.mjs: remove the two pure-black-white regex rules (CSS `background: #000…` + Tailwind `bg-black`). - detect-antipatterns-browser.js: regenerated via scripts/build-browser-detector.js. Tests: - detect-antipatterns-fixtures.test.mjs: invert the assertion that pure-black-white fires; expect it to NOT fire post-v3.2. Drop the Tailwind bg-black-opacity edge-case test (no longer relevant). - detect-antipatterns.test.js: drop the standalone "detects pure- black-white in styled-components" test and remove pure-black-white from the multi-detector assertions in PricingCard, globals.css, and GlobalStyle.tsx tests. 166 bun tests pass; 24 node fixture tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: strip example patterns from copy rules, strengthen gemini block v3.2 rerun validation surfaced two issues: 1. Copy-slop detector fires more on Gemini under v3.2 (48% → 84%) than under no-skill baseline. Root cause: the anti-aphoristic-cadence rule printed the literal "X. No Y." / "X. Just Y." patterns as examples, and Gemini imitated them as the recommended voice. Same recipe-becomes- bias trap we hit with brand.md:116's "Enormous display type, unexpected italic cuts, mixed cases, hand-drawn headlines" enumeration. Fix: describe the cadence as a rhythm ("serious statement, then punchy short negation") without printing literal patterns. Buzzword list trimmed to a single inline phrase family rather than quoted strings. 2. Gemini image:hover transform Gemini-tell hadn't dropped (31% off → 32% v3.2). Strengthen the <gemini> block: explicit "Never animate <img> elements on hover", call out the Tailwind group-hover:scale / group-hover:rotate / group-hover:translate parent-hover patterns by name (Gemini was reaching for these via Tailwind even though the prior text talked about :hover on the image directly). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: simplify context loading and inline register directive Replaces load-context.mjs's JSON output with a tight markdown block from the renamed context.mjs. The script now extracts PRODUCT.md's `## Register` field and appends a `NEXT STEP:` directive naming the matching reference (brand.md / product.md), which moved Gemini from skipping the register load entirely to honoring it. Drops the `.impeccable.md` auto-migration; makes IMPECCABLE_CONTEXT_DIR a lazy escape hatch consulted only when the default paths come up empty. Setup is now four bullets in one list. The DESIGN.md nudge is gone; in its place, a "familiarize with the existing design system" step that calls out CSS / tokens / running app as authoritative sources alongside DESIGN.md. The standalone `### Register` H3 stays for the cascade rules (task cue → surface → register field). New LLM-backed test suite at tests/skill-behavior/ runs five scenarios against claude-haiku-4-5, gpt-5.4-mini, and gemini-3.1-flash-lite via Vercel AI SDK. Captures real tool traces, asserts on context.mjs calls, brand.md loads, and teach.md fallback. Skips cleanly when API keys are unset. 13-14/15 pass; only stable failure is the v3.2.0-era gpt-mini S4 "don't re-run" regression. Adds @ai-sdk/google as devDep and the test:skill-behavior npm script. Touches em-dashes in skill/SKILL.md and four reference files so `bun run build:skills` passes its skill-prose validator. teach.md and document.md drop their "re-run the loader to refresh session cache" steps since the agent's own write is now the freshest source. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: merge orphan reference files into command sub-skills + inline S-tier invariants Two related restructurings: 1. SKILL.md now carries the cross-domain invariants that catch defects in any project (contrast/placeholder/gray-on-color, similar-font pairing, text-wrap, tabular-nums, centered-stack default, Flex/Grid choice, auto-fit grids, semantic z-index, reduced motion, stagger vs section-fade, premium motion materials, focus-visible, placeholders-aren't-labels, dropdown overflow trap, button/link copy). Greenfield-only rules (theme picking, color strategy, tinted neutrals) live under "New projects only". 2. Reference files merged into their command counterparts: - spatial-design.md -> layout.md - motion-design.md -> animate.md - color-and-contrast.md -> colorize.md - responsive-design.md -> adapt.md - ux-writing.md -> clarify.md - typography.md -> typeset.md (bolder.md redirected) - cognitive-load.md + heuristics-scoring.md + personas.md -> critique.md craft.md and shape.md "load references" lists updated to new file homes. interaction-design.md stays standalone (no 1:1 command verb). Net: 36 -> 27 reference files. Same content, fewer files, no orphaned reference loaded only from craft.md. Also extends the routing rules: if the user's first word doesn't match a command but the intent clearly maps to one, load that command's reference and proceed as if invoked. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: add sub-command + existing-project scenarios; move sub-command load to step 2 Adds three new LLM-backed scenarios to tests/skill-behavior: - S6: `/impeccable polish` → loads polish.md - S7: `/impeccable audit` → loads audit.md - S8: existing SvelteKit project (PRODUCT.md + DESIGN.md + src/app.css + src/lib/components/*.svelte + src/routes/+page.svelte) → agent reads at least one project code file to understand the existing design system S6/S7 surface a real model-floor: gpt-5.4-mini reads brand.md, reads the target index.html, and just does the polish/audit without ever loading the sub-command reference. Stronger SKILL.md wording didn't move it. Captured in the README baseline as a known weakness. Claude and Gemini honor the load reliably. To fix Gemini on S6/S7, sub-command reference loading is now Setup step 2 (right after context.mjs), not step 4 — placing it before the model gets focused on "doing the work". Step 3 (design-system familiarization) is tightened to require at least one project code read even when a sub-command reference loads in step 2, so Claude doesn't laser-focus on the sub-command flow and skip the broader exploration. Two new fixtures: MINIMAL_LANDING_HTML (a tiny static landing page for S6/S7) and SVELTE_PROJECT_FILES (a minimal SvelteKit scaffold with tokens, components, and a routes/+page.svelte for S8). Both designed to look real enough that agents treat them as production code. Suite is now 24 tests across three providers; baseline is 21-22/24, with the stable failures being gpt-5.4-mini scenarios 6 and 7. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: add reveal-animation safety rule (must enhance, not gate visibility) Class-triggered visibility transitions pause on hidden tabs and headless renderers. The italian-restaurant smoke produced a build where 2 sections shipped opacity:0 because the CSS transition never advanced past currentTime=0 (timeline paused). Added one-liner under Motion to prevent the antipattern: reveals must enhance an already-visible default, never gate content visibility on a class-triggered transition. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: restore prescriptive cream/sand/beige paragraph Bisection across 5 historical skill commits on Gemini 3.5 flash fast lane n=3 found that |
||
|
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.6
|
1ebe204b1b |
Align DESIGN.md format with official Google Stitch spec
The format at https://stitch.withgoogle.com/docs/design-md/format/ defines exactly six sections in a fixed order: Overview, Colors, Typography, Elevation, Components, Do's and Don'ts. Our previous format used non-compliant names (Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings), a non-existent "Layout Principles" section, and had no Do's and Don'ts. Changes to reference/document.md: - Fixed section list to match the spec character-for-character - Added mandatory "Creative North Star" pattern at top of Overview - Added Named Rules pattern (e.g. "The No-Line Rule") — stickier than bullet lists for AI consumers, mirrors Stitch's own generator output - Added explicit Do's and Don'ts section with concrete, forceful guardrails - Elevation is now its own section (was buried in Components) - Layout/motion/responsive content folds into Overview + Components rather than inventing new top-level sections - Guidance on forceful voice ("prohibited"/"forbidden"/"never") matching PRODUCT.md's expert-decisive tone - Pitfalls section warns against renaming sections or adding new ones Changes to our DESIGN.md: - Rewrote to use spec-compliant section headers with evocative subtitles (e.g. "## 2. Colors: The Warm-Paper Palette") - Opened with "Creative North Star: The Editorial Sanctuary" - Added 11 Named Rules across sections (The One Voice Rule, The Paper- Not-White Rule, The OKLCH-Only Rule, The Italic-Is-Voice Rule, The 1.6 Leading Rule, The Fluid-Headlines-Only Rule, The Flat-By- Default Rule, The Low-Alpha Rule, The Tinted-Shadow-Only-For-Accent Rule, plus the existing implicit ones) - Full Do's and Don'ts section with 10 Dos and 15 Don'ts, many of which translate PRODUCT.md anti-references into concrete prohibitions - Elevation section documents shadow vocabulary separately from Components - Layout/spacing/motion content relocated to a sub-section under Components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |