skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Polish live mode and slop pages

Browse Source
This commit is contained in:
Paul Bakaus
2026-06-17 17:38:07 +09:00
parent c7539c867d
commit 617b3a6e5e
5 changed files with 181 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/pages/live-mode/index.astro
+14 -15
View File
@@ -17,8 +17,7 @@ import '../../styles/live-mode-kinpaku.css';
<div class="live-mode-page">
<header class="live-mode-page-header">
<p class="live-mode-page-eyebrow">New in v3.0 <span class="live-mode-page-eyebrow-badge">Beta</span></p>
<h1 class="live-mode-page-title">Live Mode</h1>
<h1 class="live-mode-page-title">Live Mode <span class="live-mode-page-title-badge">Beta</span></h1>
<p class="live-mode-page-lede">Pick any element in the browser. Drop a comment or a stroke. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.</p>
<div class="live-mode-start" aria-label="Start live mode command">
<span class="live-mode-start-prompt">$</span>
@@ -181,11 +180,11 @@ import '../../styles/live-mode-kinpaku.css';
<span class="live-mode-stage-num">02 &middot; Generate</span>
<h3 class="live-mode-stage-name">Three genuinely different takes</h3>
<p class="live-mode-stage-desc">Variants anchor to different archetypes, not three riffs on color. Each one explores a different primary axis: hierarchy, typography, density, layout, or palette strategy.</p>
<div class="live-mode-stage-viz">
<div class="docs-viz-variants" style="width:100%;gap:4px">
<div class="docs-viz-variant docs-viz-variant--v1" style="min-height:44px;padding:6px"><span class="docs-viz-variant-kicker" style="font-size:8px">No.04</span></div>
<div class="docs-viz-variant docs-viz-variant--v2 is-active" style="min-height:44px;padding:6px"><span class="docs-viz-variant-kicker" style="font-size:8px">Dispatch</span></div>
<div class="docs-viz-variant docs-viz-variant--v3" style="min-height:44px;padding:6px"><span class="docs-viz-variant-kicker" style="font-size:8px">Field</span></div>
<div class="live-mode-stage-viz live-mode-stage-viz--rail">
<div class="viz-rail">
<div class="viz-rail-cell"><span>No.04</span><span class="viz-rail-mark"></span></div>
<div class="viz-rail-cell is-active"><span>Dispatch</span><span class="viz-rail-mark"></span></div>
<div class="viz-rail-cell"><span>Field</span><span class="viz-rail-mark"></span></div>
</div>
</div>
</article>
@@ -226,14 +225,14 @@ import '../../styles/live-mode-kinpaku.css';
<section class="live-mode-frameworks" aria-label="Supported frameworks">
<span class="live-mode-frameworks-label">Supported dev servers</span>
<ul class="live-mode-frameworks-list">
<li>Vite</li>
<li>Next.js (incl. monorepos)</li>
<li>SvelteKit</li>
<li>Astro</li>
<li>Nuxt</li>
<li>Bun</li>
<li>Plain static HTML</li>
<ul class="live-mode-frameworks-list framework-list--matrix">
<li><small>bundler</small><strong>Vite</strong></li>
<li><small>apps</small><strong>Next.js</strong></li>
<li><small>apps</small><strong>SvelteKit</strong></li>
<li><small>pages</small><strong>Astro</strong></li>
<li><small>apps</small><strong>Nuxt</strong></li>
<li><small>runtime</small><strong>Bun</strong></li>
<li><small>static</small><strong>Plain HTML</strong></li>
</ul>
</section>
</div>
site/pages/slop/index.astro
+1 -2
View File
@@ -47,7 +47,6 @@ import '../../styles/slop-kinpaku.css';
<div class="anti-patterns-content slop-content">
<header class="anti-patterns-header slop-header">
<p class="sub-page-eyebrow">The visible tells of AI design</p>
<h1 class="sub-page-title">Slop</h1>
<p class="sub-page-lede">46 patterns that mark an interface as AI-generated, and the detection overlay that catches them in place. Watch it flag them live, try it on 11 synthetic specimens, or browse the full catalog. 41 rules run deterministically (<code>npx impeccable detect</code> or the browser extension), 4 of them opt-in provider tells behind <code>--gpt</code> / <code>--gemini</code>; 5 need <a href="/docs/critique">/impeccable critique</a>'s LLM review pass.</p>
</header>
@@ -56,7 +55,7 @@ import '../../styles/slop-kinpaku.css';
<h2 class="slop-section-heading">See it</h2>
<div class="slop-then-now-intro">
<p class="slop-then-now-lede">Every wave of AI-generated UIs converges on a recognizable aesthetic. The detector catches both. The patterns just change.</p>
<div class="slop-era-toggle" role="tablist" aria-label="Select slop era">
<div class="slop-era-toggle slop-era-toggle--ink" role="tablist" aria-label="Select slop era">
<button class="slop-era-tab is-active" role="tab" aria-selected="true" data-era="2022">2022</button>
<button class="slop-era-tab" role="tab" aria-selected="false" data-era="2026">2026</button>
</div>
site/styles/light-mode.css
+22 -7
View File
@@ -776,6 +776,17 @@ html.light .slop-kinpaku .slop-layer {
border-color: var(--ks-rule);
}
html.light .slop-kinpaku .gallery-card:hover,
html.light .slop-kinpaku .rule-card:hover {
background: var(--ks-lacquer-raised);
border-color: oklch(49% 0.08 188 / 0.34);
}
html.light .slop-kinpaku .gallery-card:hover .gallery-card-title,
html.light .slop-kinpaku .rule-card:hover .rule-card-name {
color: var(--ks-champagne);
}
html.light .live-mode-kinpaku .live-mode-hero-panel,
html.light .live-mode-kinpaku .live-mode-step {
background: var(--ks-lacquer-raised);
@@ -1216,15 +1227,10 @@ html.light .docs-kinpaku .prose .docs-viz-flow-step + .docs-viz-flow-step::befor
color: var(--docs-accent);
}
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker,
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill {
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker {
color: var(--ks-kinpaku-ink);
}
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill {
border-color: var(--ks-kinpaku-deep);
}
/* Docs command demos — light surfaces (divider fix lives in docs-kinpaku.css) */
html.light .docs-kinpaku .docs-command-demo .split-container {
background:
@@ -1271,7 +1277,7 @@ html.light .site-header-github-star {
}
html.light .slop-kinpaku .skills-sidebar {
background: var(--ks-lacquer-raised);
background: transparent;
border-color: var(--ks-rule);
}
@@ -1607,6 +1613,15 @@ html.light .slop-kinpaku .slop-catalog-lede a:hover {
border-bottom-color: var(--ks-link-on-paper-hover);
}
html.light .slop-kinpaku :is(
.sub-page-lede,
.anti-patterns-legend-body,
.visual-mode-method-name,
.visual-mode-method-desc
) code {
background: oklch(25% 0.02 95 / 0.08);
}
html.light .cf-items a,
html.light .cf-faq-answer a {
color: var(--ks-link-on-paper);
site/styles/live-mode-kinpaku.css
+100 -22
View File
@@ -88,6 +88,10 @@
}
.live-mode-kinpaku .live-mode-page-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-family: var(--ks-font-display);
font-style: normal;
font-weight: var(--ks-type-display-weight);
@@ -99,6 +103,23 @@
text-wrap: balance;
}
.live-mode-kinpaku .live-mode-page-title-badge {
display: inline-flex;
align-items: center;
align-self: center;
padding: 3px 9px;
border: 1px solid oklch(70% 0.12 188 / 0.4);
border-radius: 2px;
background: oklch(70% 0.12 188 / 0.10);
color: var(--ks-patina);
font-family: var(--ks-mono);
font-size: 0.64rem;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.2;
text-transform: uppercase;
}
.live-mode-kinpaku .live-mode-page-lede {
font-size: 1.1rem;
line-height: 1.65;
@@ -113,10 +134,11 @@
without blocking the demo. */
.live-mode-kinpaku .live-mode-page-alpha-note {
margin: 14px 0 0;
padding: 0;
padding: 0 0 0 14px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: inset 2px 0 0 var(--ks-kinpaku);
font-size: 0.82rem;
line-height: 1.5;
color: var(--ks-text-muted);
@@ -305,8 +327,8 @@
.live-mode-kinpaku .live-demo-card--v1 {
background: var(--ks-lacquer-raised);
border: 0;
border-top: 3px solid var(--ks-kinpaku);
border-radius: 0;
box-shadow: inset 0 3px 0 var(--ks-kinpaku);
}
.live-mode-kinpaku .live-demo-card--v1 .live-demo-card-kicker {
@@ -368,8 +390,8 @@
.live-mode-kinpaku .live-demo-card--v3 {
background: oklch(11% 0.012 82);
border: 1px solid var(--ks-rule);
color: var(--ks-text);
border: 1px solid oklch(78% 0 0 / 0.16);
color: oklch(88% 0 0);
}
.live-mode-kinpaku .live-demo-card--v3 .live-demo-card-kicker {
@@ -380,7 +402,7 @@
font-family: var(--ks-font);
font-style: normal;
font-weight: 600;
color: var(--ks-champagne);
color: oklch(91% 0 0);
}
.live-mode-kinpaku .live-demo-card--v3 h3 em {
@@ -540,34 +562,58 @@
box-shadow: none;
}
/* Three-up variants strip (GENERATE card) — lacquer tiles, active gets
the kinpaku-tinted bg. */
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant {
background: var(--ks-lacquer-raised);
/* Generate card — measured rail with one clearly active take. The active
state uses solid kinpaku instead of a patina wash so it stays crisp in
light mode. */
.live-mode-kinpaku .live-mode-stage-viz--rail {
background: var(--ks-lacquer-deep);
}
.live-mode-kinpaku .viz-rail {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
width: 100%;
min-height: 62px;
border: 1px solid var(--ks-rule);
border-radius: 3px;
overflow: hidden;
background: var(--ks-lacquer-raised);
}
.live-mode-kinpaku .viz-rail-cell {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px;
color: var(--ks-text-muted);
box-shadow: none;
font-family: var(--ks-mono);
font-size: 8px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active {
background: oklch(78% 0.12 82 / 0.16);
border-color: var(--ks-kinpaku);
box-shadow: none;
.live-mode-kinpaku .viz-rail-cell + .viz-rail-cell {
box-shadow: inset 1px 0 0 var(--ks-rule);
}
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant-kicker {
color: var(--ks-text-muted);
.live-mode-kinpaku .viz-rail-cell.is-active {
background: var(--ks-kinpaku);
color: oklch(8% 0.006 95);
}
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker {
color: var(--ks-kinpaku);
.live-mode-kinpaku .viz-rail-mark {
width: 18px;
height: 2px;
background: currentColor;
}
/* Accept pill (ACCEPT card) — kinpaku gold ink on a subtle kinpaku wash. */
/* Accept pill (ACCEPT card) — patina on lacquer, not a pale gold wash. */
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill {
background: oklch(78% 0.12 82 / 0.16);
border: 1px solid var(--ks-kinpaku);
color: var(--ks-kinpaku);
background: oklch(8% 0.006 95);
border: 1px solid oklch(70% 0.12 188 / 0.58);
color: oklch(82% 0.07 188);
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
}
@@ -701,6 +747,38 @@
border-radius: 2px;
}
.live-mode-kinpaku .framework-list--matrix {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--ks-rule);
border: 1px solid var(--ks-rule);
border-radius: 3px;
overflow: hidden;
}
.live-mode-kinpaku .framework-list--matrix li {
display: grid;
gap: 4px;
min-height: 54px;
padding: 9px 10px;
background: var(--ks-lacquer-raised);
border: 0;
border-radius: 0;
}
.live-mode-kinpaku .framework-list--matrix small {
color: var(--ks-patina-deep);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.live-mode-kinpaku .framework-list--matrix strong {
color: var(--ks-champagne);
font-weight: 500;
}
/* ============================================================================
7. FOOTER on dark surface
site/styles/slop-kinpaku.css
+44 -29
View File
@@ -275,12 +275,12 @@
.slop-kinpaku .sub-page-lede code {
font-family: var(--ks-mono);
font-size: 0.86em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 7px;
border-radius: 2px;
font-size: 0.84em;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .sub-page-lede a {
@@ -386,6 +386,26 @@
color: var(--ks-lacquer-deep);
}
.slop-kinpaku .slop-era-toggle--ink {
background: color-mix(in oklch, var(--ks-graphite), transparent 28%);
border-color: color-mix(in oklch, var(--ks-rule), var(--ks-text) 10%);
}
.slop-kinpaku .slop-era-toggle--ink .slop-era-tab {
padding: 8px 17px;
color: var(--ks-text-muted);
}
.slop-kinpaku .slop-era-toggle--ink .slop-era-tab:hover {
color: var(--ks-text);
}
.slop-kinpaku .slop-era-toggle--ink .slop-era-tab.is-active {
background: color-mix(in oklch, var(--ks-champagne), var(--ks-lacquer-raised) 16%);
color: var(--ks-lacquer);
box-shadow: inset 0 0 0 1px oklch(70% 0.12 188 / 0.18);
}
/* Browser frame mock around the iframe. Lacquer-deep shell with kinpaku
chrome bar, matching the docs-kinpaku live-mode mock vocabulary. */
.slop-kinpaku .visual-mode-preview {
@@ -393,7 +413,7 @@
border: 1px solid var(--ks-rule);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 24px 60px oklch(2% 0.004 95 / 0.55);
box-shadow: none;
}
.slop-kinpaku .visual-mode-preview-header {
@@ -497,11 +517,6 @@
object-position: top;
display: block;
filter: saturate(1.05);
transition: transform 320ms var(--ks-ease);
}
.slop-kinpaku .gallery-card:hover .gallery-card-thumb img {
transform: scale(1.04);
}
.slop-kinpaku .gallery-card-body {
@@ -623,12 +638,12 @@
.slop-kinpaku .anti-patterns-legend-body code {
font-family: var(--ks-mono);
font-size: 0.86em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 6px;
border-radius: 2px;
font-size: 0.84em;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .anti-patterns-legend-layers {
@@ -922,11 +937,11 @@
.slop-kinpaku .visual-mode-method-name code {
font-family: var(--ks-mono);
font-size: 0.92em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 8px;
border-radius: 2px;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .visual-mode-method-desc {
@@ -938,12 +953,12 @@
.slop-kinpaku .visual-mode-method-desc code {
font-family: var(--ks-mono);
font-size: 0.86em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 6px;
border-radius: 2px;
font-size: 0.84em;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .visual-mode-method-desc a {