mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-20 10:06:54 +03:00
Consolidate 18 skills into 1 /impeccable skill with 20 commands
Biggest change in a while. Users previously had 18 standalone skill
entries cluttering their /menu; now they have one entry (/impeccable)
that routes to 20 specialized commands via argument dispatch. The pin
mechanism (/impeccable pin audit) restores standalone shortcuts on
demand for commands users hit all the time.
## Architecture
- Single /impeccable skill with command router section in SKILL.md
- 20 commands served via reference files under source/skills/impeccable/reference/
- /impeccable pin <command> creates a lightweight redirect shim so users
who prefer /audit, /polish, etc. can still have them
- Context gathering (teach) auto-runs on first use
- command-metadata.json is the single source of truth for command
descriptions, argument hints, and relationships
## Site rewrite
- Docs URL: /skills renamed to /docs (with /skills permanent redirects)
- Homepage hero frames Impeccable as "one skill with 20 commands"
- "Get Started" split into 50/50 install + how-to-use with editorial
numbered steps, /impeccable shown as the home command with three modes
- New /docs overview: home command hero card + dense category rows
matching the old cheatsheet density, with leads-to/pairs-with/
combines-with relationship metadata served from a shared source
- Cheatsheet merged into /docs, /cheatsheet redirects
- Magazine spread and mobile cards show /impeccable as a stacked
namespace label above the command name at full display size
- Periodic table updated with craft/teach/extract as first-class cells
- Skill detail pages generate from reference files, with an editorial
wrapper per command for tagline + body
- Tutorials and anti-patterns pages updated to use /impeccable <cmd>
## Build system
- Dead code removed (scripts/lib/transformers/shared.js)
- Build log wording fixed ("1 skill" not "1 skills (1 user-invocable)")
- generateApiData fallback branch removed (throws loudly if metadata
missing instead of silently degrading)
- Commands API includes editorial tagline alongside the long description;
UI surfaces prefer tagline for human display, description for auto-
trigger keyword matching
## Gitignore
- Added .claude/scheduled_tasks.lock, .claude/settings.local.json to
ignore list (local Claude Code state that should not be tracked).
- Harness skill directories (.claude/skills/, .agents/skills/, etc.)
remain tracked by design: npx skills reads them from this repo at
install time and they enable clean submodule use.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
f957fcad20
commit
b0f44f83c6
+244
-81
@@ -486,138 +486,283 @@ main#main {
|
||||
padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
|
||||
}
|
||||
|
||||
.skills-overview-content {
|
||||
max-width: 720px;
|
||||
/* ============================================
|
||||
DOCS OVERVIEW — /skills page
|
||||
============================================ */
|
||||
|
||||
.docs-overview {
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
.skills-overview-header {
|
||||
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
||||
.docs-overview-header {
|
||||
margin-bottom: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.skills-overview-header .sub-page-lede a {
|
||||
color: var(--color-ink);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-decoration-color: var(--color-accent);
|
||||
text-underline-offset: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.skills-overview-howto {
|
||||
padding: var(--spacing-lg) var(--spacing-lg);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 10px;
|
||||
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.skills-overview-howto-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.skills-overview-howto p {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-charcoal);
|
||||
.docs-overview-header .sub-page-lede {
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.skills-overview-howto a {
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875em;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--color-accent);
|
||||
transition: color var(--duration-fast) var(--ease-out);
|
||||
/* Home command hero — the /impeccable root card that sits above the
|
||||
category sections. It gets special treatment because it's the entry
|
||||
point, not just another command in a category. */
|
||||
.docs-home-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
gap: clamp(1.5rem, 3vw, 2.5rem);
|
||||
padding: clamp(1.5rem, 3vw, 2rem);
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 12px;
|
||||
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
|
||||
}
|
||||
|
||||
.skills-overview-howto a:hover {
|
||||
.docs-home-card-identity {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.docs-home-card-eyebrow {
|
||||
display: inline-block;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.skills-overview-categories {
|
||||
.docs-home-card-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 4vw, 2.75rem);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: var(--color-ink);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.docs-home-card-tagline {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
max-width: 32ch;
|
||||
}
|
||||
|
||||
.docs-home-card-desc {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-ink);
|
||||
max-width: 36ch;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.docs-home-card-desc code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-ink);
|
||||
background: var(--color-accent-dim);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.docs-home-card-modes {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(2rem, 4vw, 3rem);
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skills-overview-category {
|
||||
padding-bottom: clamp(2rem, 4vw, 2.5rem);
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
.docs-home-card-modes a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
transition: padding var(--duration-fast) var(--ease-out, ease);
|
||||
}
|
||||
|
||||
.skills-overview-category:last-child {
|
||||
border-bottom: none;
|
||||
.docs-home-card-modes a:hover {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.skills-overview-category-meta {
|
||||
.docs-home-mode-label {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.docs-home-mode-slash {
|
||||
color: var(--color-accent);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.docs-home-mode-hint {
|
||||
display: block;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-charcoal);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Category sections with rich command cards */
|
||||
.docs-categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(2.5rem, 5vw, 3.5rem);
|
||||
}
|
||||
|
||||
.docs-category-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
}
|
||||
|
||||
.skills-overview-category-title {
|
||||
.docs-category-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: var(--color-ink);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.skills-overview-category-count {
|
||||
.docs-category-desc {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-charcoal);
|
||||
max-width: 58ch;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.docs-category-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--color-ash);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skills-overview-category-desc {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-charcoal);
|
||||
max-width: 58ch;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skills-overview-chips {
|
||||
/* Dense two-column rows for each command: name on the left, description +
|
||||
relationship on the right. Mirrors the original cheatsheet density. */
|
||||
.docs-category-rows {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.skills-overview-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
.command-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(11rem, 13rem) 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
padding: var(--spacing-md) 0;
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.command-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.command-row-name {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
background: var(--color-paper);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 99px;
|
||||
text-decoration: none;
|
||||
transition: border-color var(--duration-fast) var(--ease-out),
|
||||
color var(--duration-fast) var(--ease-out),
|
||||
background var(--duration-fast) var(--ease-out);
|
||||
line-height: 1.4;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.skills-overview-chip:hover {
|
||||
.command-row-name a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color var(--duration-fast) var(--ease-out, ease);
|
||||
}
|
||||
|
||||
.command-row-name a:hover {
|
||||
border-bottom-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.command-row-namespace {
|
||||
color: var(--color-ash);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.command-row-beta {
|
||||
display: inline-block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-accent);
|
||||
border: 1px solid var(--color-accent);
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
vertical-align: 1px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.command-row-info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.command-row-desc {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.55;
|
||||
color: var(--color-ink);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.command-row-rel {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-ash);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.command-row-rel a {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-charcoal);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
transition: color var(--duration-fast) var(--ease-out, ease),
|
||||
border-color var(--duration-fast) var(--ease-out, ease);
|
||||
}
|
||||
|
||||
.command-row-rel a:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
/* Narrow viewport: stack name above info */
|
||||
@media (max-width: 820px) {
|
||||
.docs-home-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -1686,6 +1831,24 @@ main#main {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Sub-commands: show "/impeccable" as a smaller label above the command name
|
||||
so it stacks and the command name stays at full display size. */
|
||||
.skill-detail-title-namespace {
|
||||
display: block;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-ash);
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.4em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.skill-detail-title-namespace .skill-detail-title-slash {
|
||||
color: var(--color-accent);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.skill-detail-tagline {
|
||||
font-family: var(--font-body);
|
||||
font-size: clamp(1rem, 1.4vw, 1.125rem);
|
||||
|
||||
Reference in New Issue
Block a user