From b5cd306e707195d61a519b3f3f75fa1056856c6c Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 1 Apr 2026 10:20:38 -0700 Subject: [PATCH] Redesign Get Started section: three-column layout with skills, CLI, and stay updated - Replace sequential steps with three-column grid (skills/CLI/stay updated) - Skills column (step 1) gets visual prominence with wider column and Recommended badge - CLI column (step 2) shows install, subcommands, npm link, Beta badge - Stay updated column (step 3) leads with Substack embed + X follow, quick refs below - Add "Best together" callout matching detection-callout pattern - Unify font sizes and spacing across all columns - Left-align section content to match rest of page - Remove demo-caption background, section divider on wide viewports - Fisheye starts on /clarify for balanced top/bottom - Magazine container gets white background containment on wide viewports - Spread-flow stays on one line (nowrap) - Remove demo-caption background from skill-demos.css Co-Authored-By: Claude Opus 4.6 (1M context) --- public/css/main.css | 353 +++++++++++++++++++------ public/css/skill-demos.css | 1 - public/css/styles.css | 318 ++++++++++++++++------ public/css/workflow.css | 11 +- public/index.html | 110 +++++--- public/js/components/glass-terminal.js | 21 +- 6 files changed, 606 insertions(+), 208 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index ef5e5942f..ca59c95e5 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -2480,123 +2480,312 @@ code { border-top: 1px solid var(--color-mist); } +@media (min-width: 1100px) { + .platforms-section { + border-top: none; + } +} + .platforms-section .section-subtitle { max-width: 60ch; } -/* Install steps layout */ -.install-steps { +/* Two-path install layout */ +.install-paths { + display: grid; + grid-template-columns: 5fr 3fr 3fr; + gap: 0 var(--spacing-xl); + align-items: start; + margin: 0 0 var(--spacing-xl); +} + +.install-path { display: flex; flex-direction: column; - gap: var(--spacing-xl); - max-width: 640px; - margin: 0 auto var(--spacing-xl); } -.install-step-header { - display: flex; - align-items: flex-start; - gap: var(--spacing-md); - margin-bottom: var(--spacing-md); +.install-path:first-child { + border-right: 1px solid var(--color-mist); + padding-right: var(--spacing-xl); } -.install-step-number { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - flex-shrink: 0; - border-radius: 50%; - border: 1.5px solid var(--color-accent); +.install-path-secondary { + border-right: 1px solid var(--color-mist); + padding-right: var(--spacing-xl); +} + +.install-path-label { + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.14em; color: var(--color-accent); +} + +.install-path-secondary .install-path-label { + color: var(--color-ash); +} + +.install-path-title { font-family: var(--font-display); - font-size: 1.125rem; + font-size: 1.5rem; font-weight: 600; - line-height: 1; + margin: var(--spacing-xs) 0 var(--spacing-sm); + line-height: 1.2; } -.install-step-meta { - padding-top: 6px; +/* titles unified - no size override for step 3 */ + +.install-path-badge { + font-family: var(--font-mono); + font-size: 0.5rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-accent); + border: 1px solid var(--color-accent); + border-radius: 3px; + padding: 2px 6px; + vertical-align: middle; + margin-left: 6px; + position: relative; + top: -2px; } -.install-step-title { - font-size: 1.125rem; +.install-path-badge-muted { + color: var(--color-ash); + border-color: var(--color-mist); +} + +.install-path-desc { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--color-charcoal); + margin: 0 0 var(--spacing-md); +} + +/* removed - unified font sizes across columns */ + +.install-path-terminal { + margin-bottom: var(--spacing-sm); +} + +.install-path-terminal .glass-terminal { + height: auto; +} + +.install-path-terminal .terminal-body { + padding: 0; +} + +.install-path-next { + font-size: 0.8125rem; + color: var(--color-charcoal); + line-height: 1.5; + margin-top: auto; + padding-top: var(--spacing-md); +} + +.install-path-next code { + font-family: var(--font-mono); + font-size: 0.8125rem; font-weight: 600; - margin: 0; + color: var(--color-ink); +} + +.install-path-slash { + color: var(--color-accent); +} + +.install-path-subcommands { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: var(--spacing-sm); +} + +.install-path-subcommand { + font-size: 0.75rem; + color: var(--color-charcoal); line-height: 1.4; } -.install-step-desc { - font-size: 0.875rem; +.install-path-subcommand code { + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 600; + color: var(--color-ink); + background: var(--color-mist); + padding: 2px 6px; + border-radius: 3px; + margin-right: 4px; +} + +.install-path-link { + margin-top: auto; + padding-top: var(--spacing-md); + font-size: 0.8125rem; +} + +.install-path-link a { + color: var(--color-accent); + text-decoration: none; +} + +.install-path-link a:hover { + text-decoration: underline; +} + +/* Better together callout */ +.install-together { + max-width: 960px; + margin: 0 0 var(--spacing-xl); + border: 1px solid var(--color-mist); + border-radius: 8px; + padding: var(--spacing-sm) var(--spacing-md); +} + +.install-together-inner { + display: flex; + align-items: center; + gap: var(--spacing-md); +} + +.install-together-badge { + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-accent); + border: 1px solid var(--color-accent); + padding: 2px 10px; + border-radius: 99px; + flex-shrink: 0; + white-space: nowrap; +} + +.install-together-text { + font-size: 0.8125rem; + line-height: 1.55; color: var(--color-ash); - margin: 2px 0 0; + margin: 0; } -/* Subscribe card (step 2) */ -.install-subscribe { - max-width: 640px; - margin: 0 auto; +/* Inline step numbers in path labels */ +.install-path-step { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: 50%; + border: 1.5px solid currentColor; + font-size: 0.5rem; + font-weight: 700; + line-height: 1; + margin-right: 4px; + vertical-align: 1px; } -.install-subscribe iframe { +/* Stay updated (third column) */ +.install-updated-subscribe { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-md); +} + +.install-updated-subscribe iframe { display: block; max-width: 100%; } -.install-subscribe-btn { +.install-updated-x { display: inline-flex; align-items: center; - gap: 10px; - font-size: 0.9375rem; - font-weight: 600; - letter-spacing: 0.03em; - color: var(--color-paper); - text-decoration: none; - padding: 1rem 2rem; - background: var(--color-ink); - border: 1px solid var(--color-ink); - transition: all var(--duration-base) var(--ease-out); - flex-shrink: 0; - position: relative; - overflow: hidden; -} - -.install-subscribe-btn::before { - content: ''; - position: absolute; - inset: 0; - background: var(--color-accent); - transform: translateY(100%); - transition: transform var(--duration-base) var(--ease-out); - z-index: 0; -} - -.install-subscribe-btn:hover::before { - transform: translateY(0); -} - -.install-subscribe-btn svg, -.install-subscribe-btn span { - position: relative; - z-index: 1; -} - -.install-subscribe-btn:hover { - color: var(--color-paper); -} - -.install-subscribe-note { + gap: 6px; font-size: 0.8125rem; - color: var(--color-ash); - margin: 0; - line-height: 1.5; + font-weight: 600; + color: var(--color-ink); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-out); } -@media (max-width: 600px) { - .install-subscribe { - flex-direction: column; - align-items: flex-start; +.install-updated-x:hover { + color: var(--color-accent); +} + +.install-updated-refs { + margin-top: auto; + padding-top: var(--spacing-md); + border-top: 1px solid var(--color-mist); +} + +.install-updated-refs-label { + display: block; + font-family: var(--font-mono); + font-size: 0.5625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-ash); + margin-bottom: 8px; +} + +.install-updated-ref { + display: block; + font-size: 0.8125rem; + color: var(--color-charcoal); + text-decoration: none; + margin-bottom: 6px; + transition: color var(--duration-fast) var(--ease-out); +} + +a.install-updated-ref:hover { + color: var(--color-accent); +} + +.install-updated-ref-terminal { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--color-charcoal); + background: var(--color-cream); + border: 1px solid var(--color-mist); + border-radius: 6px; + padding: 6px 10px; + margin-top: 8px; +} + +.install-updated-ref-terminal .terminal-prompt { + color: var(--color-ash); + font-size: 0.75rem; +} + +.install-updated-ref-terminal code { + font-family: inherit; + font-size: inherit; + background: none; + padding: 0; + color: var(--color-ink); +} + +@media (max-width: 900px) { + .install-paths { + grid-template-columns: 1fr; + gap: var(--spacing-xl); + } + + .install-path:first-child, + .install-path-secondary { + border-right: none; + padding-right: 0; + padding-bottom: var(--spacing-xl); + border-bottom: 1px solid var(--color-mist); } } diff --git a/public/css/skill-demos.css b/public/css/skill-demos.css index df334c6ba..59b9861e6 100644 --- a/public/css/skill-demos.css +++ b/public/css/skill-demos.css @@ -180,7 +180,6 @@ font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--color-ash); - background: var(--color-paper); text-align: center; } diff --git a/public/css/styles.css b/public/css/styles.css index 177d39a04..c5012bef5 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -127,6 +127,13 @@ align-items: start; overflow: hidden; } +@media (min-width: 1100px) { + .magazine-container { + background: white; + border-radius: 16px; + padding: var(--spacing-lg); + } +} .fisheye-list { position: relative; height: 400px; @@ -273,7 +280,7 @@ gap: 6px; flex-wrap: nowrap; margin-top: var(--spacing-xs); - overflow: hidden; + white-space: nowrap; } .spread-flow-label { font-family: var(--font-body); @@ -375,7 +382,6 @@ color: var(--color-ash); text-align: center; padding: var(--spacing-sm) var(--spacing-md); - background: var(--color-paper); } .spread-demo-area .demo-container { flex: 1; @@ -1463,7 +1469,6 @@ font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--color-ash); - background: var(--color-paper); text-align: center; } .uxw-demo { @@ -4371,105 +4376,262 @@ code { padding: var(--spacing-2xl) 0; border-top: 1px solid var(--color-mist); } +@media (min-width: 1100px) { + .platforms-section { + border-top: none; + } +} .platforms-section .section-subtitle { max-width: 60ch; } -.install-steps { +.install-paths { + display: grid; + grid-template-columns: 5fr 3fr 3fr; + gap: 0 var(--spacing-xl); + align-items: start; + margin: 0 0 var(--spacing-xl); +} +.install-path { display: flex; flex-direction: column; - gap: var(--spacing-xl); - max-width: 640px; - margin: 0 auto var(--spacing-xl); } -.install-step-header { - display: flex; - align-items: flex-start; - gap: var(--spacing-md); - margin-bottom: var(--spacing-md); +.install-path:first-child { + border-right: 1px solid var(--color-mist); + padding-right: var(--spacing-xl); } -.install-step-number { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - flex-shrink: 0; - border-radius: 50%; - border: 1.5px solid var(--color-accent); +.install-path-secondary { + border-right: 1px solid var(--color-mist); + padding-right: var(--spacing-xl); +} +.install-path-label { + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.14em; color: var(--color-accent); +} +.install-path-secondary .install-path-label { + color: var(--color-ash); +} +.install-path-title { font-family: var(--font-display); - font-size: 1.125rem; + font-size: 1.5rem; font-weight: 600; - line-height: 1; + margin: var(--spacing-xs) 0 var(--spacing-sm); + line-height: 1.2; } -.install-step-meta { - padding-top: 6px; -} -.install-step-title { - font-size: 1.125rem; +.install-path-badge { + font-family: var(--font-mono); + font-size: 0.5rem; font-weight: 600; - margin: 0; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-accent); + border: 1px solid var(--color-accent); + border-radius: 3px; + padding: 2px 6px; + vertical-align: middle; + margin-left: 6px; + position: relative; + top: -2px; +} +.install-path-badge-muted { + color: var(--color-ash); + border-color: var(--color-mist); +} +.install-path-desc { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--color-charcoal); + margin: 0 0 var(--spacing-md); +} +.install-path-terminal { + margin-bottom: var(--spacing-sm); +} +.install-path-terminal .glass-terminal { + height: auto; +} +.install-path-terminal .terminal-body { + padding: 0; +} +.install-path-next { + font-size: 0.8125rem; + color: var(--color-charcoal); + line-height: 1.5; + margin-top: auto; + padding-top: var(--spacing-md); +} +.install-path-next code { + font-family: var(--font-mono); + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-ink); +} +.install-path-slash { + color: var(--color-accent); +} +.install-path-subcommands { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: var(--spacing-sm); +} +.install-path-subcommand { + font-size: 0.75rem; + color: var(--color-charcoal); line-height: 1.4; } -.install-step-desc { - font-size: 0.875rem; +.install-path-subcommand code { + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 600; + color: var(--color-ink); + background: var(--color-mist); + padding: 2px 6px; + border-radius: 3px; + margin-right: 4px; +} +.install-path-link { + margin-top: auto; + padding-top: var(--spacing-md); + font-size: 0.8125rem; +} +.install-path-link a { + color: var(--color-accent); + text-decoration: none; +} +.install-path-link a:hover { + text-decoration: underline; +} +.install-together { + max-width: 960px; + margin: 0 0 var(--spacing-xl); + border: 1px solid var(--color-mist); + border-radius: 8px; + padding: var(--spacing-sm) var(--spacing-md); +} +.install-together-inner { + display: flex; + align-items: center; + gap: var(--spacing-md); +} +.install-together-badge { + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-accent); + border: 1px solid var(--color-accent); + padding: 2px 10px; + border-radius: 99px; + flex-shrink: 0; + white-space: nowrap; +} +.install-together-text { + font-size: 0.8125rem; + line-height: 1.55; color: var(--color-ash); - margin: 2px 0 0; + margin: 0; } -.install-subscribe { - max-width: 640px; - margin: 0 auto; +.install-path-step { + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: 50%; + border: 1.5px solid currentColor; + font-size: 0.5rem; + font-weight: 700; + line-height: 1; + margin-right: 4px; + vertical-align: 1px; } -.install-subscribe iframe { +.install-updated-subscribe { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-md); +} +.install-updated-subscribe iframe { display: block; max-width: 100%; } -.install-subscribe-btn { +.install-updated-x { display: inline-flex; align-items: center; - gap: 10px; - font-size: 0.9375rem; - font-weight: 600; - letter-spacing: 0.03em; - color: var(--color-paper); - text-decoration: none; - padding: 1rem 2rem; - background: var(--color-ink); - border: 1px solid var(--color-ink); - transition: all var(--duration-base) var(--ease-out); - flex-shrink: 0; - position: relative; - overflow: hidden; -} -.install-subscribe-btn::before { - content: ''; - position: absolute; - inset: 0; - background: var(--color-accent); - transform: translateY(100%); - transition: transform var(--duration-base) var(--ease-out); - z-index: 0; -} -.install-subscribe-btn:hover::before { - transform: translateY(0); -} -.install-subscribe-btn svg, .install-subscribe-btn span { - position: relative; - z-index: 1; -} -.install-subscribe-btn:hover { - color: var(--color-paper); -} -.install-subscribe-note { + gap: 6px; font-size: 0.8125rem; - color: var(--color-ash); - margin: 0; - line-height: 1.5; + font-weight: 600; + color: var(--color-ink); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-out); } -@media (max-width: 600px) { - .install-subscribe { - flex-direction: column; - align-items: flex-start; +.install-updated-x:hover { + color: var(--color-accent); +} +.install-updated-refs { + margin-top: auto; + padding-top: var(--spacing-md); + border-top: 1px solid var(--color-mist); +} +.install-updated-refs-label { + display: block; + font-family: var(--font-mono); + font-size: 0.5625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-ash); + margin-bottom: 8px; +} +.install-updated-ref { + display: block; + font-size: 0.8125rem; + color: var(--color-charcoal); + text-decoration: none; + margin-bottom: 6px; + transition: color var(--duration-fast) var(--ease-out); +} +a.install-updated-ref:hover { + color: var(--color-accent); +} +.install-updated-ref-terminal { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--color-charcoal); + background: var(--color-cream); + border: 1px solid var(--color-mist); + border-radius: 6px; + padding: 6px 10px; + margin-top: 8px; +} +.install-updated-ref-terminal .terminal-prompt { + color: var(--color-ash); + font-size: 0.75rem; +} +.install-updated-ref-terminal code { + font-family: inherit; + font-size: inherit; + background: none; + padding: 0; + color: var(--color-ink); +} +@media (max-width: 900px) { + .install-paths { + grid-template-columns: 1fr; + gap: var(--spacing-xl); + } + .install-path:first-child, .install-path-secondary { + border-right: none; + padding-right: 0; + padding-bottom: var(--spacing-xl); + border-bottom: 1px solid var(--color-mist); } } .install-terminal { diff --git a/public/css/workflow.css b/public/css/workflow.css index 100426ffd..312fbb7f4 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -33,6 +33,14 @@ overflow: hidden; } +@media (min-width: 1100px) { + .magazine-container { + background: white; + border-radius: 16px; + padding: var(--spacing-lg); + } +} + /* Fisheye command list */ .fisheye-list { position: relative; @@ -202,7 +210,7 @@ gap: 6px; flex-wrap: nowrap; margin-top: var(--spacing-xs); - overflow: hidden; + white-space: nowrap; } .spread-flow-label { @@ -320,7 +328,6 @@ color: var(--color-ash); text-align: center; padding: var(--spacing-sm) var(--spacing-md); - background: var(--color-paper); } /* Fallback demo container inside spread */ diff --git a/public/index.html b/public/index.html index c7adbcf9a..7e23a606b 100644 --- a/public/index.html +++ b/public/index.html @@ -247,33 +247,26 @@ - +
04

Get Started

-

Three steps to impeccable design.

-
- -
-
- 1 -
-

Install the skills

-

One command. Every provider.

-
-
+
+ +
+ 1 +

Install the skills Recommended

+

24 commands that steer your AI toward better design, in real time. The full Impeccable experience.

- -
+
- install
@@ -287,12 +280,16 @@
- Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more. Auto-detects your AI harness. + Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more.
+
+ Then run /impeccable teach to set up your project's design context. +
+
Other install methods @@ -348,36 +345,77 @@
- -
-
- 2 -
-

Teach it your design

-

Run once to set up your project's design context.

+ +
+ 2 +

Add the CLI Beta

+

Deterministic anti-pattern detection, cheatsheet and more. Use in CI and beyond.

+ +
+
+
+ + + +
+
+
+
+ $ + npm i -g impeccable + +
+ Or run directly: npx impeccable ... +
+
-
- /impeccable teach + +
+ detect Scan files, dirs, or URLs + skills install Install skills into your project + skills update Update to latest version
+ +

View on npm

- -
-
- 3 -
-

Stay up to date

-

New skills, pattern updates, and design tips.

-
-
- -

Keep the command cheatsheet handy for quick reference. To update skills, run npx skills update.

+ +
+
+ Best together +

Skills give your AI the full design toolkit. The CLI adds automated quality gates for reviews and CI.

+
+
diff --git a/public/js/components/glass-terminal.js b/public/js/components/glass-terminal.js index 926c7235f..dbfb664ab 100644 --- a/public/js/components/glass-terminal.js +++ b/public/js/components/glass-terminal.js @@ -69,15 +69,7 @@ const categoryLabels = { function renderDesktopLayout(container, commands) { magazineState.commands = commands; - // Determine starting index from URL hash - const hash = window.location.hash; - let startIndex = 0; - if (hash && hash.startsWith('#cmd-')) { - const cmdId = hash.slice(5); - const idx = commands.findIndex(c => c.id === cmdId); - if (idx >= 0) startIndex = idx; - } - magazineState.currentIndex = startIndex; + let startIndex = -1; // Filter out deprecated shims, then sort by category const deprecated = new Set(['teach-impeccable', 'frontend-design', 'impeccable']); @@ -106,6 +98,17 @@ function renderDesktopLayout(container, commands) { filteredCommands.push(...orderedCommands); magazineState.commands = filteredCommands; + // Determine starting index: URL hash takes priority, otherwise default to "clarify" + const hash = window.location.hash; + if (hash && hash.startsWith('#cmd-')) { + const idx = filteredCommands.findIndex(c => c.id === hash.slice(5)); + if (idx >= 0) startIndex = idx; + } + if (startIndex < 0) { + startIndex = Math.max(0, filteredCommands.findIndex(c => c.id === 'clarify')); + } + magazineState.currentIndex = startIndex; + // Build spreads HTML (after ordering so indices match fisheye) const spreadsHTML = filteredCommands.map((cmd, i) => renderSpread(cmd, i, i === startIndex)).join('');