diff --git a/README.md b/README.md index b6dda5f..30e675e 100644 --- a/README.md +++ b/README.md @@ -240,16 +240,18 @@ diagram-design/ │ ├── type-venn.md │ ├── type-pyramid.md │ ├── primitive-annotation.md — italic-serif editorial callouts -│ └── primitive-sketchy.md — hand-drawn SVG filter variant +│ ├── primitive-sketchy.md — hand-drawn SVG filter variant +│ └── primitive-terminal.md — charcoal-black CLI-window variant ├── assets/ │ ├── index.html — live gallery, tabbed │ ├── template*.html — scaffolds for new diagrams │ ├── example-.html — 3 variants × 27 types +│ ├── example-loop-terminal.html — terminal-variant flagship │ └── example-quadrant-consultant.html — consultant-special 2×2 scenario matrix └── docs/screenshots/ — the images in this README ``` -This keeps Claude's working context tight (only load what you need) and makes the skill easy to extend — drop a new `type-.md` and wire it into the selection guide. The skill ships with 33 reference files covering every diagram type, primitive, and utility. +This keeps Claude's working context tight (only load what you need) and makes the skill easy to extend — drop a new `type-.md` and wire it into the selection guide. The skill ships with 34 reference files covering every diagram type, primitive, and utility. ### Contributing / skin lint @@ -258,7 +260,7 @@ The repository-wide check `python3 scripts/lint-skin.py --all --baseline` must s ### What loads when -The top-level `SKILL.md` is always in context. Everything else is pulled in only when relevant — this is what keeps the skill fast even with 33 reference files. +The top-level `SKILL.md` is always in context. Everything else is pulled in only when relevant — this is what keeps the skill fast even with 34 reference files. | You ask for… | Claude loads | |---|---| @@ -267,6 +269,7 @@ The top-level `SKILL.md` is always in context. Everything else is pulled in only | "Onboard this skill to my site" | `SKILL.md` + `references/onboarding.md` + `references/style-guide.md` | | "Add an editorial callout to this diagram" | `SKILL.md` + `references/primitive-annotation.md` | | "Give me a hand-drawn version" | `SKILL.md` + `references/primitive-sketchy.md` | +| "Give me a terminal / CLI-window version" | `SKILL.md` + `references/primitive-terminal.md` | | Routine diagram-making (any of the 27 diagrams) | Only `SKILL.md` + that one type's reference | No matter how many types exist, Claude only reads the one you need. Add a new type tomorrow and nothing else changes. diff --git a/scripts/lint-skin.py b/scripts/lint-skin.py index f7fa95c..1662501 100644 --- a/scripts/lint-skin.py +++ b/scripts/lint-skin.py @@ -78,6 +78,7 @@ def allowed_colors(): markdown = STYLE_GUIDE.read_text(encoding="utf-8") colors = table_hexes(markdown, "### Semantic roles") colors.update(table_hexes(markdown, "### Series palette")) + colors.update(table_hexes(markdown, "### Terminal skin")) colors.update({"#fff", "#ffffff"}) rgb_triplets = set() diff --git a/skills/diagram-design/SKILL.md b/skills/diagram-design/SKILL.md index f7bd3c5..a26faf0 100644 --- a/skills/diagram-design/SKILL.md +++ b/skills/diagram-design/SKILL.md @@ -193,6 +193,7 @@ Universal building blocks. Type-specialized primitives (lifeline, activation bar - Editorial callouts → [primitive-annotation.md](references/primitive-annotation.md) - Hand-drawn variant → [primitive-sketchy.md](references/primitive-sketchy.md) - Icon set (laptop, server, DB, K8s, Docker, AWS, …) → [primitive-icons.md](references/primitive-icons.md). Browse the gallery at [`assets/icons.html`](../assets/icons.html). +- Terminal / CLI-window variant → [primitive-terminal.md](references/primitive-terminal.md) ### Background @@ -458,6 +459,8 @@ Every diagram ships in three variants (see `assets/`): **Sketchy variant** (optional, applied to any of the above) — see [primitive-sketchy.md](references/primitive-sketchy.md). SVG turbulence filter wobbles strokes for a hand-drawn feel. Good for essays, not for technical docs. +**Terminal variant** (optional, replaces any of the above) — see [primitive-terminal.md](references/primitive-terminal.md). `template-terminal.html`, `example--terminal.html`. Charcoal-black CLI-window chrome, monospace type, one red-orange accent. Good for dev-tool / CLI-product posts and technical social cards; not brand-tokenized, so skip it for onboarded/brand-matched output. + ### To create a new diagram 1. Copy the variant closest to what you want (`template.html` for minimal, `template-full.html` for cards). diff --git a/skills/diagram-design/assets/example-loop-terminal.html b/skills/diagram-design/assets/example-loop-terminal.html new file mode 100644 index 0000000..391a952 --- /dev/null +++ b/skills/diagram-design/assets/example-loop-terminal.html @@ -0,0 +1,347 @@ + + + + + + The self-improving loop · Terminal + + + + +
+
+
+
+
+
loop.sh — self-improving-loop
+
+
+

+ $ diagram-design render --type loop +

+

The self-improving loop

+ + + The self-improving loop + + Six stations flow clockwise from Capture through Learn and back to + Capture. Each station writes shared state into one central memory + hub, with Decide highlighted as the human approval gate. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + SIGNALS + + OUTCOMES + + + + Capture + signals in / intake + + + Research + evidence pulled + + + Decide + human approves + + + Act + work ships + + + Measure + outcomes logged + + + Learn + playbook updated + + + + Shared memory + one record, every loop + +
+
+ + diff --git a/skills/diagram-design/assets/template-terminal.html b/skills/diagram-design/assets/template-terminal.html new file mode 100644 index 0000000..01eb0a6 --- /dev/null +++ b/skills/diagram-design/assets/template-terminal.html @@ -0,0 +1,170 @@ + + + + + + Diagram + + + + +
+
+
+
+
+
[file.sh] — [diagram-slug]
+
+
+

+ $ [command that "generated" this] +

+

[Diagram title]

+ + + + + + + + + + + + + + + + + +
+
+ + diff --git a/skills/diagram-design/references/primitive-terminal.md b/skills/diagram-design/references/primitive-terminal.md new file mode 100644 index 0000000..4d65ab3 --- /dev/null +++ b/skills/diagram-design/references/primitive-terminal.md @@ -0,0 +1,76 @@ +# Terminal Window (CLI-chrome variant) + +Optional full-page skin that wraps any diagram in a fake terminal window — titlebar with three dots, a `$` prompt line, monospace type throughout. Use for dev-tool announcements, CLI-product posts, and technical social cards where a screenshot needs to read as "terminal," not "editorial doc." + +This is a **second, fixed skin** — see [style-guide.md § Terminal skin](style-guide.md#terminal-skin-opt-in-alternate) for the token table. It does not inherit from `onboarding.md` brand tokens and isn't part of the light/dark inversion rule; every terminal example uses the same nine tokens regardless of the host site's brand. + +## Grammar + +```html +
+
+
+
+
+
loop.sh — self-improving-loop
+
+
+

