diff --git a/site/content/tutorials/getting-started.md b/site/content/tutorials/getting-started.md index 2142832ac..f7b17f23b 100644 --- a/site/content/tutorials/getting-started.md +++ b/site/content/tutorials/getting-started.md @@ -38,6 +38,8 @@ This auto-detects your harness and writes the build compiled for it to the right Prefer a different setup? Claude Code users can install the plugin with `/plugin marketplace add pbakaus/impeccable`, and the general-purpose `npx skills add pbakaus/impeccable` still works (though it installs one shared build for all harnesses rather than the one compiled for yours). +When a new version ships later, run `npx impeccable skills update` from the same project root. `npx impeccable skills check` tells you first whether you are behind, and plugin users update from the `/plugin` menu instead. + ## Step 2. Set up Impeccable for your project This is the most important step. Design without context produces generic output. The `/impeccable init` command runs a short discovery interview and writes a `PRODUCT.md` file at the root of your project. diff --git a/site/pages/faq.astro b/site/pages/faq.astro index 7434cf545..43fda8831 100644 --- a/site/pages/faq.astro +++ b/site/pages/faq.astro @@ -29,7 +29,7 @@ import '../styles/changelog-faq-kinpaku.css';
How do I update to the latest version?
-

Run npx impeccable skills update from your project root. It downloads the latest skills, cleans up deprecated files, and preserves any prefix you use.

+

Run npx impeccable skills update from your project root. It downloads the latest skills, cleans up deprecated files, and preserves any prefix you use. Not sure you're behind? npx impeccable skills check compares what you have installed against the latest release first.

-
- npx impeccable skills install - +
+ Install +
+ + npx impeccable skills install + +
-

Installs the build compiled for your harness. Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other major AI coding harness.

+ +
+ Update +
+ + npx impeccable skills update + +
+
+ +

Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other major AI coding harness. install sets up the build for your harness; update pulls the latest. Run npx impeccable skills check to see if you're behind. Installed the Claude Code plugin? Update it from the /plugin menu instead.

