diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json new file mode 100644 index 0000000..e52c881 --- /dev/null +++ b/.codex-plugin/plugin.json @@ -0,0 +1,39 @@ +{ + "name": "diagram-design", + "description": "Editorial-quality technical and product diagrams - 13 types rendered as standalone HTML with inline SVG, skinnable to match your brand", + "version": "1.0.0", + "author": { + "name": "Cathryn Lavery", + "url": "https://github.com/cathrynlavery" + }, + "homepage": "https://github.com/cathrynlavery/diagram-design", + "repository": "https://github.com/cathrynlavery/diagram-design", + "license": "MIT", + "keywords": [ + "diagrams", + "svg", + "architecture", + "flowchart", + "visualization", + "editorial" + ], + "skills": "./skills/", + "interface": { + "displayName": "Diagram Design", + "shortDescription": "Create editorial technical and product diagrams as standalone HTML.", + "longDescription": "Generate architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, layers, venn, and pyramid diagrams with an opinionated editorial design system.", + "developerName": "Cathryn Lavery", + "category": "Productivity", + "capabilities": [ + "Read", + "Write" + ], + "websiteURL": "https://github.com/cathrynlavery/diagram-design", + "defaultPrompt": [ + "Make an architecture diagram of my app.", + "Create a flowchart for this decision process.", + "Build a sequence diagram for this workflow." + ], + "brandColor": "#b5523a" + } +} diff --git a/README.md b/README.md index 1512506..95894d6 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,20 @@ # Diagram Design -**I wanted good-looking diagrams for my blog posts.** +**Editorial diagrams your designer won't hate.** -I write at [littlemight.com](https://littlemight.com). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram. +![Content site architecture](docs/screenshots/architecture.png) -So I built a Claude Code skill for it. 13 types, editorial quality, matches your brand in 60 seconds by reading your website. +14 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram. + +No Figma. No generic rounded boxes. No 30-minute color-picking sessions. + +--- + +## Why I built it + +I write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram. + +So I built a Claude Code skill for it. Fourteen types, editorial quality, matches your brand in 60 seconds by reading your website. > *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10. @@ -12,7 +22,7 @@ So I built a Claude Code skill for it. 13 types, editorial quality, matches your ## What it makes -All 13 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images. +All 14 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images. @@ -36,25 +46,26 @@ All 13 diagrams ship in three variants: minimal light, minimal dark, and full-ed - + + +
Venn
Venn
Set overlap
Pyramid
Pyramid / funnel
Ranked hierarchy or conversion drop-off		Pyramid
Pyramid / funnel
Ranked hierarchy or drop-off		Consultant 2×2
Consultant 2×2
Scenario matrix · named cells		 
-**Browse the live gallery:** open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) in your browser to flip through all 13 types with light / dark / full-editorial tabs. +**Browse the live gallery:** open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) in your browser to flip through all 14 diagrams with light / dark / full-editorial tabs. --- ## Install ```bash -# Clone into your Claude Code skills directory -git clone git@github.com:cathrynlavery/diagram-design.git ~/.claude/skills/diagram-design - -# Or if you keep skills elsewhere, symlink it +# Clone the repo somewhere, then symlink the inner skill into Claude Code's skills dir git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design -ln -s ~/code/diagram-design ~/.claude/skills/diagram-design +ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design ``` +The real skill lives at `skills/diagram-design/` inside the repo (so the same tree works as a Claude Code plugin, a Codex plugin, and a standalone skill). The symlink points Claude Code at that inner directory. + Restart Claude Code. The skill registers as `diagram-design` and activates whenever you ask Claude to make a diagram. ### Alternative: install as a plugin @@ -69,13 +80,19 @@ Quicker to install — but the skill lives in the plugin cache, so edits to `ref **Claude Cowork:** Customize → Directory → Plugins → **+** → paste `cathrynlavery/diagram-design` → Sync, then install from the Personal list. +**Codex:** +``` +/plugin marketplace add cathrynlavery/diagram-design +/plugin install diagram-design@diagram-design +``` + --- ## Onboarding — make it look like *your* brand The whole point: ship editorial-quality diagrams in **your** colors and typography, not a generic template. -Out of the box, diagrams render in a neutral **stone + rust** palette (warm off-white paper, deep charcoal ink, rust-orange accent). Good enough to screenshot straight away. But 60 seconds of onboarding is better — the skill will pull your brand from your website and apply it across every diagram. +Out of the box, diagrams render in a clean **jet-black + atomic-tangerine** palette (white-smoke paper, jet-black ink, atomic-tangerine accent, blue-slate muted, silver hairlines). Good enough to screenshot straight away. But 60 seconds of onboarding is better — the skill will pull your brand from your website and apply it across every diagram. ### The flow @@ -111,7 +128,7 @@ Before writing tokens, the skill verifies WCAG AA contrast on `ink` over `paper` ### Manual override -Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — the 13 types, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#b5523a`). +Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — all 14 diagrams, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#eb6c36`). ### First-run gate @@ -126,7 +143,7 @@ See [`skills/diagram-design/references/onboarding.md`](skills/diagram-design/ref ## Quickstart ```bash -# Open the gallery to see all 13 types +# Open the gallery to see all 14 diagrams open ~/.claude/skills/diagram-design/assets/index.html # In Claude Code, just ask: @@ -172,7 +189,8 @@ diagram-design/ ├── assets/ │ ├── index.html — live gallery, tabbed │ ├── template*.html — scaffolds for new diagrams -│ └── example-.html — 3 variants × 13 types +│ ├── example-.html — 3 variants × 13 types +│ └── example-quadrant-consultant.html — consultant-special 2×2 scenario matrix └── docs/screenshots/ — the images in this README ``` @@ -189,7 +207,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` | -| Routine diagram-making (any of the 13 types) | Only `SKILL.md` + that one type's reference | +| Routine diagram-making (any of the 14 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/docs/screenshots/architecture.png b/docs/screenshots/architecture.png index ce6c002..2d3d59b 100644 Binary files a/docs/screenshots/architecture.png and b/docs/screenshots/architecture.png differ diff --git a/docs/screenshots/er.png b/docs/screenshots/er.png index b0c8823..6faf4dd 100644 Binary files a/docs/screenshots/er.png and b/docs/screenshots/er.png differ diff --git a/docs/screenshots/flowchart.png b/docs/screenshots/flowchart.png index 24de235..f128a7d 100644 Binary files a/docs/screenshots/flowchart.png and b/docs/screenshots/flowchart.png differ diff --git a/docs/screenshots/layers.png b/docs/screenshots/layers.png index a7b91fa..bcd6653 100644 Binary files a/docs/screenshots/layers.png and b/docs/screenshots/layers.png differ diff --git a/docs/screenshots/nested.png b/docs/screenshots/nested.png index 8d1fff3..ec11f6a 100644 Binary files a/docs/screenshots/nested.png and b/docs/screenshots/nested.png differ diff --git a/docs/screenshots/pyramid.png b/docs/screenshots/pyramid.png index dfbddbf..7185390 100644 Binary files a/docs/screenshots/pyramid.png and b/docs/screenshots/pyramid.png differ diff --git a/docs/screenshots/quadrant-consultant.png b/docs/screenshots/quadrant-consultant.png new file mode 100644 index 0000000..450084c Binary files /dev/null and b/docs/screenshots/quadrant-consultant.png differ diff --git a/docs/screenshots/quadrant.png b/docs/screenshots/quadrant.png index 9c4b3d0..03e83bc 100644 Binary files a/docs/screenshots/quadrant.png and b/docs/screenshots/quadrant.png differ diff --git a/docs/screenshots/sequence.png b/docs/screenshots/sequence.png index b2c0a1d..d15d2ac 100644 Binary files a/docs/screenshots/sequence.png and b/docs/screenshots/sequence.png differ diff --git a/docs/screenshots/state.png b/docs/screenshots/state.png index d9c7197..89caf0c 100644 Binary files a/docs/screenshots/state.png and b/docs/screenshots/state.png differ diff --git a/docs/screenshots/swimlane.png b/docs/screenshots/swimlane.png index e8bd90c..a6d862c 100644 Binary files a/docs/screenshots/swimlane.png and b/docs/screenshots/swimlane.png differ diff --git a/docs/screenshots/timeline.png b/docs/screenshots/timeline.png index 16aca27..75755ff 100644 Binary files a/docs/screenshots/timeline.png and b/docs/screenshots/timeline.png differ diff --git a/docs/screenshots/tree.png b/docs/screenshots/tree.png index eb07877..0889ab1 100644 Binary files a/docs/screenshots/tree.png and b/docs/screenshots/tree.png differ diff --git a/docs/screenshots/venn.png b/docs/screenshots/venn.png index 609a67e..96e643f 100644 Binary files a/docs/screenshots/venn.png and b/docs/screenshots/venn.png differ diff --git a/skills/diagram-design/SKILL.md b/skills/diagram-design/SKILL.md index cc989ea..9586bbb 100644 --- a/skills/diagram-design/SKILL.md +++ b/skills/diagram-design/SKILL.md @@ -20,7 +20,7 @@ Thirteen diagram types. One shared design system, complexity budget, and taste g Open [`references/style-guide.md`](references/style-guide.md) and check the default tokens. If they're still the shipped defaults (paper `#faf7f2`, ink `#1c1917`, accent `#b5523a` rust), **pause and ask the user**: -> *"This is your first diagram in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) run onboarding — I'll pull colors and fonts from your website, (b) paste your tokens manually, (c) proceed with the default for now."* +> *"This is your first Schematic in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) run onboarding — I'll pull colors and fonts from your website, (b) paste your tokens manually, (c) proceed with the default for now."* Then branch: - **(a)** → follow [`references/onboarding.md`](references/onboarding.md) to fetch the site, extract palette + fonts, propose a diff, and write `style-guide.md`. @@ -39,11 +39,11 @@ Don't silently ship default-skinned diagrams into a branded project — that's t From `.impeccable.md`: *"Confident restraint. Earn every element. One color accent, two families, a small spacing vocabulary. If removing it wouldn't hurt the page, remove it."* -Applied to diagrams: +Applied to schematics: - Every node represents a distinct idea. Two nodes that always travel together are one node. - Every connection carries information. If the relationship is obvious from layout, remove the line. - Coral is **editorial, not a flag.** 1–2 focal nodes per diagram. Using it on 5 nodes erases the signal. -- The diagram isn't done when everything is added. It's done when nothing can be removed. +- The schematic isn't done when everything is added. It's done when nothing can be removed. **Target density: 4/10.** Enough to be technically complete. Not so dense it needs a guide. Above 9 nodes, it's probably two diagrams. @@ -94,7 +94,7 @@ Rules of thumb: ## 4. Universal Anti-patterns -These mark "AI slop" diagrams of any type: +These mark "AI slop" schematics of any type: | Anti-pattern | Why it fails | |---|---| @@ -115,7 +115,7 @@ Type-specific anti-patterns live in each `references/type-*.md`. ## 5. Design System -**The design system is skinnable.** All colors, typography, and tokens live in a single source of truth — [`references/style-guide.md`](references/style-guide.md). This file describes semantic roles (`paper`, `ink`, `muted`, `accent`, `link`, …). The default skin is littlemight.com (warm paper, ink, coral); to apply your own brand, either edit `style-guide.md` directly or run the URL-based flow described in [`references/onboarding.md`](references/onboarding.md). +**The design system is skinnable.** All colors, typography, and tokens live in a single source of truth — [`references/style-guide.md`](references/style-guide.md). This file describes semantic roles (`paper`, `ink`, `muted`, `accent`, `link`, …). The default skin is a cool editorial palette (white-smoke paper, jet-black ink, atomic-tangerine accent, blue-slate muted, silver hairlines); to apply your own brand, either edit `style-guide.md` directly or run the URL-based flow described in [`references/onboarding.md`](references/onboarding.md). > When specs below or in type references mention "ink", "accent", "muted", etc., look up the current hex value in `style-guide.md`. @@ -169,35 +169,45 @@ Universal building blocks. Type-specialized primitives (lifeline, activation bar ### Background +**Default: clean paper, no dot pattern.** Single `` filled with `paper`. Don't wrap the diagram in a secondary container background — the diagram sits directly on the page. + +```svg + +``` + +**Optional: dotted paper variant.** When a long-form editorial diagram benefits from textured ground (essays, hero diagrams on a dedicated page), opt in by adding the `dots` pattern and a second rect: + ```svg - + - + ``` +Don't use the dot pattern when the diagram sits inside a product page, slide, or card — the texture compounds with surrounding chrome and reads as noise. + ### Arrow markers (define all three, always) ```svg - + - + - + ``` | Arrow | Stroke | When | |---|---|---| -| Default | muted `#52534e` | Internal, generic | -| Accent | coral `#f7591f` | Primary / highlighted / headline | -| Link-blue | `#1a70c7` | HTTP/API calls, external systems | +| Default | muted `#4f5d75` | Internal, generic | +| Accent | coral `#eb6c36` | Primary / highlighted / headline | +| Link-blue | `#2e5aa8` | HTTP/API calls, external systems | | Dashed | `stroke-dasharray="5,4"` + any color | Optional, passive, return, async | **Draw arrows before boxes** so z-order puts lines behind nodes. @@ -206,7 +216,7 @@ Universal building blocks. Type-specialized primitives (lifeline, activation bar ```svg - + @@ -214,10 +224,10 @@ Universal building blocks. Type-specialized primitives (lifeline, activation bar API -Node Name -tech:port ``` @@ -226,8 +236,8 @@ Universal building blocks. Type-specialized primitives (lifeline, activation bar Every arrow label needs an opaque rect behind it. Without one it bleeds through the line. ```svg - - +WRITE ``` @@ -239,8 +249,8 @@ Rules: ≤14 characters, all-caps, centered on segment midpoint, 8–10px above ```svg - +LEGEND ``` @@ -291,7 +301,7 @@ If you exceed, split into two diagrams (overview + detail). ### Page layout 1. **Header** — eyebrow (Geist Mono), title (Instrument Serif), optional subtitle (Geist muted). -2. **Diagram container** — `#efeee5` bg, 1px `rgba(11,13,11,0.12)` border, 8px radius, `overflow-x: auto`. +2. **Diagram container** — default: **clean, borderless**, no background — the SVG sits directly on the page paper. Optional *framed* variant (for card-heavy layouts or hero placements): `paper-2` bg + 1px `rule` border + 8px radius + `1.5rem` padding + `overflow-x: auto`. 3. **Summary cards** — 2–3 col grid with *varied* widths (e.g., `1.1fr 1fr 0.9fr`). 4. **Footer** — colophon in Geist Mono, muted, hairline top border. @@ -314,7 +324,7 @@ Don't use 3 identical generic cards. Vary the treatment: Rules: - `background: #ffffff` (not paper — slight lift without shadow) -- `border: 1px solid rgba(11,13,11,0.12)` +- `border: 1px solid rgba(45,49,66,0.12)` - `border-radius: 6px`, `padding: 1.25rem` - **No `box-shadow`** - Card dots: 7px, `border-radius: 50%` — ink / muted / coral / link / soft variants @@ -343,7 +353,7 @@ Run before producing any diagram. **Technical:** - [ ] Arrows drawn before boxes? -- [ ] Every arrow label has an opaque `fill="#f5f4ed"` rect behind it? +- [ ] Every arrow label has an opaque `fill="#f5f5f5"` rect behind it? - [ ] Legend is a horizontal bottom strip, not floating? - [ ] No vertical `writing-mode` text? - [ ] `viewBox` expanded for the legend strip (~60px)? @@ -367,6 +377,7 @@ Every diagram ships in three variants (see `assets/`): | **Minimal light** (default) | `template.html`, `example-.html` | Screenshot-ready. Diagram + title. Warm paper. | | **Minimal dark** | `template-dark.html`, `example--dark.html` | Dark mode sites, slides, high-contrast posts. | | **Full editorial** | `template-full.html`, `example--full.html` | Long-form posts where the diagram is the hero. | +| **Consultant special** (quadrant only) | `example-quadrant-consultant.html` | BCG/McKinsey-style 2×2 scenario matrix. Clinical sans-serif, white bg, bold blue double-ended axes, named scenario cells. See [type-quadrant.md](references/type-quadrant.md#consultant-special-2x2-scenario-matrix). | **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. diff --git a/skills/diagram-design/assets/example-architecture-dark.html b/skills/diagram-design/assets/example-architecture-dark.html index 03bcd71..f82abf3 100644 --- a/skills/diagram-design/assets/example-architecture-dark.html +++ b/skills/diagram-design/assets/example-architecture-dark.html @@ -3,15 +3,15 @@ - littlemight.com · Architecture + Content site · Architecture

