mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 16:46:31 +03:00
Rework Get started section: add update instructions, fix layout rhythm
Closes the documentation gap from #177: how to update an installed version was nowhere on the site. Install and Update now sit as paired, equally-visible commands, with `npx impeccable skills check` and the Claude Code `/plugin` path called out alongside. Also a full pass on the section's composition: - Commit to left-aligned asymmetry so content has one spine and the gold seam owns the right edge, instead of floating left-of-center - Make the install command pop: bright kinpaku frame + gold `$` prompt + left-aligned mono so it reads as a runnable line, not a decorative chip. Update box mirrors it one notch quieter in patina (the "updated" state) - Group install/update/alternatives tightly, rule off the secondary surfaces, drop the duplicate "Get started:" closing label - Repurpose the "Stay updated" cell to "Follow along" so it stops colliding with the real Update command FAQ already had a strong #update entry; added the `skills check` companion for parity. Getting-started tutorial gains a short update note after Step 1. Both themes synced. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
c8e973b324
commit
4e985f68c0
@@ -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.
|
||||
|
||||
@@ -29,7 +29,7 @@ import '../styles/changelog-faq-kinpaku.css';
|
||||
<details id="update" class="cf-faq-item">
|
||||
<summary class="cf-faq-question">How do I update to the latest version?</summary>
|
||||
<div class="cf-faq-answer">
|
||||
<p>Run <code>npx impeccable skills update</code> from your project root. It downloads the latest skills, cleans up deprecated files, and preserves any prefix you use.</p>
|
||||
<p>Run <code>npx impeccable skills update</code> from your project root. It downloads the latest skills, cleans up deprecated files, and preserves any prefix you use. Not sure you're behind? <code>npx impeccable skills check</code> compares what you have installed against the latest release first.</p>
|
||||
<ul>
|
||||
<li><strong>Reinstall:</strong> <code>npx impeccable skills install --force</code> installs fresh.</li>
|
||||
<li><strong>Claude Code plugin:</strong> Open <code>/plugin</code> in Claude Code.</li>
|
||||
|
||||
+34
-14
@@ -589,17 +589,37 @@ import '../styles/testimonials.css';
|
||||
</div>
|
||||
|
||||
<div class="downloads-rebuild-install">
|
||||
<div class="downloads-rebuild-cmd">
|
||||
<code>npx impeccable skills install</code>
|
||||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy install command" data-copy="npx impeccable skills install">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||||
</svg>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
<div class="downloads-rebuild-cmd-group">
|
||||
<span class="downloads-rebuild-cmd-label">Install</span>
|
||||
<div class="downloads-rebuild-cmd">
|
||||
<span class="downloads-rebuild-prompt" aria-hidden="true">$</span>
|
||||
<code>npx impeccable skills install</code>
|
||||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy install command" data-copy="npx impeccable skills install">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||||
</svg>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="downloads-rebuild-note">Installs the build compiled for your harness. Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other major AI coding harness.</p>
|
||||
|
||||
<div class="downloads-rebuild-cmd-group">
|
||||
<span class="downloads-rebuild-cmd-label downloads-rebuild-cmd-label--update">Update</span>
|
||||
<div class="downloads-rebuild-cmd downloads-rebuild-cmd--update">
|
||||
<span class="downloads-rebuild-prompt" aria-hidden="true">$</span>
|
||||
<code>npx impeccable skills update</code>
|
||||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy update command" data-copy="npx impeccable skills update">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||||
</svg>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="downloads-rebuild-note">Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other major AI coding harness. <code>install</code> sets up the build for your harness; <code>update</code> pulls the latest. Run <code>npx impeccable skills check</code> to see if you're behind. Installed the Claude Code plugin? Update it from the <code>/plugin</code> menu instead.</p>
|
||||
|
||||
<details class="downloads-rebuild-alts">
|
||||
<summary class="downloads-rebuild-alts-summary">
|
||||
@@ -654,14 +674,14 @@ import '../styles/testimonials.css';
|
||||
<a href="https://www.npmjs.com/package/impeccable" target="_blank" rel="noopener">View on npm →</a>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Stay updated</strong>
|
||||
<span>New commands, new anti-patterns, and the design thinking behind them. Subscribe to the Substack, or follow along on X.</span>
|
||||
<a href="https://impeccablestyle.substack.com" target="_blank" rel="noopener" class="downloads-rebuild-link-primary">Subscribe on Substack →</a>
|
||||
<strong>Follow along</strong>
|
||||
<span>The design thinking behind new commands and anti-patterns, in long form. Read the newsletter, or catch the shorter notes on X.</span>
|
||||
<a href="https://impeccablestyle.substack.com" target="_blank" rel="noopener" class="downloads-rebuild-link-primary">Read the newsletter →</a>
|
||||
<a href="https://x.com/impeccable_ai" target="_blank" rel="noopener" class="downloads-rebuild-link-secondary">Follow @impeccable_ai on X →</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="downloads-rebuild-more">Get started: <a href="/designing">Designing with Impeccable</a> · <a href="/docs">the command docs</a></p>
|
||||
<p class="downloads-rebuild-more">Learn more: <a href="/designing">Designing with Impeccable</a> · <a href="/docs">the command docs</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -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 <details> 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.
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user