From 867fab21882d683413dade2f1b1d73a8dc0d193b Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 23 Jun 2026 01:23:23 +0900 Subject: [PATCH] Redesign Get started install block as tabbed method selector Replace the static Install/First run/Update boxes with a tabbed "Install via" selector (impeccable / marketplace / skills.sh). Switching a tab swaps the install and update commands together, with a per-method note. - impeccable tab marked recommended with a gold star; carries a Node 24+ requirement and a collapsed "Why one command, many builds" diagram that animates impeccable branching per harness. The diagram foregrounds the model-specific slop rules compiled into the Gemini and Codex builds (verified against skill/SKILL.src.md provider tags). - GitHub Copilot is built into the app, so it's a quiet de-boxed callout under the tabs rather than a tab, catching Copilot users before they install something they don't need. - Add claude-mark.png (transparent-background Claude starburst) for the marketplace tab. - Tabs baseline-align with the "INSTALL VIA" label; diagram scales and the tablist wraps cleanly on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) --- site/pages/index.astro | 243 +++++++++++++++++-------- site/public/assets/claude-mark.png | Bin 0 -> 3085 bytes site/styles/home-rebuild.css | 277 +++++++++++++++++++++++++++++ 3 files changed, 448 insertions(+), 72 deletions(-) create mode 100644 site/public/assets/claude-mark.png diff --git a/site/pages/index.astro b/site/pages/index.astro index ad6b4d98a..fa3fd55d6 100644 --- a/site/pages/index.astro +++ b/site/pages/index.astro @@ -617,22 +617,111 @@ import '../styles/testimonials.css';

Get started

-
+
- Install -
- - npx impeccable install - +
+ Install via + + +
+ +

+ + On the GitHub Copilot app? Impeccable is built in. Skip the install and enable it under Settings → Experimental. +

+ +
+
+ + npx impeccable install + +
+

Installs the build tailored to your harness and model. Requires Node 24+.

+ +
+ + + Why one command, many builds + +
+ + + + + + + + impeccable + + + + Claude Code + hooks + subagent + + + + Cursor + pre-edit hook + + + + Gemini CLI + + Gemini-tuned slop rules + + + + Codex CLI + + Codex-tuned slop rules + + +

Same skill, recompiled per target. The part that matters: builds for models with known tells carry extra slop rules banning that model's habits. The Gemini build kills its image-on-hover motion; the Codex build refuses ghost-cards and over-rounding. Native hook wiring and a subagent ship too, where the tool supports them.

+
+
+
+ + + +
@@ -656,66 +745,47 @@ import '../styles/testimonials.css';
Update -
- - npx impeccable update - + +
+
+ + npx impeccable update + +
+
+ + + +
-

Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, and every other major AI coding harness. install sets up the build for your harness. Then run /impeccable init inside your AI tool so the skill can save your design context. update pulls the latest version. Run npx impeccable check to see if you're behind. Installed the Claude Code plugin? Update it from the /plugin menu instead.

- -
- - - Other install methods - - -
- Claude Code plugin -
- /plugin marketplace add pbakaus/impeccable - -
- Then open /plugin in Claude Code and install Impeccable from the list. Claude Code only. -
- -
- npx skills -
- npx skills add pbakaus/impeccable - -
- The general-purpose skills installer. For now it installs one shared build for all harnesses rather than the build compiled for yours. Prefer npx impeccable install above for the correct setup. -
-
+

Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, and every other major AI coding harness.

Read the setup guide · See what's new · Got questions?