+ $ diagram-design render --type loop +

+

# The self-improving loop

+ ... +
+
+``` + +```css +body { + background: var(--terminal-page); +} +.terminal { + background: var(--terminal-paper); + border: 1px solid var(--terminal-border); + border-radius: 12px; +} +.titlebar { + background: var(--terminal-bar); + border-bottom: 1px solid var(--terminal-border); +} +.dot { + background: var(--terminal-soft); +} +.dot.accent { + background: var(--terminal-accent); +} +``` + +Inside the SVG, swap the default light/dark tokens 1:1 for their `terminal-*` equivalents: `paper` → `terminal-paper`, `ink` → `terminal-ink`, `muted`/`soft` → `terminal-muted`/`terminal-soft`, `accent`/`accent-tint` → `terminal-accent`/`terminal-accent-tint`. The hub/focal-node pattern (inverted fill for the one highlighted element) still applies. + +## Typography + +**Everything is monospace** — this is the one variant where that's correct. Drop Instrument Serif and Geist sans entirely; set the page title in mono, bold, prefixed with `# ` (reads as a comment line). The eyebrow becomes a shell prompt: `$ ` in `terminal-accent`, the command in `terminal-muted`. + +Run every text role about **1–2px above** the default type scale in `style-guide.md` (e.g. `node-name` 12px → 14px, `sublabel`/`arrow-label` 8–9px → 9–10px, hub label 16px → 18px). Monospace at the default sizes reads small next to the sans/serif mix it's replacing, and these cards are usually viewed at social-feed scale, not full-bleed. + +## Titlebar dots + +Three 10px circles, macOS-style. The **1-accent rule caps the color use here too**: one dot is `terminal-accent`, the other two are `terminal-soft`. Do not use a red/yellow/green traffic-light triad — that's a second and third hue, which the palette forbids. + +## Critical rules + +- No pure black (`#000000`) — use `terminal-page` (`#0a0a0a`) / `terminal-paper` (`#141414`). Same rule as the default skin, same reason: true black clips on OLED and in print. +- One accent only. If a diagram needs a second focal element, use `terminal-ink` (white) for emphasis via weight/size, not a second color. +- Background dot-grid pattern (if used) stays `rgba(255,255,255,0.06–0.08)` — barely visible texture, not a visual competitor to the titlebar chrome. + +## When to use + +- Dev-tool / CLI-product launch posts (npm package, CLI flag, terminal-based workflow). +- Technical social cards where "this is a tool for engineers" is part of the message. +- Screenshots meant to pop in a dark-mode-heavy feed (X, Discord, dev blogs). + +## When not to use + +- Editorial / long-form posts — pair with the default light or full-editorial variant instead. +- Brand-matched output from `onboarding.md` — terminal is a fixed skin, not brand-tokenized. Don't try to reconcile the two. +- Any diagram where the audience isn't developer-coded to read `$`/`#`/titlebar-dots as chrome rather than content. diff --git a/skills/diagram-design/references/style-guide.md b/skills/diagram-design/references/style-guide.md index 5e3815b..16de52a 100644 --- a/skills/diagram-design/references/style-guide.md +++ b/skills/diagram-design/references/style-guide.md @@ -49,6 +49,24 @@ A small set of desaturated, editorial-tone colors for chart types that genuinely Fills sit at `0.18` opacity light, `0.22` dark; strokes use the full color. **Don't backfill these tokens to non-chart types** — architecture, swimlane, etc. continue to use muted-ink variants. The series palette is opt-in for diagrams where overlapping shapes demand distinguishable color, not a license to add color elsewhere. +### Terminal skin (opt-in alternate) + +A self-contained palette for the terminal-window primitive (see [primitive-terminal.md](primitive-terminal.md)) — a CLI-chrome register for dev-tool posts and technical social cards. It does not replace the default skin above and isn't affected by onboarding; it's a second, fixed skin you opt into per-diagram. + +| Token | Hex | Purpose | +|---|---|---| +| `terminal-page` | `#0a0a0a` | Page background behind the window | +| `terminal-paper` | `#141414` | Window body, node fill | +| `terminal-bar` | `#1b1b1b` | Titlebar strip | +| `terminal-border` | `#2b2b2b` | Window border, hairlines | +| `terminal-ink` | `#f5f5f5` | Primary text, primary stroke (same white-smoke as default `ink`) | +| `terminal-muted` | `#9a9a9a` | Secondary text, sublabels, ring stroke | +| `terminal-soft` | `#5c5c5c` | Tertiary — inactive dots, spokes | +| `terminal-accent` | `#ff5a36` | The one accent — focal station, prompt sign, active dot | +| `terminal-accent-tint` | `rgba(255,90,54,0.12)` | Fill for accent-bordered boxes | + +**1-accent rule still holds.** Everything that isn't `terminal-ink` or `terminal-muted`/`terminal-soft` should be `terminal-accent` — never introduce a second hue. + --- ## Typography