@@ -654,14 +674,14 @@ import '../styles/testimonials.css'; View on npm →
  • - Stay updated - New commands, new anti-patterns, and the design thinking behind them. Subscribe to the Substack, or follow along on X. - Subscribe on Substack → + Follow along + The design thinking behind new commands and anti-patterns, in long form. Read the newsletter, or catch the shorter notes on X. + Read the newsletter → Follow @impeccable_ai on X →
    • -

    Get started: Designing with Impeccable · the command docs

    +

    Learn more: Designing with Impeccable · the command docs

    diff --git a/site/styles/home-rebuild.css b/site/styles/home-rebuild.css index 033621235..55d7624d7 100644 --- a/site/styles/home-rebuild.css +++ b/site/styles/home-rebuild.css @@ -564,6 +564,14 @@ --card-link-underline: var(--ks-kinpaku); --card-link-secondary: var(--ks-muted); + /* Command-frame accents. The install box is the primary CTA and carries + kinpaku; the update box carries patina, which in this system reads as the + "improved / updated" state. Both re-theme in light-mode.css. */ + --card-cmd-border: var(--ks-kinpaku); + --card-prompt: var(--ks-kinpaku); + --card-cmd-border-update: oklch(70% 0.12 188 / 0.5); + --card-prompt-update: var(--ks-patina); + /* Width of the accent's reserved right column. Content padding-right matches this so the accent never overlaps text. */ --card-accent-w: 280px; @@ -571,11 +579,11 @@ position: relative; max-width: 1080px; margin: 0 auto; - padding: 88px var(--card-accent-w) 88px 56px; + padding: 80px var(--card-accent-w) 80px 56px; border-radius: 2px; background: oklch(0.17 0 0); color: var(--card-fg); - text-align: center; + text-align: left; overflow: hidden; } @@ -620,9 +628,9 @@ display: grid; gap: 18px; max-width: 760px; - margin: 0 auto 48px; - text-align: center; - justify-items: center; + margin: 0 0 40px; + text-align: left; + justify-items: start; } .downloads-rebuild-eyebrow { @@ -645,24 +653,56 @@ .downloads-rebuild-install { display: grid; - gap: 12px; - margin: 0 auto 56px; - max-width: 720px; + gap: 22px; + margin: 0 0 48px; + max-width: 600px; + text-align: left; } -/* Install command is THE primary CTA of the Get Started section. Strong - plinth bg + bigger font + more padding make it the hero. Copy button is - nested inside on the right. No side-stripe border (brand-ban). */ +/* Each command is a labeled group: a small mono cap above its box. */ +.downloads-rebuild-cmd-group { + display: grid; + gap: 9px; +} + +.downloads-rebuild-cmd-label { + font-family: var(--ks-mono); + font-size: 0.7rem; + font-weight: 500; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--card-prompt); +} +.downloads-rebuild-cmd-label--update { + color: var(--card-prompt-update); +} + +/* 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 + right. Full border, not a side-stripe (brand-ban). */ .home-kinpaku .downloads-rebuild-cmd { display: flex; align-items: center; - gap: 16px; - padding: 14px 14px 14px 28px; + gap: 14px; + padding: 15px 14px 15px 22px; background: var(--card-cmd-bg); - border: 0; + border: 1px solid var(--card-cmd-border); border-radius: 2px; } +/* The shell prompt that signals "this is a command you run." Carries the + row's accent (gold for install, patina for update). */ +.home-kinpaku .downloads-rebuild-prompt { + flex: none; + font-family: var(--ks-mono); + font-size: 1.18rem; + font-weight: 500; + line-height: 1; + color: var(--card-prompt); + user-select: none; +} + .home-kinpaku .downloads-rebuild-cmd > code { flex: 1 1 auto; min-width: 0; @@ -670,7 +710,7 @@ white-space: nowrap; color: var(--card-cmd-fg); font-family: var(--ks-mono); - font-size: 1.25rem; + font-size: 1.22rem; letter-spacing: 0; background: transparent; border: 0; @@ -678,6 +718,14 @@ user-select: all; } +/* Update box: same frame, quieter patina accent (the "improved" signal). */ +.home-kinpaku .downloads-rebuild-cmd--update { + border-color: var(--card-cmd-border-update); +} +.home-kinpaku .downloads-rebuild-cmd--update .downloads-rebuild-prompt { + color: var(--card-prompt-update); +} + /* Compact icon-only copy button nested inside the cmd box, on the right. */ .home-kinpaku .downloads-rebuild-copy { flex: none; @@ -708,12 +756,20 @@ border-color: var(--card-copy-fg); } +/* Update copy button tracks the patina accent rather than gold. */ +.home-kinpaku .downloads-rebuild-cmd--update .downloads-rebuild-copy { + color: var(--card-prompt-update); +} +.home-kinpaku .downloads-rebuild-cmd--update .downloads-rebuild-copy:hover { + background: oklch(70% 0.12 188 / 0.08); + border-color: var(--card-prompt-update); +} + /* "Other install methods" — a quiet disclosure under the primary command. Native
    so it works without JS and stays accessible. */ .downloads-rebuild-alts { - grid-column: 1 / -1; margin: 2px 0 0; - text-align: center; + text-align: left; } .downloads-rebuild-alts-summary { display: inline-flex; @@ -773,21 +829,25 @@ } .downloads-rebuild-note { - grid-column: 1 / -1; - margin: 0 auto; - max-width: 64ch; - text-align: center; + margin: 0; + max-width: 60ch; + text-align: left; color: var(--card-fg-muted); font-size: 0.88rem; + line-height: 1.55; +} +.home-kinpaku .downloads-rebuild-note code { + font-family: var(--ks-mono); + font-size: 0.86em; + color: var(--card-fg-strong); } /* Quieter than the note — the changelog + FAQ hints sit just under the primary "works with" line. Patina links so they read as related but distinct from the kinpaku primary CTA above. */ .downloads-rebuild-secondary { - grid-column: 1 / -1; margin: 6px 0 0; - text-align: center; + text-align: left; font-size: 0.84rem; color: var(--ks-text-muted); } @@ -803,9 +863,8 @@ /* Closing links under the setup extras — workflow + command docs. */ .downloads-rebuild-more { - margin: 30px auto 0; - max-width: 720px; - text-align: center; + margin: 28px 0 0; + text-align: left; font-size: 0.9rem; color: var(--ks-text-muted); } @@ -821,12 +880,13 @@ .downloads-rebuild-extras { list-style: none; - margin: 0 auto; - padding: 0; + margin: 0; + padding: 40px 0 0; + border-top: 1px solid var(--ks-rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; - max-width: 900px; + max-width: 820px; } /* Each cell is a flex column so primary links can be bottom-anchored. diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css index 249c0fd95..0be289bf2 100644 --- a/site/styles/light-mode.css +++ b/site/styles/light-mode.css @@ -1555,6 +1555,13 @@ html.light .downloads-rebuild-card { --card-link-underline: var(--ks-link-on-paper-line); --card-link-secondary: var(--ks-text-muted); + /* Command-frame accents on paper. Install keeps bright kinpaku; the prompt + glyph drops to the readable kinpaku-ink so it carries on near-white. */ + --card-cmd-border: var(--ks-kinpaku); + --card-prompt: var(--ks-kinpaku-ink); + --card-cmd-border-update: oklch(49% 0.08 188 / 0.6); + --card-prompt-update: var(--ks-patina-deep); + background: var(--ks-lacquer-raised); border: 1px solid var(--ks-rule); box-shadow: 0 24px 60px oklch(25% 0.02 95 / 0.06); @@ -1592,7 +1599,10 @@ html.light .downloads-rebuild-eyebrow { html.light .home-kinpaku .downloads-rebuild-cmd { background: var(--ks-graphite); - border: 1px solid var(--ks-rule); + border: 1px solid var(--card-cmd-border); +} +html.light .home-kinpaku .downloads-rebuild-cmd--update { + border-color: var(--card-cmd-border-update); } html.light .home-kinpaku .downloads-rebuild-cmd--alt {