From 685728b992e873be2d27cc187cf4cdc104582ae7 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Fri, 27 Mar 2026 13:03:30 -0700 Subject: [PATCH] Redesign install section as two-step flow with Substack newsletter Restructure the Install section into a "Get Started" two-step flow: 1. Install the skills (npx as primary, alternatives collapsible) 2. Stay up to date (embedded Substack subscribe form) - Elevate npx command as the sole primary install method - Collapse Claude Code marketplace and manual ZIP into expandable alternatives - Replace hidden prefix toggle with prominent radio card selector - Download button dynamically updates label based on prefix choice - Add Substack newsletter embed (impeccablestyle.substack.com) - Add newsletter link to footer alongside blog link - Normalize button styles for consistency (square corners for actions) - Add newsletter icon assets (SVG + PNG) for Substack branding Co-Authored-By: Claude Opus 4.6 (1M context) --- public/app.js | 14 + public/assets/newsletter-icon.png | Bin 0 -> 7508 bytes public/assets/newsletter-icon.svg | 18 ++ public/css/main.css | 412 ++++++++++++++++++++++++++---- public/css/styles.css | 358 ++++++++++++++++++++++---- public/css/workflow.css | 1 + public/index.html | 167 +++++++----- 7 files changed, 812 insertions(+), 158 deletions(-) create mode 100644 public/assets/newsletter-icon.png create mode 100644 public/assets/newsletter-icon.svg diff --git a/public/app.js b/public/app.js index 2e2c174b1..2eec178ed 100644 --- a/public/app.js +++ b/public/app.js @@ -227,6 +227,20 @@ function renderPatternsWithTabs(patterns, antipatterns) { // EVENT HANDLERS // ============================================ +// Sync prefix radio buttons to hidden checkbox + update download button label +document.querySelectorAll('input[name="prefix-choice"]').forEach((radio) => { + radio.addEventListener('change', () => { + const prefixToggle = document.getElementById('prefix-toggle'); + if (prefixToggle) prefixToggle.checked = radio.value === 'prefixed'; + const btnLabel = document.querySelector('#download-zip-btn span'); + if (btnLabel) { + btnLabel.textContent = radio.value === 'prefixed' + ? 'Download prefixed zip' + : 'Download universal zip'; + } + }); +}); + // Handle bundle download clicks via event delegation document.addEventListener("click", (e) => { const bundleBtn = e.target.closest("[data-bundle]"); diff --git a/public/assets/newsletter-icon.png b/public/assets/newsletter-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..6303313977f2f3955fd398f833949e97b0c77550 GIT binary patch literal 7508 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 CgfT?` literal 0 HcmV?d00001 diff --git a/public/assets/newsletter-icon.svg b/public/assets/newsletter-icon.svg new file mode 100644 index 000000000..ea1469319 --- /dev/null +++ b/public/assets/newsletter-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + / + diff --git a/public/css/main.css b/public/css/main.css index ea3380b3c..dea465a7d 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -2184,10 +2184,126 @@ code { max-width: 60ch; } +/* Install steps layout */ +.install-steps { + 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-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); + color: var(--color-accent); + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 600; + line-height: 1; +} + +.install-step-meta { + padding-top: 6px; +} + +.install-step-title { + font-size: 1.125rem; + font-weight: 600; + margin: 0; + line-height: 1.4; +} + +.install-step-desc { + font-size: 0.875rem; + color: var(--color-ash); + margin: 2px 0 0; +} + +/* Subscribe card (step 2) */ +.install-subscribe { + max-width: 640px; + margin: 0 auto; +} + +.install-subscribe iframe { + display: block; + max-width: 100%; +} + +.install-subscribe-btn { + 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 { + font-size: 0.8125rem; + color: var(--color-ash); + margin: 0; + line-height: 1.5; +} + +@media (max-width: 600px) { + .install-subscribe { + flex-direction: column; + align-items: flex-start; + } +} + /* Install terminal (glass terminal style) */ .install-terminal { max-width: 640px; - margin: 0 auto var(--spacing-xl); + margin: 0 auto; } .install-terminal .glass-terminal { @@ -2314,88 +2430,276 @@ code { border-radius: 4px; } -/* Prefix toggle (inline with download button) */ -.install-terminal-cmd--download { +/* Install alternatives (collapsible) */ +.install-alternatives { + max-width: 640px; + margin: var(--spacing-sm) auto 0; +} + +.install-alternatives-toggle { + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-ash); + cursor: pointer; + padding: var(--spacing-sm) 0; + list-style: none; display: flex; align-items: center; - gap: var(--spacing-sm); - flex-wrap: wrap; + gap: 6px; + transition: color var(--duration-fast) var(--ease-out); } -.prefix-toggle { - display: inline-flex; - align-items: center; - gap: 8px; - cursor: pointer; - padding: 6px 12px; - background: rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 6px; - transition: border-color var(--duration-fast) var(--ease-out); +.install-alternatives-toggle::-webkit-details-marker { + display: none; } -.prefix-toggle:hover { - border-color: rgba(0, 0, 0, 0.2); -} - -.prefix-toggle input { - position: absolute; - opacity: 0; +.install-alternatives-toggle::before { + content: ''; + display: inline-block; width: 0; height: 0; -} - -.prefix-toggle-slider { - position: relative; - width: 32px; - height: 18px; - background: var(--color-mist); - border-radius: 18px; - transition: background var(--duration-fast) var(--ease-out); - flex-shrink: 0; -} - -.prefix-toggle-slider::after { - content: ''; - position: absolute; - top: 2px; - left: 2px; - width: 14px; - height: 14px; - background: var(--color-paper); - border-radius: 50%; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + border-left: 5px solid currentColor; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; transition: transform var(--duration-fast) var(--ease-out); } -.prefix-toggle input:checked + .prefix-toggle-slider { +.install-alternatives[open] .install-alternatives-toggle::before { + transform: rotate(90deg); +} + +.install-alternatives-toggle:hover { + color: var(--color-charcoal); +} + +.install-alternatives-content { + border: 1px solid var(--color-mist); + border-radius: 8px; + background: var(--color-paper); + overflow: hidden; + animation: altFadeIn 0.2s var(--ease-out); +} + +@keyframes altFadeIn { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: translateY(0); } +} + +.install-alt-method { + padding: var(--spacing-md) var(--spacing-lg); +} + +.install-alt-label { + display: block; + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-ash); + margin-bottom: 6px; +} + +.install-alt-method .install-terminal-cmd { + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.install-alt-method .terminal-prompt { + color: var(--color-accent); + font-family: var(--font-mono); + font-weight: bold; + user-select: none; +} + +.install-alt-method code { + font-family: var(--font-mono); + font-size: 0.875rem; + color: var(--color-ink); +} + +.install-alt-note { + display: block; + font-size: 0.75rem; + color: var(--color-ash); + margin-top: 4px; +} + +.install-alt-note code { + font-family: var(--font-mono); + font-size: 0.6875rem; + background: var(--color-mist); + padding: 2px 5px; + border-radius: 3px; + color: var(--color-ink); +} + +.install-alt-download { + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.install-alt-divider { + height: 1px; + background: var(--color-mist); +} + +.install-prefix-options { + display: flex; + align-items: flex-start; + gap: var(--spacing-sm); + margin-top: var(--spacing-md); +} + +.install-prefix-option { + flex: 1; + display: flex; + align-items: flex-start; + gap: 8px; + padding: 10px 12px; + border: 1.5px solid var(--color-mist); + border-radius: 8px; + cursor: pointer; + transition: all var(--duration-fast) var(--ease-out); + line-height: 1; +} + +.install-prefix-option:hover { + border-color: var(--color-charcoal); +} + +.install-prefix-option:has(input:checked) { + border-color: var(--color-accent); +} + +.install-prefix-option input { + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + border: 1.5px solid var(--color-mist); + border-radius: 50%; + flex-shrink: 0; + margin: 0; + transition: all var(--duration-fast) var(--ease-out); + position: relative; +} + +.install-prefix-option input:checked { + border-color: var(--color-accent); background: var(--color-accent); } -.prefix-toggle input:checked + .prefix-toggle-slider::after { - transform: translateX(14px); +.install-prefix-option input:checked::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 6px; + height: 6px; + background: var(--color-paper); + border-radius: 50%; } -.prefix-toggle input:focus-visible + .prefix-toggle-slider { +.install-prefix-option input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } -.prefix-toggle-label { - font-size: 0.75rem; - color: var(--color-charcoal); - white-space: nowrap; +.install-prefix-option-content { + display: flex; + flex-direction: column; + gap: 3px; + padding-top: 1px; } -.prefix-toggle-label code { +.install-prefix-option-label { + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-ink); + line-height: 1; +} + +.install-prefix-option-examples { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.install-prefix-option-examples code { font-family: var(--font-mono); font-size: 0.6875rem; background: var(--color-accent-dim); color: var(--color-accent); - padding: 1px 4px; + padding: 2px 6px; border-radius: 3px; } +.install-prefix-option-wrap { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + align-self: flex-start; +} + +.install-prefix-reason { + font-size: 0.6875rem; + color: var(--color-ash); + line-height: 1.4; + padding-left: 2px; +} + +.install-prefix-option-label code { + font-family: var(--font-mono); + font-size: 0.6875rem; + background: var(--color-accent-dim); + color: var(--color-accent); + padding: 1px 5px; + border-radius: 3px; +} + +.install-alt-method .install-prefix-options { + margin-top: var(--spacing-sm); +} + +.install-alt-method .install-alt-download { + margin-top: var(--spacing-sm); +} + +/* Hidden prefix checkbox for download logic */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +@media (max-width: 600px) { + .install-prefix-options { + flex-direction: column; + } + + .install-alt-method { + padding: var(--spacing-sm) var(--spacing-md); + } + + .install-alt-method code { + font-size: 0.75rem; + } +} + /* Tooltips */ .has-tooltip { position: relative; diff --git a/public/css/styles.css b/public/css/styles.css index 43222f635..910b3cec8 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -3814,10 +3814,108 @@ code { .platforms-section .section-subtitle { max-width: 60ch; } -.install-terminal { +.install-steps { + 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-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); + color: var(--color-accent); + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 600; + line-height: 1; +} +.install-step-meta { + padding-top: 6px; +} +.install-step-title { + font-size: 1.125rem; + font-weight: 600; + margin: 0; + line-height: 1.4; +} +.install-step-desc { + font-size: 0.875rem; + color: var(--color-ash); + margin: 2px 0 0; +} +.install-subscribe { + max-width: 640px; + margin: 0 auto; +} +.install-subscribe iframe { + display: block; + max-width: 100%; +} +.install-subscribe-btn { + 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 { + font-size: 0.8125rem; + color: var(--color-ash); + margin: 0; + line-height: 1.5; +} +@media (max-width: 600px) { + .install-subscribe { + flex-direction: column; + align-items: flex-start; + } +} +.install-terminal { + max-width: 640px; + margin: 0 auto; +} .install-terminal .glass-terminal { height: auto; } @@ -3922,76 +4020,242 @@ code { .install-provider-badge img { border-radius: 4px; } -.install-terminal-cmd--download { +.install-alternatives { + max-width: 640px; + margin: var(--spacing-sm) auto 0; +} +.install-alternatives-toggle { + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-ash); + cursor: pointer; + padding: var(--spacing-sm) 0; + list-style: none; + display: flex; + align-items: center; + gap: 6px; + transition: color var(--duration-fast) var(--ease-out); +} +.install-alternatives-toggle::-webkit-details-marker { + display: none; +} +.install-alternatives-toggle::before { + content: ''; + display: inline-block; + width: 0; + height: 0; + border-left: 5px solid currentColor; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + transition: transform var(--duration-fast) var(--ease-out); +} +.install-alternatives[open] .install-alternatives-toggle::before { + transform: rotate(90deg); +} +.install-alternatives-toggle:hover { + color: var(--color-charcoal); +} +.install-alternatives-content { + border: 1px solid var(--color-mist); + border-radius: 8px; + background: var(--color-paper); + overflow: hidden; + animation: altFadeIn 0.2s var(--ease-out); +} +@keyframes altFadeIn { + from { + opacity: 0; + transform: translateY(-4px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +.install-alt-method { + padding: var(--spacing-md) var(--spacing-lg); +} +.install-alt-label { + display: block; + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-ash); + margin-bottom: 6px; +} +.install-alt-method .install-terminal-cmd { display: flex; align-items: center; gap: var(--spacing-sm); - flex-wrap: wrap; } -.prefix-toggle { - display: inline-flex; - align-items: center; - gap: 8px; - cursor: pointer; - padding: 6px 12px; - background: rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 6px; - transition: border-color var(--duration-fast) var(--ease-out); +.install-alt-method .terminal-prompt { + color: var(--color-accent); + font-family: var(--font-mono); + font-weight: bold; + user-select: none; } -.prefix-toggle:hover { - border-color: rgba(0, 0, 0, 0.2); +.install-alt-method code { + font-family: var(--font-mono); + font-size: 0.875rem; + color: var(--color-ink); } -.prefix-toggle input { - position: absolute; - opacity: 0; - width: 0; - height: 0; +.install-alt-note { + display: block; + font-size: 0.75rem; + color: var(--color-ash); + margin-top: 4px; } -.prefix-toggle-slider { - position: relative; - width: 32px; - height: 18px; +.install-alt-note code { + font-family: var(--font-mono); + font-size: 0.6875rem; background: var(--color-mist); - border-radius: 18px; - transition: background var(--duration-fast) var(--ease-out); - flex-shrink: 0; + padding: 2px 5px; + border-radius: 3px; + color: var(--color-ink); } -.prefix-toggle-slider::after { - content: ''; - position: absolute; - top: 2px; - left: 2px; - width: 14px; - height: 14px; - background: var(--color-paper); +.install-alt-download { + display: flex; + align-items: center; + gap: var(--spacing-sm); +} +.install-alt-divider { + height: 1px; + background: var(--color-mist); +} +.install-prefix-options { + display: flex; + align-items: flex-start; + gap: var(--spacing-sm); + margin-top: var(--spacing-md); +} +.install-prefix-option { + flex: 1; + display: flex; + align-items: flex-start; + gap: 8px; + padding: 10px 12px; + border: 1.5px solid var(--color-mist); + border-radius: 8px; + cursor: pointer; + transition: all var(--duration-fast) var(--ease-out); + line-height: 1; +} +.install-prefix-option:hover { + border-color: var(--color-charcoal); +} +.install-prefix-option:has(input:checked) { + border-color: var(--color-accent); +} +.install-prefix-option input { + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + border: 1.5px solid var(--color-mist); border-radius: 50%; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); - transition: transform var(--duration-fast) var(--ease-out); + flex-shrink: 0; + margin: 0; + transition: all var(--duration-fast) var(--ease-out); + position: relative; } -.prefix-toggle input:checked + .prefix-toggle-slider { +.install-prefix-option input:checked { + border-color: var(--color-accent); background: var(--color-accent); } -.prefix-toggle input:checked + .prefix-toggle-slider::after { - transform: translateX(14px); +.install-prefix-option input:checked::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 6px; + height: 6px; + background: var(--color-paper); + border-radius: 50%; } -.prefix-toggle input:focus-visible + .prefix-toggle-slider { +.install-prefix-option input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } -.prefix-toggle-label { - font-size: 0.75rem; - color: var(--color-charcoal); - white-space: nowrap; +.install-prefix-option-content { + display: flex; + flex-direction: column; + gap: 3px; + padding-top: 1px; } -.prefix-toggle-label code { +.install-prefix-option-label { + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-ink); + line-height: 1; +} +.install-prefix-option-examples { + display: flex; + flex-wrap: wrap; + gap: 4px; +} +.install-prefix-option-examples code { font-family: var(--font-mono); font-size: 0.6875rem; background: var(--color-accent-dim); color: var(--color-accent); - padding: 1px 4px; + padding: 2px 6px; border-radius: 3px; } +.install-prefix-option-wrap { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + align-self: flex-start; +} +.install-prefix-reason { + font-size: 0.6875rem; + color: var(--color-ash); + line-height: 1.4; + padding-left: 2px; +} +.install-prefix-option-label code { + font-family: var(--font-mono); + font-size: 0.6875rem; + background: var(--color-accent-dim); + color: var(--color-accent); + padding: 1px 5px; + border-radius: 3px; +} +.install-alt-method .install-prefix-options { + margin-top: var(--spacing-sm); +} +.install-alt-method .install-alt-download { + margin-top: var(--spacing-sm); +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +@media (max-width: 600px) { + .install-prefix-options { + flex-direction: column; + } + .install-alt-method { + padding: var(--spacing-sm) var(--spacing-md); + } + .install-alt-method code { + font-size: 0.75rem; + } +} .has-tooltip { position: relative; cursor: default; diff --git a/public/css/workflow.css b/public/css/workflow.css index f09b7b281..f75d90171 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -830,6 +830,7 @@ animation: faqFadeIn 0.3s var(--ease-out); } + /* ============================================ FAQ SECTION ============================================ */ diff --git a/public/index.html b/public/index.html index e0d567124..6947f2b94 100644 --- a/public/index.html +++ b/public/index.html @@ -208,74 +208,119 @@
04 -

Install

-

One command. Every provider.

+

Get Started

+

Two steps to impeccable design.

- -
-
-
- - - - install +
+ +
+
+ 1 +
+

Install the skills

+

One command. Every provider.

+
-
-
- All tools -
- $ - npx skills add pbakaus/impeccable - + + +
+
+
+ + + + install
- Auto-detects your AI harness and installs to the right location -
-
-
- Claude Code -
- $ - /plugin marketplace add pbakaus/impeccable - +
+
+
+ $ + npx skills add pbakaus/impeccable + +
+ Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more. Auto-detects your AI harness. +
- Then open /plugin to install from Discover tab
-
-
- Manual -
- - +
+ + +
+ Other install methods +
+
+ Claude Code plugin +
+ $ + /plugin marketplace add pbakaus/impeccable + +
+ Then open /plugin to install from Discover tab +
+
+
+ Manual download + Contains all provider directories. Extract to your project root. +
+ +
+ + Avoids conflicts with built-in commands or other skill packs +
+
+
+ +
+
- Contains all provider directories — extract to project root
+
+
+ + +
+
+ 2 +
+

Stay up to date

+

New skills, pattern updates, and design tips.

+
+
+
-

Once installed, keep the command cheatsheet handy for quick reference. To update, run npx skills update.

+

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

@@ -379,6 +424,7 @@ + @@ -490,7 +536,14 @@ - Renaissance Geek + Blog + + + + + Newsletter