Architecture · Diagram Design

-

littlemight.com in production

+

Content site in production

The static-first stack: Cloudflare's edge absorbs most reads, Astro renders MDX on misses, content is checked into the repo.

@@ -51,101 +51,101 @@ - + - - - + + + - + - - - - + + + + - - HTTPS + + HTTPS - - SSR + + SSR - - READ MDX + + READ MDX - - QUERY + + QUERY - - - - EXT - Reader - Browser + + + + EXT + Reader + Browser - - - - EDGE - 01 - Cloudflare - Pages · cache + + + + EDGE + 01 + Cloudflare + Pages · cache - - - - ORIG - 02 - Astro Origin - SSR + MDX + + + + ORIG + 02 + Astro Origin + SSR + MDX - - - - BUN - MDX Bundle - src/content/*.mdx + + + + BUN + MDX Bundle + src/content/*.mdx - - - - CMS - Content CMS - assets · og images + + + + CMS + Content CMS + assets · og images - - LEGEND + + LEGEND - - Focal / origin + + Focal / origin - - Backend / bundle + + Backend / bundle - - Store + + Store - - Cloud + + Cloud - - External + + External - - HTTP request + + HTTP request - - Primary flow + + Primary flow
@@ -166,8 +166,8 @@
- littlemight.com · architecture - example · diagram-design + content site · architecture + example · schematic skill
diff --git a/skills/diagram-design/assets/example-architecture.html b/skills/diagram-design/assets/example-architecture.html index 53e67d2..e9d32fe 100644 --- a/skills/diagram-design/assets/example-architecture.html +++ b/skills/diagram-design/assets/example-architecture.html @@ -3,15 +3,15 @@ - littlemight.com · Architecture + Content site · Architecture

ER · Diagram Design

-

littlemight content model

+

Content platform · data model

The four entities behind the site. Article is the aggregate root — everything else exists to describe or classify it. `#` marks primary keys, `→` marks foreign keys.

@@ -42,139 +42,139 @@ - + - + - + - + - + - + - - 1 + + 1 - - N + + N - - 1 + + 1 - - N + + N - - 1 + + 1 - - N + + N - - WRITES + + WRITES - - TAGGED + + TAGGED - - - - - ENTITY - Author - # id - uuid - handle - text - name - text - bio - text - site_url - text + + + + + ENTITY + Author + # id + uuid + handle + text + name + text + bio + text + site_url + text - - - - - ENTITY · AGGREGATE ROOT - Article - # id - uuid - title - text - slug - text · unique - body_mdx - text - published_at - timestamp - → author_id - uuid - status - enum - og_image - text · url + + + + + ENTITY · AGGREGATE ROOT + Article + # id + uuid + title + text + slug + text · unique + body_mdx + text + published_at + timestamp + → author_id + uuid + status + enum + og_image + text · url - - - - - ENTITY - Tag - # id - uuid - slug - text · unique - name - text - description - text + + + + + ENTITY + Tag + # id + uuid + slug + text · unique + name + text + description + text - - - - - JOIN - ArticleTag - → article_id - uuid - → tag_id - uuid + + + + + JOIN + ArticleTag + → article_id + uuid + → tag_id + uuid - - LEGEND + + LEGEND - - Aggregate root + + Aggregate root - - Entity + + Entity - - Join table + + Join table - # - Primary key + # + Primary key - → - Foreign key + → + Foreign key - 1 / N - Cardinality + 1 / N + Cardinality
@@ -195,8 +195,8 @@
- littlemight content model · ER - example · diagram-design + Content platform · ER model + example · schematic skill
diff --git a/skills/diagram-design/assets/example-er.html b/skills/diagram-design/assets/example-er.html index 7f0155f..71aa489 100644 --- a/skills/diagram-design/assets/example-er.html +++ b/skills/diagram-design/assets/example-er.html @@ -3,15 +3,15 @@ - littlemight content model · ER + Content platform · ER model @@ -42,93 +42,93 @@ - + - - + + - + - + - + - + - + - + - + - - NO + + NO - - YES + + YES - - NO + + NO - - YES + + YES - - New workflow + + New workflow - - Do it manually once + + Do it manually once - - Will you repeat - it >3 times? + + Will you repeat + it >3 times? - - One-off - keep manual + + One-off + keep manual - - Reusable across - projects? + + Reusable across + projects? - - CLAUDE.md note - project-scoped + + CLAUDE.md note + project-scoped - - Write a skill - reusable + assets + + Write a skill + reusable + assets - - LEGEND · SHAPE CARRIES TYPE + + LEGEND · SHAPE CARRIES TYPE - - Start / end (oval) + + Start / end (oval) - - Step (rectangle) + + Step (rectangle) - - Decision (diamond) + + Decision (diamond) - - Happy path + + Happy path - - Branch + + Branch @@ -150,7 +150,7 @@
flowchart · should I write this as a skill? - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-flowchart.html b/skills/diagram-design/assets/example-flowchart.html index 995f96c..0e3096a 100644 --- a/skills/diagram-design/assets/example-flowchart.html +++ b/skills/diagram-design/assets/example-flowchart.html @@ -8,10 +8,10 @@ @@ -42,60 +42,60 @@ - + - + - ABSTRACTION - - - SILICON + ABSTRACTION + + + SILICON - - + + - - L5 - UI surface - chat, editor, canvas + + L5 + UI surface + chat, editor, canvas - - - L4 - Agent harness - tools, memory, loop + + + L4 + Agent harness + tools, memory, loop - - - L3 - Prompt layer - system, few-shot, caching + + + L3 + Prompt layer + system, few-shot, caching - - - L2 - SDK / client - auth, retries, streaming + + + L2 + SDK / client + auth, retries, streaming - - L1 - Model weights - opus, sonnet, haiku + + L1 + Model weights + opus, sonnet, haiku - FOCAL LAYER - The harness is where most product differentiation actually lives — tools, memory, and the loop that stitches model calls into useful work. + FOCAL LAYER + The harness is where most product differentiation actually lives — tools, memory, and the loop that stitches model calls into useful work. @@ -117,7 +117,7 @@
ai app stack · layer hierarchy - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-layers.html b/skills/diagram-design/assets/example-layers.html index 809d5cf..71451d6 100644 --- a/skills/diagram-design/assets/example-layers.html +++ b/skills/diagram-design/assets/example-layers.html @@ -8,10 +8,10 @@ @@ -42,69 +42,69 @@ - + - + - + - + - + - + - + - - ~/.claude/ (global) + + ~/.claude/ (global) - - ~/vault/ (notes) + + ~/vault/ (notes) - - /business + + /business - - /marketing + + /marketing - - /project + + /project - - + + - - + + - - + + - - + + - CLAUDE.md - inherits every level above + CLAUDE.md + inherits every level above - no imports, no configuration - - + no imports, no configuration + + - structure IS the index + structure IS the index @@ -126,7 +126,7 @@
the claude.md hierarchy · nested containment - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-nested.html b/skills/diagram-design/assets/example-nested.html index fa2de9e..def5d0a 100644 --- a/skills/diagram-design/assets/example-nested.html +++ b/skills/diagram-design/assets/example-nested.html @@ -8,10 +8,10 @@ @@ -42,56 +42,56 @@ - + - + - - - RARER · FEWER · COMPOUNDS ↑ + + + RARER · FEWER · COMPOUNDS ↑ - - Short posts - daily · ~200 words - ~240/yr + + Short posts + daily · ~200 words + ~240/yr - - Essays - weekly · 800–1,500 words - ~48/yr + + Essays + weekly · 800–1,500 words + ~48/yr - - Long-form guides - quarterly · 4,000+ words - ~4/yr + + Long-form guides + quarterly · 4,000+ words + ~4/yr - - - Flagship book - every 3–5 years - the apex + + + Flagship book + every 3–5 years + the apex - The base funds the apex. The apex defines the base. + The base funds the apex. The apex defines the base. - - LEGEND + + LEGEND - - Apex — rarest, highest leverage + + Apex — rarest, highest leverage - - Supporting layer — the volume work + + Supporting layer — the volume work - Layer width is honest: narrower = rarer shipping cadence. + Layer width is honest: narrower = rarer shipping cadence. @@ -113,7 +113,7 @@
content pyramid · what compounds - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-pyramid.html b/skills/diagram-design/assets/example-pyramid.html index 3592abb..a63d234 100644 --- a/skills/diagram-design/assets/example-pyramid.html +++ b/skills/diagram-design/assets/example-pyramid.html @@ -8,10 +8,10 @@ + + +
+
+

Quadrant · Consultant special

+

Workplace 2030 · Remote × AI automation

+

Four named futures, one matrix. Scenario planning in the consultant 2×2 form — two independent drivers, four equal-weight cells, one quadrant carrying the coral bet.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + 01 · REMOTE / HUMAN + Distributed humans + Async-first, global hiring, + Slack-heavy. Human-centric + workflows, low AI leverage. + + + + 02 · REMOTE / AI + Agent teams ● + Humans orchestrate; AI + handles the routine layer. + Small, high-leverage teams. + + + + 03 · IN-PERSON / HUMAN + Office classic + Return-to-office mandates, + manual work. Techlash + prolongs the status quo. + + + + 04 · IN-PERSON / AI + In-person + AI + Smart offices, AI-augmented + staff. Physical presence is + the moat, AI is the lever. + + + + + + + REMOTE + + IN-PERSON + + HUMAN + + AI + + + + + Headline bet + + Candidate future + Every cell is named. The axes carry the range; the coral quadrant carries the commitment. + +
+ +
+
+

THE HEADLINE

+

Name every future

+

Scenario planning fails when three of the four cells are placeholders. Forcing a name on each future — even the "won't happen" ones — surfaces the assumptions hiding in the axes.

+
+
+

Variant rules

+
    +
  • Double-ended arrows on both axes (spectrum, not flow)
    • +
  • Named cells, not plotted items
    • +
  • Driver name + range on each arrow tip
    • +
  • Coral on one focal quadrant max
    • +
+
+
+

When to use

+

Reach for the consultant 2×2 for scenario planning, positioning frames, or strategy sessions where four named archetypes beat a plotted point cloud. If you're prioritising, use the standard quadrant instead.

+
+
+ +
+ workplace 2030 · remote × AI automation + example · consultant special +
+
+ + diff --git a/skills/diagram-design/assets/example-quadrant-dark.html b/skills/diagram-design/assets/example-quadrant-dark.html index 128cc5a..6ef5035 100644 --- a/skills/diagram-design/assets/example-quadrant-dark.html +++ b/skills/diagram-design/assets/example-quadrant-dark.html @@ -8,10 +8,10 @@ @@ -42,72 +42,72 @@ - + - + - + - - + + - HIGH EFFORT → - ← LOW EFFORT - ↑ HIGH IMPACT - ↓ LOW IMPACT + HIGH EFFORT → + ← LOW EFFORT + ↑ HIGH IMPACT + ↓ LOW IMPACT - DO FIRST - MAJOR PROJECTS - QUICK WINS - AVOID + DO FIRST + MAJOR PROJECTS + QUICK WINS + AVOID - - diagram-design + + Schematic skill v4 - - Update changelog + + Update changelog - - Design v4 refresh + + Design v4 refresh - - New publication + + New publication - - Fix footer link + + Fix footer link - - Update OG tags + + Update OG tags - - Rewrite build pipeline + + Rewrite build pipeline - - Port to Nuxt + + Port to Nuxt - - LEGEND + + LEGEND - - Start tomorrow + + Start tomorrow - - Candidate project + + Candidate project - Position is the signal. Colour is reserved for the single action item. + Position is the signal. Colour is reserved for the single action item. @@ -129,7 +129,7 @@
content ideas · impact × effort - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-quadrant.html b/skills/diagram-design/assets/example-quadrant.html index 9521c42..adcfac4 100644 --- a/skills/diagram-design/assets/example-quadrant.html +++ b/skills/diagram-design/assets/example-quadrant.html @@ -8,10 +8,10 @@ @@ -42,84 +42,84 @@ - + - - + + - + - + - + - + - + - + - + - - CREATE + + CREATE - - SUBMIT + + SUBMIT - - APPROVE + + APPROVE - - EXPIRE + + EXPIRE - - PURGE + + PURGE - - REJECT · REVISE + + REJECT · REVISE - + - - - STATE - Draft - unpublished + + + STATE + Draft + unpublished - - - STATE - In Review - awaiting approval + + + STATE + In Review + awaiting approval - - - STATE - Published - live on site + + + STATE + Published + live on site - - - STATE - Archived - noindex · hidden - redirect retained + + + STATE + Archived + noindex · hidden + redirect retained - - + + @@ -141,7 +141,7 @@
article lifecycle · state machine - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-state.html b/skills/diagram-design/assets/example-state.html index 02276fa..f011b70 100644 --- a/skills/diagram-design/assets/example-state.html +++ b/skills/diagram-design/assets/example-state.html @@ -8,10 +8,10 @@ @@ -42,109 +42,109 @@ - + - - + + - + - - - - - + + + + + - + - AUTHOR - REVIEWER - EDITOR - CI / CD + AUTHOR + REVIEWER + EDITOR + CI / CD - + - + - + - + - + - + - - HANDOFF + + HANDOFF - - REVISE + + REVISE - - DEPLOY TRIGGER + + DEPLOY TRIGGER - - Draft MDX - src/content/… + + Draft MDX + src/content/… - - Open PR - gh pr create + + Open PR + gh pr create - - Review content - fact-check · voice + + Review content + fact-check · voice - - Polish copy - style · line edits + + Polish copy + style · line edits - - Approve merge - squash · main + + Approve merge + squash · main - - Build - astro build + + Build + astro build - - Deploy - cloudflare pages + + Deploy + cloudflare pages - - LEGEND + + LEGEND - - Step + + Step - - Focal outcome + + Focal outcome - - Within-lane step + + Within-lane step - - Revision loop + + Revision loop - - Critical handoff + + Critical handoff @@ -166,7 +166,7 @@
publishing an article · swimlane - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-swimlane.html b/skills/diagram-design/assets/example-swimlane.html index af2ad80..32ee268 100644 --- a/skills/diagram-design/assets/example-swimlane.html +++ b/skills/diagram-design/assets/example-swimlane.html @@ -8,10 +8,10 @@

Timeline · Diagram Design

-

littlemight, fourteen months

-

Five design moments from the first post to the current diagram-design overhaul. Spacing is proportional to calendar time — the five-month gap between v1 and v2 is genuinely wider on the page.

+

Product launch · fourteen months

+

Five design moments from the first post to the current schematic overhaul. Spacing is proportional to calendar time — the five-month gap between v1 and v2 is genuinely wider on the page.

- + - + - 2025 - 2026 + 2025 + 2026 - + - - JAN '26 + + JAN '26 - - + + - - - FEB 2025 - First post + + + FEB 2025 + First post - - - APR 2025 - Design v1 + + + APR 2025 + Design v1 - - - SEP 2025 - Design v2 - typography pass + + + SEP 2025 + Design v2 + typography pass - - - JAN 2026 - Design v3 - complexity budget + + + JAN 2026 + Design v3 + complexity budget - - - APR 2026 · NOW - diagram-design - eight diagram types + + + APR 2026 · NOW + Schematic skill + eight diagram types - - LEGEND + + LEGEND - - Event + + Event - - Major milestone + + Major milestone - Spacing is proportional to real elapsed time. + Spacing is proportional to real elapsed time.
@@ -128,8 +128,8 @@
- littlemight · design lineage - example · diagram-design + product · design lineage + example · schematic skill
diff --git a/skills/diagram-design/assets/example-timeline.html b/skills/diagram-design/assets/example-timeline.html index 9a361e4..f3659c6 100644 --- a/skills/diagram-design/assets/example-timeline.html +++ b/skills/diagram-design/assets/example-timeline.html @@ -3,15 +3,15 @@ - littlemight milestones · Timeline + Product milestones · Timeline @@ -42,110 +42,110 @@ - + - + - TIER 0 · ROOT - TIER 1 - TIER 2 + TIER 0 · ROOT + TIER 1 + TIER 2 - - - + + + - - + + - - + + - + - - - - ROOT - Skills + + + + ROOT + Skills - - - - CAT - Design - ui · visual · ux + + + + CAT + Design + ui · visual · ux - - - - CAT - Engineering - ship · review · test + + + + CAT + Engineering + ship · review · test - - - - CAT - Research - investigate · analyze + + + + CAT + Research + investigate · analyze - - - polish - align · space · rhythm + + + polish + align · space · rhythm - - - critique - hierarchy · density + + + critique + hierarchy · density - - - review - pre-land diff · sql + + + review + pre-land diff · sql - - - ship - merge · deploy · verify + + + ship + merge · deploy · verify - - - investigate - root cause · evidence + + + investigate + root cause · evidence - - LEGEND + + LEGEND - - Root · focal + + Root · focal - - Category branch + + Category branch - - Leaf skill + + Leaf skill - Orthogonal connectors only. Coral marks the root — every branch descends from one idea. + Orthogonal connectors only. Coral marks the root — every branch descends from one idea. @@ -167,7 +167,7 @@
claude code skill taxonomy - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-tree.html b/skills/diagram-design/assets/example-tree.html index 33248d9..e391dee 100644 --- a/skills/diagram-design/assets/example-tree.html +++ b/skills/diagram-design/assets/example-tree.html @@ -8,10 +8,10 @@ @@ -42,7 +42,7 @@ - + @@ -52,59 +52,59 @@ - + - + - + - + - + - Desirable - PEOPLE WANT IT + Desirable + PEOPLE WANT IT - Feasible - WE CAN BUILD IT + Feasible + WE CAN BUILD IT - Viable - BUSINESS SUSTAINS + Viable + BUSINESS SUSTAINS - Prototype - no business model + Prototype + no business model - Vaporware - can't build it + Vaporware + can't build it - Internal tool - nobody wants it + Internal tool + nobody wants it - Shippable - THE SWEET SPOT + Shippable + THE SWEET SPOT - - LEGEND + + LEGEND - - All three — ship it + + All three — ship it - - Two of three — incomplete + + Two of three — incomplete - Coral marks the intersection that earns the work. The others name the traps. + Coral marks the intersection that earns the work. The others name the traps. @@ -126,7 +126,7 @@
good design · desirable × feasible × viable - example · diagram-design + example · schematic skill
diff --git a/skills/diagram-design/assets/example-venn.html b/skills/diagram-design/assets/example-venn.html index 4bc13b7..a9314d0 100644 --- a/skills/diagram-design/assets/example-venn.html +++ b/skills/diagram-design/assets/example-venn.html @@ -8,10 +8,10 @@