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

Polish docs page

Browse Source
This commit is contained in:
Paul Bakaus
2026-06-17 17:49:38 +09:00
parent 617b3a6e5e
commit 1c897a09c8
3 changed files with 77 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/pages/docs/index.astro
+12 -24
View File
@@ -39,56 +39,50 @@ const startSteps = [
{
label: 'Install',
command: 'npx impeccable install',
line: 'Run this from the project root, then reload your AI coding tool.',
line: 'Run from the project root, then reload your agent.',
},
{
label: 'Set context',
command: '/impeccable init',
line: 'Answer the short setup interview. Say yes when it offers DESIGN.md.',
line: 'Create PRODUCT.md and DESIGN.md.',
},
{
label: 'Try it',
command: '/impeccable polish the pricing page',
line: 'Pick any page or component that already exists.',
line: 'Point it at a real page.',
},
];
const choices = [
{
need: 'Set up a project',
need: 'Start a project',
command: '/impeccable init',
href: '/docs/init',
line: 'Create PRODUCT.md and DESIGN.md.',
},
{
need: 'Improve an existing page',
need: 'Polish a page',
command: '/impeccable polish',
href: '/docs/polish',
line: 'Fix spacing, type, states, copy, and consistency.',
},
{
need: 'Find design issues',
command: '/impeccable critique',
href: '/docs/critique',
line: 'Get the highest-priority design problems.',
},
{
need: 'Check implementation quality',
need: 'Check implementation',
command: '/impeccable audit',
href: '/docs/audit',
line: 'Check accessibility, responsiveness, performance, and detector findings.',
},
{
need: 'Point at UI in the browser',
need: 'Iterate in the browser',
command: '/impeccable live',
href: '/docs/live',
line: 'Pick an element, generate variants, accept one into source.',
},
{
need: 'Build a new feature',
command: '/impeccable craft',
href: '/docs/craft',
line: 'Plan, build, and visually check the feature.',
},
];
@@ -97,25 +91,21 @@ const manualTopics = [
topic: 'Design Context',
href: '/docs/context',
label: 'PRODUCT.md + DESIGN.md',
line: 'What gets loaded, when it wins, and how the sidecar fits.',
},
{
topic: 'Detector CLI',
href: '/docs/detector',
label: 'npx impeccable detect',
line: 'Run deterministic checks on files, folders, stdin, and URLs.',
},
{
topic: 'Design hooks',
href: '/docs/hooks',
label: '/impeccable hooks',
line: 'Automatic detector feedback inside Claude Code, Codex, and Cursor.',
},
{
topic: 'Config and ignores',
href: '/docs/config',
label: '.impeccable/config.json',
line: 'Shared exceptions, private overrides, and design-system toggles.',
},
].filter(topic => referenceEntries.some(entry => `/docs/${entry.id}` === topic.href));
@@ -143,7 +133,7 @@ const chains: { id: string; a: string; b: string; arrow: string; line: string }[
<section class="docs-start-rail" aria-labelledby="docs-start-h">
<header class="docs-start-rail-head">
<h1 class="docs-start-rail-title" id="docs-start-h">Start with <span>/impeccable</span></h1>
<p class="docs-start-rail-lede">Install, run setup, then try one command on an existing page.</p>
<p class="docs-start-rail-lede">Install, add context, then run one command.</p>
</header>
<div class="docs-start-rail-sequence">
@@ -173,7 +163,6 @@ const chains: { id: string; a: string; b: string; arrow: string; line: string }[
<a class="docs-chooser-list-row" href={choice.href}>
<span class="docs-chooser-list-need">{choice.need}</span>
<span class="docs-chooser-list-command">{choice.command}</span>
<span class="docs-chooser-list-line">{choice.line}</span>
</a>
))}
</div>
@@ -182,7 +171,7 @@ const chains: { id: string; a: string; b: string; arrow: string; line: string }[
<section class="docs-manual-section" aria-labelledby="docs-manual-h">
<header class="docs-manual-head">
<h2 class="docs-manual-title" id="docs-manual-h">Understand the system</h2>
<p class="docs-manual-sub">Commands are only one layer. These docs explain the files, checks, hooks, and config that make them behave consistently.</p>
<p class="docs-manual-sub">Context files, detector checks, hooks, and config.</p>
</header>
<div class="docs-chooser-list docs-manual-list">
@@ -190,7 +179,6 @@ const chains: { id: string; a: string; b: string; arrow: string; line: string }[
<a class="docs-chooser-list-row" href={topic.href}>
<span class="docs-chooser-list-need">{topic.topic}</span>
<span class="docs-chooser-list-command">{topic.label}</span>
<span class="docs-chooser-list-line">{topic.line}</span>
</a>
))}
</div>
@@ -199,11 +187,11 @@ const chains: { id: string; a: string; b: string; arrow: string; line: string }[
<!-- Live mode: visual iteration -->
<section class="docs-live" aria-labelledby="docs-live-h">
<div class="docs-live-copy">
<h2 class="docs-live-title" id="docs-live-h">Iterate where you can see it</h2>
<p class="docs-live-lede">Use Live Mode when an issue is easier to point at than describe. Pick an element, generate variants, accept one into source.</p>
<h2 class="docs-live-title" id="docs-live-h">Iterate in the browser</h2>
<p class="docs-live-lede">Pick UI, generate variants, accept one into source.</p>
<p class="docs-live-cta">
<a class="ks-button ks-button-primary" href="/docs/live">
Read the live docs
Live Mode docs
<span class="ks-button-arrow" aria-hidden="true">
<svg viewBox="0 0 16 8" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M0 4h14M10 0l4 4-4 4"/></svg>
</span>
site/styles/docs-kinpaku.css
+65 -76
View File
@@ -37,6 +37,8 @@
--docs-brand-accent: var(--ks-kinpaku);
--docs-panel-bg: var(--ks-lacquer-raised);
--docs-panel-hover-bg: oklch(11% 0.012 82);
--docs-row-bg: var(--ks-lacquer-raised);
--docs-row-hover-bg: oklch(13% 0.012 82);
background:
linear-gradient(180deg, oklch(7% 0.006 95), oklch(4% 0.004 95));
@@ -46,11 +48,6 @@
}
html.light .docs-kinpaku {
--ks-lacquer: oklch(100% 0 0);
--ks-lacquer-deep: oklch(100% 0 0);
--ks-lacquer-raised: oklch(99% 0 0);
--ks-graphite: oklch(94% 0 0);
--ks-graphite-2: oklch(90% 0 0);
--ks-champagne: oklch(16% 0 0);
--ks-text: oklch(24% 0 0);
--ks-text-muted: oklch(42% 0 0);
@@ -61,9 +58,11 @@ html.light .docs-kinpaku {
--docs-accent-line: oklch(70% 0.12 188 / 0.36);
--docs-accent-wash: oklch(70% 0.12 188 / 0.08);
--docs-brand-accent: var(--ks-kinpaku);
--docs-panel-bg: oklch(100% 0 0 / 0.76);
--docs-panel-hover-bg: oklch(70% 0.12 188 / 0.07);
background: oklch(100% 0 0);
--docs-panel-bg: oklch(100% 0 0);
--docs-panel-hover-bg: color-mix(in oklch, oklch(100% 0 0), var(--docs-accent) 4%);
--docs-row-bg: oklch(100% 0 0);
--docs-row-hover-bg: color-mix(in oklch, oklch(100% 0 0), var(--docs-accent) 3%);
background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
}
.docs-kinpaku a {
@@ -275,44 +274,48 @@ html.light .docs-kinpaku {
.docs-kinpaku .docs-start-rail {
display: grid;
gap: clamp(26px, 4vw, 44px);
margin-bottom: clamp(48px, 7vw, 88px);
gap: 28px;
margin-bottom: clamp(44px, 6vw, 72px);
}
@media (max-width: 520px) {
.docs-kinpaku .docs-index {
padding-top: 22px;
}
.docs-kinpaku .docs-start-rail-title {
font-size: 2.15rem;
}
}
.docs-kinpaku .docs-start-rail-head {
display: grid;
gap: 18px;
max-width: 1040px;
gap: 14px;
max-width: 780px;
}
.docs-kinpaku .docs-start-rail-title {
font-family: var(--ks-font-display);
font-family: var(--ks-font);
font-style: normal;
font-weight: var(--ks-type-display-weight);
font-size: clamp(3.2rem, calc(3.1rem + 2vw), 5.6rem);
line-height: var(--ks-type-display-line);
letter-spacing: var(--ks-type-display-track);
font-weight: 650;
font-size: 2.6rem;
line-height: 1.12;
letter-spacing: 0;
color: var(--ks-champagne);
margin: 0;
text-wrap: balance;
}
.docs-kinpaku .docs-start-rail-title span {
color: var(--docs-brand-accent);
font-family: var(--ks-font-wordmark);
color: var(--docs-accent);
font-family: var(--ks-mono);
font-weight: 500;
font-size: 0.96em;
font-size: 0.82em;
}
.docs-kinpaku .docs-start-rail-lede {
font-size: 1.04rem;
line-height: 1.62;
font-size: 1rem;
line-height: 1.6;
color: var(--ks-text);
margin: 0;
}
@@ -326,7 +329,7 @@ html.light .docs-kinpaku {
.docs-kinpaku .docs-flow-section,
.docs-kinpaku .docs-chains-section,
.docs-kinpaku .docs-reference-section {
margin-bottom: clamp(64px, 8vw, 110px);
margin-bottom: clamp(48px, 6vw, 76px);
}
.docs-kinpaku .docs-reference-section:last-child {
@@ -339,14 +342,14 @@ html.light .docs-kinpaku {
.docs-kinpaku .docs-flow-title,
.docs-kinpaku .docs-chains-title,
.docs-kinpaku .docs-reference-title {
font-family: var(--ks-font-display);
font-family: var(--ks-font);
font-style: normal;
font-weight: var(--ks-type-headline-weight);
font-size: var(--ks-type-headline-size);
line-height: var(--ks-type-headline-line);
font-weight: 650;
font-size: 1.55rem;
line-height: 1.25;
letter-spacing: 0;
color: var(--ks-champagne);
margin: 0 0 14px;
margin: 0 0 12px;
text-wrap: balance;
}
@@ -375,6 +378,7 @@ html.light .docs-kinpaku {
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
border-top: 0;
border-bottom: 0;
}
@@ -390,12 +394,10 @@ html.light .docs-kinpaku {
grid-template-rows: auto auto minmax(3.2em, auto) auto;
gap: 10px;
min-width: 0;
padding: 22px clamp(18px, 2.8vw, 30px) 24px;
border-right: 1px solid var(--ks-rule);
}
.docs-kinpaku .docs-start-rail-step:last-child {
border-right: 0;
padding: 18px 20px 20px;
background: var(--docs-row-bg);
border: 1px solid transparent;
border-radius: 8px;
}
.docs-kinpaku .docs-start-rail-num {
@@ -429,9 +431,9 @@ html.light .docs-kinpaku {
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-step {
grid-template-columns: minmax(34px, auto) minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: clamp(16px, 2vw, 24px);
column-gap: 16px;
row-gap: 9px;
padding: 22px clamp(18px, 2.8vw, 30px) 24px 0;
padding: 18px 20px 20px;
}
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-num {
@@ -446,14 +448,6 @@ html.light .docs-kinpaku {
grid-column: 2;
}
.docs-kinpaku .docs-start-rail-steps--inner-inset .docs-start-rail-step:first-child {
padding-left: 0;
}
.docs-kinpaku .docs-start-rail-steps--inner-inset .docs-start-rail-step:not(:first-child) {
padding-left: clamp(16px, 2.2vw, 24px);
}
.docs-kinpaku .docs-start-rail-line {
font-size: 0.9rem;
line-height: 1.5;
@@ -481,15 +475,7 @@ html.light .docs-kinpaku {
@media (max-width: 940px) {
.docs-kinpaku .docs-start-rail-step,
.docs-kinpaku .docs-start-rail-step:last-child {
border-right: 0;
border-left: 0;
border-top: 0;
border-bottom: 1px solid var(--ks-rule);
padding-inline: 0;
}
.docs-kinpaku .docs-start-rail-step:last-child {
border-bottom: 0;
border: 1px solid transparent;
}
.docs-kinpaku .docs-start-rail-command {
@@ -500,64 +486,67 @@ html.light .docs-kinpaku {
/* b. Intent chooser ---------------------------------------------------- */
.docs-kinpaku .docs-chooser-head {
margin-bottom: 26px;
.docs-kinpaku .docs-chooser-head,
.docs-kinpaku .docs-manual-head {
margin-bottom: 16px;
}
.docs-kinpaku .docs-chooser-list {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--ks-rule);
gap: 12px;
border-top: 0;
}
.docs-kinpaku .docs-chooser-list-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 22px;
align-items: baseline;
padding: 18px 0 20px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--ks-rule);
border-radius: 0;
gap: 7px 18px;
align-items: center;
padding: 18px 20px;
background: var(--docs-row-bg);
border: 1px solid transparent;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: border-color 160ms var(--ks-ease),
background 160ms var(--ks-ease),
color 160ms var(--ks-ease);
}
.docs-kinpaku .docs-chooser-list-row:hover {
border-bottom-color: var(--docs-accent-line);
background: var(--docs-row-hover-bg);
border-color: var(--docs-accent-line);
}
.docs-kinpaku .docs-chooser-list-need {
font-size: 1rem;
font-size: 0.98rem;
font-weight: 600;
line-height: 1.35;
color: var(--ks-champagne);
}
.docs-kinpaku .docs-chooser-list-command {
display: inline-flex;
justify-self: end;
font-family: var(--ks-mono);
font-size: 0.78rem;
color: var(--docs-accent);
line-height: 1.4;
font-size: 0.74rem;
color: var(--docs-accent-hover);
line-height: 1.3;
padding: 5px 8px;
background: var(--docs-accent-wash);
border: 1px solid var(--docs-accent-line);
border-radius: 5px;
white-space: nowrap;
}
.docs-kinpaku .docs-chooser-list-line {
grid-column: 1 / -1;
font-size: 0.9rem;
line-height: 1.5;
color: var(--ks-text-muted);
max-width: 68ch;
}
@media (max-width: 520px) {
.docs-kinpaku .docs-chooser-list-row {
grid-template-columns: 1fr;
}
.docs-kinpaku .docs-chooser-list-command {
justify-self: start;
white-space: normal;
}
}
site/styles/light-mode.css
-8
View File
@@ -1171,14 +1171,6 @@ html.light .changelog-faq-kinpaku {
background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
}
html.light body.docs-kinpaku {
background: oklch(100% 0 0);
}
html.light body.docs-kinpaku .site-header {
background: oklch(100% 0 0 / 0.96);
}
html.light .skills-layout-page .skills-sidebar,
html.light .skills-layout-page .skills-content {
background: transparent;