mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
refine(site): restructure "Get Started" around the skill first
Step 1 is now skill-only (the outdated "powers visual mode" claim and the global CLI install are gone). Chrome extension stays at step 3, the CLI moves to a new optional step 4 with a link to npm, and "Stay updated" shifts to step 5. Step 2 collapses its three numbered sub-steps into a compact command/caption table so the "Use it" panel matches step 1's height instead of towering over it. Also: keep code chips and the npm link on one line each (nowrap) so the caption wraps only on natural prose. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
2658baa461
commit
d60de0fb97
@@ -2943,6 +2943,78 @@ code {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Compact 3-row "try it" table. Replaces the numbered sub-steps
|
||||
inside step 2 to condense vertical height. Each row: mono command
|
||||
example + one-line caption. Collapses to stacked on narrow screens. */
|
||||
.install-howto-rows {
|
||||
margin: var(--spacing-lg) 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.install-howto-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
|
||||
gap: var(--spacing-md);
|
||||
align-items: baseline;
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
}
|
||||
|
||||
.install-howto-row:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.install-howto-row:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.install-howto-row dt {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.install-howto-row dt code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink);
|
||||
background: var(--color-accent-dim);
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.install-howto-row dd {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.55;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.install-howto-row dd code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8125em;
|
||||
background: var(--color-mist);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--color-ink);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.install-howto-row .install-path-slash {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.install-howto-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.install-howto-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -3432,6 +3504,7 @@ code {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-ash);
|
||||
line-height: 1.5;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.install-cmd-note code {
|
||||
@@ -3441,6 +3514,11 @@ code {
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--color-ink);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.install-cmd-note a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
+43
-31
@@ -698,8 +698,8 @@
|
||||
<div class="install-row-primary" data-reveal>
|
||||
<!-- Left: Install the skill and CLI -->
|
||||
<div class="install-primary-main">
|
||||
<h3 class="install-path-title"><span class="install-path-step">1</span>Install the skill and CLI</h3>
|
||||
<p class="install-path-desc">One agent skill that teaches your AI to design, with 23 commands bundled inside. Plus the CLI that powers visual mode and scans files outside the skill.</p>
|
||||
<h3 class="install-path-title"><span class="install-path-step">1</span>Install the skill</h3>
|
||||
<p class="install-path-desc">One agent skill that teaches your AI to design, with 23 commands bundled inside. Works in every major AI coding harness.</p>
|
||||
|
||||
<div class="install-path-terminal">
|
||||
<div class="glass-terminal">
|
||||
@@ -722,19 +722,6 @@
|
||||
</div>
|
||||
<span class="install-terminal-note">Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more.</span>
|
||||
</div>
|
||||
<div class="install-terminal-row">
|
||||
<div class="install-terminal-cmd">
|
||||
<span class="terminal-prompt">$</span>
|
||||
<code>npm i -g impeccable</code>
|
||||
<button class="copy-btn" aria-label="Copy command" data-copy="npm i -g impeccable">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span class="install-terminal-note">Recommended for visual mode and anti-pattern scans.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -779,20 +766,20 @@
|
||||
<h3 class="install-path-title"><span class="install-path-step">2</span>Use it</h3>
|
||||
<p class="install-path-desc">Impeccable gives you a shared design vocabulary with your AI. 23 commands (<em>polish</em>, <em>audit</em>, <em>critique</em>, <em>typeset</em>, and more) that each encode a specific design discipline, so you can steer with precision.</p>
|
||||
|
||||
<ol class="install-howto-steps">
|
||||
<li>
|
||||
<div class="install-howto-step-label">Let it think for you</div>
|
||||
<p>Say <code><span class="install-path-slash">/</span>impeccable redo this hero section</code> and let the skill pick the right approach. No command names to memorize.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="install-howto-step-label">Or steer directly</div>
|
||||
<p>Type <code><span class="install-path-slash">/</span>impeccable</code> alone to see the full vocabulary, or reach for a command by name: <code><span class="install-path-slash">/</span>impeccable audit checkout</code>, <code><span class="install-path-slash">/</span>impeccable polish pricing</code>, <code><span class="install-path-slash">/</span>impeccable critique onboarding</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="install-howto-step-label">Pin your favorites</div>
|
||||
<p>Use one all the time? <code><span class="install-path-slash">/</span>impeccable pin audit</code> gives you <code><span class="install-path-slash">/</span>audit</code> as a standalone shortcut.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<dl class="install-howto-rows">
|
||||
<div class="install-howto-row">
|
||||
<dt><code><span class="install-path-slash">/</span>impeccable redo this hero</code></dt>
|
||||
<dd>Let the skill pick the approach. No names to memorize.</dd>
|
||||
</div>
|
||||
<div class="install-howto-row">
|
||||
<dt><code><span class="install-path-slash">/</span>impeccable audit checkout</code></dt>
|
||||
<dd>Reach for a command by name. Type <code><span class="install-path-slash">/</span>impeccable</code> alone to see all 23.</dd>
|
||||
</div>
|
||||
<div class="install-howto-row">
|
||||
<dt><code><span class="install-path-slash">/</span>impeccable pin audit</code></dt>
|
||||
<dd>Pin your favorites. <code><span class="install-path-slash">/</span>audit</code> becomes a standalone shortcut.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="install-howto-footer">
|
||||
<a href="/tutorials/getting-started" class="install-howto-link">Full walkthrough <span aria-hidden="true">→</span></a>
|
||||
@@ -824,10 +811,35 @@
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Step 4: Stay updated -->
|
||||
<!-- Step 4: Install the CLI -->
|
||||
<details name="install-steps" class="install-step">
|
||||
<summary class="install-step-summary">
|
||||
<h3 class="install-path-title"><span class="install-path-step">4</span>Stay updated</h3>
|
||||
<h3 class="install-path-title"><span class="install-path-step">4</span>Install the CLI <span class="install-path-badge install-path-badge-muted">Optional</span></h3>
|
||||
<svg class="install-step-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
|
||||
</summary>
|
||||
<div class="install-step-body">
|
||||
<p class="install-path-desc">Run anti-pattern scans outside the skill: in CI, in a PR check, or against a whole directory. 25 deterministic rules, no LLM required, JSON output ready for build gates.</p>
|
||||
|
||||
<div class="install-cmd-block">
|
||||
<div class="install-cmd-line">
|
||||
<span class="terminal-prompt">$</span>
|
||||
<code>npm i -g impeccable</code>
|
||||
<button class="copy-btn" aria-label="Copy command" data-copy="npm i -g impeccable">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span class="install-cmd-note">Then <code>impeccable detect src/</code> to scan a project, or <code>npx impeccable detect</code> without installing. <a href="https://www.npmjs.com/package/impeccable" target="_blank" rel="noopener">View on npm →</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Step 5: Stay updated -->
|
||||
<details name="install-steps" class="install-step">
|
||||
<summary class="install-step-summary">
|
||||
<h3 class="install-path-title"><span class="install-path-step">5</span>Stay updated</h3>
|
||||
<svg class="install-step-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
|
||||
</summary>
|
||||
<div class="install-step-body">
|
||||
|
||||
Reference in New Issue
Block a user