@@ -745,6 +815,35 @@ import '../styles/testimonials.css'; + + diff --git a/site/public/assets/claude-mark.png b/site/public/assets/claude-mark.png new file mode 100644 index 0000000000000000000000000000000000000000..f021b376e04a4f64e3b3f07f7b026d6e21dfcda1 GIT binary patch literal 3085 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 .downloads-rebuild-branch-summary { + color: var(--card-fg-strong); + margin-bottom: 14px; +} +.downloads-rebuild-branch-arrow { + flex: none; + transition: transform 180ms var(--ks-ease); +} +.downloads-rebuild-branch[open] > .downloads-rebuild-branch-summary .downloads-rebuild-branch-arrow { + transform: rotate(90deg); +} + +.downloads-rebuild-branch-diagram { + display: block; + width: 100%; + max-width: 430px; + height: auto; + font-family: var(--ks-mono); +} + +/* Connectors: hidden (fully dashed-out) until the section opens, then each + draws from the source node to its target. */ +.downloads-rebuild-branch-line { + fill: none; + stroke: color-mix(in oklch, var(--ks-kinpaku) 55%, transparent); + stroke-width: 1.3; + stroke-dasharray: 230; + stroke-dashoffset: 230; +} +.downloads-rebuild-branch[open] .downloads-rebuild-branch-line { + animation: branch-draw 620ms var(--ks-ease) forwards; +} +.downloads-rebuild-branch[open] .downloads-rebuild-branch-line:nth-of-type(1) { animation-delay: 60ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-line:nth-of-type(2) { animation-delay: 130ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-line:nth-of-type(3) { animation-delay: 200ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-line:nth-of-type(4) { animation-delay: 270ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-line:nth-of-type(5) { animation-delay: 340ms; } + +.downloads-rebuild-branch-root-box { + fill: color-mix(in oklch, var(--ks-kinpaku) 9%, transparent); + stroke: var(--ks-kinpaku); + stroke-width: 1.2; +} +.downloads-rebuild-branch-root-text { + fill: var(--ks-kinpaku); + font-size: 13px; + font-weight: 500; +} +.downloads-rebuild-branch-dot { + fill: var(--ks-kinpaku); +} +.downloads-rebuild-branch-name { + fill: var(--ks-champagne); + font-size: 11.5px; + font-weight: 600; +} +.downloads-rebuild-branch-tags { + fill: var(--ks-text-muted); + font-size: 8.6px; + letter-spacing: 0.01em; +} +/* The model-specific slop rules are the headline of this diagram, so the rows + that carry them light up gold while the plumbing tags stay muted. */ +.downloads-rebuild-branch-tags--slop { + fill: var(--ks-kinpaku); + font-weight: 600; +} + +/* Targets fade up behind the drawing lines, staggered to match. */ +.downloads-rebuild-branch-target { + opacity: 0; + transform: translateX(-5px); +} +.downloads-rebuild-branch[open] .downloads-rebuild-branch-target { + animation: branch-rise 460ms var(--ks-ease) forwards; +} +.downloads-rebuild-branch[open] .downloads-rebuild-branch-target:nth-of-type(1) { animation-delay: 220ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-target:nth-of-type(2) { animation-delay: 290ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-target:nth-of-type(3) { animation-delay: 360ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-target:nth-of-type(4) { animation-delay: 430ms; } +.downloads-rebuild-branch[open] .downloads-rebuild-branch-target:nth-of-type(5) { animation-delay: 500ms; } + +.downloads-rebuild-branch-caption { + margin: 12px 0 0; + max-width: 56ch; + font-size: 0.8rem; + line-height: 1.5; + color: var(--ks-text-muted); +} +.home-kinpaku .downloads-rebuild-branch-caption code { + font-family: var(--ks-mono); + font-size: 0.9em; + color: var(--card-fg-muted); +} + +@keyframes branch-draw { + to { stroke-dashoffset: 0; } +} +@keyframes branch-rise { + to { opacity: 1; transform: translateX(0); } +} + +/* Reduced motion: skip the draw/rise, show the finished diagram immediately. */ +@media (prefers-reduced-motion: reduce) { + .downloads-rebuild-branch[open] .downloads-rebuild-branch-line { + animation: none; + stroke-dashoffset: 0; + } + .downloads-rebuild-branch[open] .downloads-rebuild-branch-target { + animation: none; + opacity: 1; + transform: none; + } +} + /* Install command is THE primary CTA of the Get Started section. A full kinpaku hairline frame + gold prompt glyph + left-aligned mono make it read as a runnable terminal line, not a decorative chip. Copy button nests on the