Claude Cursor Skill

editorial-illustrations

Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent. This is a GENERATIVE GUIDE, not a template gallery: it teaches the "claim -> geom

LLM Mart · 0 points · 0 views 0 listing impressions 0 install-command copies
Virus-scanned Reviewed automatically before listing.

Full trust report

Download huytieu-cog-second-brain-skills_editorial-illustrations-4cdb601.zip · 25 KB
huytieu/cog-second-brain 1236 147 forks MIT Updated 12h ago
Part of huytieu/cog-second-brain — 108 skills

Install

skills CLI npx skills add https://github.com/huytieu/COG-second-brain/tree/main/skills/editorial-illustrations
Claude Code claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install huytieu-cog-second-brain@llmmart
Git git clone https://github.com/huytieu/COG-second-brain.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole huytieu/cog-second-brain collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

Editorial illustrations — claim → geometry

The look you want (monotykamary.com, linear.app/now) is not a chart library. It is a discipline: every figure is a single argument rendered as geometry, framed in a hairline box, captioned in mono uppercase with the meaning, drawn in grayscale with exactly one accent. Get the discipline right and any shape reads as "house." Copy templates blindly and it reads as slop.

Do not reach for a fixed set of charts. Reach for the method below and build the figure this specific sentence needs. The six worked examples in references/worked-examples.md are proof the method generalizes, not a menu.

The core move

Take the one sentence the figure must prove. Find that sentence's structure. Render the structure so the reader believes the sentence before reading it.

The caption is the thesis, written first. If you can't state the figure's claim in one sentence, you don't have a figure yet, you have decoration. Stop.

Method (run this every time)

  1. Write the claim. One declarative sentence. This becomes the <figcaption> verbatim. Example: "Nothing is billable until work crosses the delivery boundary."

  2. Name the claim's structure. Which of these is the sentence really about? Match to a geometric primitive:

    If the claim is about… Render it as… Atom (§5)
    a spectrum / more-vs-less / a gradient ordered cells, rising fill 5a
    ranked magnitudes / shares / a comparison horizontal bars, real axis 5b
    a sequence with a tipping point stage grid + traveling dot 5a + rail
    mutual causation / a feedback relationship two coupled orbits + bridge 5d
    a branch / decision under uncertainty node-and-branch SVG tree 5c
    one thing changing form / a data pipeline stage rail, a glyph per stage 5e
    accumulation toward a target stacked / filling bar 5a/5b
    a boundary / inside-vs-outside a framed region + a crossing compose
    a distribution / where mass sits dot-strip or small-multiples compose

    If nothing matches, compose a new primitive from the atoms in references/design-system.md §5. The novelty is expected and welcome; the tokens and restraint are what must stay constant.

  3. Locate the point. Which single element proves the claim? That one gets --accent (coral). Everything else stays grayscale. One accent, maybe two. No point → the figure has no thesis → go back to step 1.

  4. Draw in the system. Apply references/design-system.md: tokens, the typography law (display = Inter 480–540 tight; everything else mono, tiny, UPPERCASE labels), the framed-figure chrome, 720-wide SVG viewBox, hairlines only, no chartjunk.

  5. Add motion only if it demonstrates the claim. A dot that pauses before a boundary; a pulse crossing between two loops; a signal falling down a branch. 2–6s, ease-in-out, and always killed under prefers-reduced-motion. If motion doesn't show the argument, omit it. Static is fine and often better.

  6. Caption it. Mono, 8px, uppercase, above-the-rule. State the meaning, not the data source alone. ("…because X," not "Figure 3.")

The aesthetic in one breath

  • Field: matches the host — near-black --ground:#080807 on a dark page, white/ off-white on a light page (both token sets in design-system.md). Framed figures on a faint surface; backdrop-filter: blur(16px) on dark, a hairline + faint shadow on light.
  • Type: Inter for the rare big display; mono for everything inside a figure, 7–11px, labels/captions UPPERCASE. Never a second sans, never a bold display.
  • Color: grayscale ramp (--ink → --quiet) + one accent = Claude-coral #D97757, on the point only. (Set --accent: var(--ink) for monotykamary-faithful pure grayscale.)
  • Structure: 1px hairlines, true-circle nodes, dashed = provisional/failure, no shadows, no gradients except a single axis-direction hairline.
  • Density: small type, tight cells, edge-to-edge. Restraint is the style.

Full spec + copy-paste token blocks (dark AND light) + primitive CSS: references/design-system.md. Worked examples with the claim→geometry reasoning: references/worked-examples.md. Non-chart editorial elements (metric strip, status aside, kicker+sigil, numbered chapter index, prose type, inline cards): references/elements.md. Live rendered proof (coral house style, toggleable): assets/gallery.html.

The figure follows the host page's theme (ALWAYS)

A figure is a guest on someone's page. It must match that page's light/dark, not impose its own. A dark exhibit panel dropped into a light article reads as a foreign object (learned the hard way, 2026-07-22).

  • Look at the host first. Light page → light figure. Dark page → dark figure. a host site may default light and carry its own theme toggle (e.g. Charter serif heads + Public Sans body, blue accent) that stamps data-theme="light"|"dark" on <html> — figures there must follow data-theme, defaulting light.
  • If the host has an explicit theme system, key the dark override off IT, not the media query. Use :root[data-theme="dark"] .yourfig { … }, NOT @media (prefers-color-scheme: dark). Real bug (2026-07-22): a figure keyed on the media query rendered dark on the light blog because the viewer's OS was dark and the page theme was light. The page's data-theme is the source of truth; the media query only applies on hosts that have no toggle. On a toggled host, match the site's own dark tokens (ground #171b22, line #262c36, ink #f1f5f9) so the figure's dark panel sits in the site's dark, not a foreign near-black.
  • Build token-based so it adapts. Define the palette on the figure's own scope, default = the host's default theme, plus a :root[data-theme="dark"] .fig override (and a @media (prefers-color-scheme: dark) override too ONLY if the host has no toggle). Costs nothing, future-proofs the figure.
  • Coral is AA-safe per ground. On white use --accent:#c15f3c for text/strokes (keep #D97757 only for large node fills); on near-black use #D97757 directly.
  • The claim→geometry method and the restraint rules are theme-independent. Only the palette tokens swap. Grayscale-ramp + one coral accent holds on both grounds.

Output contract

  • One self-contained <figure> per illustration: inline <style> scoped to the figure (or shared token :root), inline SVG, no external requests.
  • Theme = host's (see above): light default when embedded in a light page, but always token-based with prefers-color-scheme + :root[data-theme] overrides, and reduced-motion-safe. Both are house rules, not optional.
  • For an Artifact: no external fonts/CDN (CSP blocks them); inline @font-face data-URIs or fall back to system-ui/ui-monospace.
  • For blog posts on your own site: emit the figure HTML/CSS into the post body (markdown passes raw HTML through verbatim via build.py). The blog is light, so the light tokens apply; keep the dark override for portability. Rebuild with python3 build.py; the built page uses absolute asset paths so preview it via a local server or a self-contained standalone copy, never a bare file:// open (that renders the post unstyled). See a local self-contained HTML preview.

Verify (mandatory — this is a UI/UX output)

Per the Visual Verification rule, a DOM check is not enough. Render it and look.

  1. Open the figure in browser-harness, screenshot it (evidence_shot).
  2. Read the image against the claim: does the geometry make the sentence obvious? Is coral on the point and nowhere else? Any clipped mono text, misaligned SVG labels, off-by-one bar math, broken responsive stack at ≤720px?
  3. Fix what you see, re-shot to prove it. Check the light variant too.
  4. Confirm motion stops under reduced-motion.

Anti-slop checklist (reject the figure if any fail)

  • The figcaption is a real claim, stated in one sentence.
  • The geometry encodes that claim's structure (not a generic chart pinned on).
  • Exactly one accent element (coral), on the point.
  • Every in-figure label/value/caption is mono + tiny; labels UPPERCASE.
  • Hairlines only; no shadows, no gradients (bar-axis hairline excepted), no rounded rectangles.
  • Gridlines present only if the figure is genuinely quantitative.
  • Motion (if any) demonstrates the claim and dies under reduced-motion.
  • Renders correctly in both dark and light, and stacks cleanly on mobile.
Files (cog-second-brain)
  • assets
    • gallery.html 24.2 KB · in bundle
  • references
    • design-system.md 9.5 KB 
      # Design system — the raw grammar

Reverse-engineered from the rendered source of **monotykamary.com** posts and
**linear.app/now** (2026-07-22). Both share one DNA; this file is the extracted,
coral-adapted building set. Copy tokens and base rules verbatim; invent the figure
markup per post (see `SKILL.md` for the method).

## 1. Tokens (coral house style)

Grayscale base (the mono DNA), **one** accent = Claude-coral. The accent marks the
*point* of the figure and nothing else. **Pick the token set that matches the host
page** (light page → light set), and ship the other as an override so the figure
adapts. Dark set first, then two light variants (a warm generic one and the exact
host-site-matched one).

```css
:root {
  /* surfaces */
  --ground:        #080807;   /* page / deepest field           */
  --ground-deep:   #030303;   /* recessed track behind fills    */
  --surface:       #080807cc; /* framed-figure background (alpha)*/
  --surface-solid: #0c0c0b;   /* solid card inside a figure      */
  /* ink ramp */
  --ink:       #f2f2ed;       /* primary text, strong marks      */
  --ink-soft:  #d0d0c9;       /* secondary fills, sub-headlines  */
  --muted:     #92928a;       /* labels                          */
  --quiet:     #5f5f59;       /* axis numbers, captions, index   */
  /* structure */
  --line:        #292925;     /* hairline borders, gridlines     */
  --line-strong: #54544e;     /* branch strokes, dashed rails    */
  /* THE one accent */
  --accent:      #D97757;     /* Claude-coral — the single color */
  --accent-soft: #e6a488;     /* coral tint for a second beat    */
  /* type */
  --sans: "Inter", "Inter Variable", system-ui, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Variable", ui-monospace,
          "SF Mono", Menlo, Consolas, monospace;
}

/* Light variant A — warm, monotykamary-flavored inverted field. */
:root[data-theme="light"], .light {
  --ground:#f7f7f2; --ground-deep:#ecece6; --surface:#f7f7f2cc; --surface-solid:#fbfbf7;
  --ink:#191917; --ink-soft:#3d3d38; --muted:#6a6a62; --quiet:#9a9a90;
  --line:#deded6; --line-strong:#b7b7ad;
  --accent:#c15f3c; --accent-soft:#d97757; /* coral darkened for AA on light */
}

/* Light variant B — EXACT host-site match. Use this for blog-embedded figures.
   Blog tokens: --bg:#f7f8fb, surface #fff, text #111827, muted #64748b,
   border #e2e8f0, body font JetBrains Mono. Cool grays, coral accent. */
:root[data-theme="host"], .host {
  --ground:#ffffff; --ground-deep:#f1f3f7; --surface:#ffffff; --surface-solid:#ffffff;
  --ink:#111827; --ink-soft:#334155; --muted:#64748b; --quiet:#94a3b8;
  --line:#e6e8ee; --line-strong:#cbd5e1;
  --accent:#c15f3c;      /* coral, AA-safe on white for text/strokes */
  --accent-node:#d97757; /* house coral for large node fills only    */
}
```

On a light ground, drop `backdrop-filter: blur()` (nothing to blur over white) and
add a faint `box-shadow: 0 1px 2px rgba(16,24,40,.04)` on the frame so it lifts off
the page. On dark, keep the blur and no shadow.

Original grayscale-faithful mode: set `--accent: var(--ink)` (accent == white). That
is monotykamary 1:1. Coral is our deviation, applied as a single token so it is
one line to switch.

## 2. Typography law

- **Display** = `--sans`, weight **480–540**, tight tracking **-0.03em to -0.06em**,
  line-height ~0.98. Big and quiet. (monotykamary h1 = 68px / weight 480 / -4px.)
- **Everything else in a figure is `--mono`**: labels, axis numbers, values,
  captions, the index numerals (`01 02 03`). Tiny — **7px to 11px**.
- **Labels & captions are UPPERCASE**, `letter-spacing: 0.04em–0.1em`.
- Values that carry the number are `font-weight: 700`, colored `--ink` or `--accent`.
- Never mix a second sans. Never use a display weight above ~560.

Observed sizes (use as the scale): caption/axis **7–8px**, label **10px**,
figure sub-headline (`<b>`) **11px**, index **8px**.

## 3. The framed figure (chrome)

Every illustration is a `<figure>` with a hairline frame and a mono UPPERCASE
`<figcaption>` that states the *meaning*, divided by a top rule.

```css
.fig {                       /* base frame for every illustration */
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px);
  margin: 52px 0;
  padding: 20px;
}
.fig figcaption {
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font: 8px/1.6 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 18px;
  padding-top: 13px;
}
.fig svg { width: 100%; height: auto; display: block; }
```

SVG figures use a **720-wide viewBox** (`viewBox="0 0 720 <h>"`) so labels stay
crisp and math is easy. Give every figure `role="img"` + `aria-label`, or
`aria-labelledby` pointing at the figcaption.

## 4. Restraint rules (what makes it not-slop)

1. **Grayscale + exactly one accent.** Coral appears on 1–2 elements: the row that
   is the point, the committed state, the live signal. If everything is coral,
   nothing is.
2. **Hairlines only.** 1px borders, 1px gridlines. No drop shadows except the
   `inset 0 2px var(--ink)` focus underline. No rounded corners except true circles
   (nodes, orbit).
3. **No chartjunk.** Gridlines only when the figure is quantitative (a real axis).
   No legend if labels sit on the marks. No 3D, no gradients except a single
   axis-direction hairline gradient (`--quiet → --ink`).
4. **Density is the aesthetic.** Small mono type, tight cells, edge-to-edge. White
   space is structural, not padding.
5. **Motion is meaning or nothing.** One subtle loop that *demonstrates the claim*
   (a signal travelling a pipeline, a bridge pulse between two loops). 2–6s,
   `ease-in-out`. Always wrap in `@media (prefers-reduced-motion: reduce)` to kill it.

## 5. Reusable primitives (CSS blocks)

These are the atoms observed across the six worked examples. Compose them into new
figures; do not treat them as fixed charts.

### 5a. Cell grid (spectrum / pipeline / rail)
Row of bordered cells, each with an index, a bold label, a small descriptor, and an
optional bottom "fill" bar whose height/opacity encodes a value.

```css
.cells { display:grid; grid-template-columns:repeat(var(--n,5),1fr); }
.cells section { position:relative; overflow:hidden; display:flex; flex-direction:column;
  min-height:145px; padding:12px; border:1px solid var(--line); border-right:0; }
.cells section:last-child { border-right:1px solid var(--line); }
.cells section > span  { color:var(--quiet); font:8px/1 var(--mono); }        /* index */
.cells section > b     { margin-top:auto; color:var(--ink); font-size:11px; font-weight:540; }
.cells section > small { margin-top:5px; min-height:32px; color:var(--muted); font:7px/1.4 var(--mono); }
/* value-as-fill: set --v (0..1) per cell */
.cells section > i { position:absolute; inset:auto 0 0; height:calc(var(--v)*100%);
  background:var(--accent); opacity:calc(.10 + var(--v)*.5); transition:height .4s; }
.cells section:hover > i { opacity:calc(.25 + var(--v)*.6); }
```

### 5b. Horizontal bars (ranked magnitude)
SVG, 720 viewBox. Track = `--ground-deep`, fill = `--ink-soft`; the **point row**
fill = `--accent`. Value label mono-bold, right-aligned inside/after the bar.

```css
.bars .track { fill:var(--ground-deep); }
.bars .fill  { fill:var(--ink-soft); transition:opacity .18s; }
.bars .row--accent .fill { fill:var(--accent); }
.bars .row:hover .fill, .bars .row:focus .fill { opacity:.72; }
.bars .label { fill:var(--muted); font:10px var(--mono); }
.bars .grid line { stroke:var(--line); }
.bars .grid text { fill:var(--quiet); font:8px var(--mono); }
.bars .value { fill:var(--ink); font:700 8px var(--mono); }
.bars .row--accent .value { fill:var(--accent); }
```
Bar math (viewBox 720, plot x0=246 → x1=672, so width=426): `fill_w = 426 * pct/100`.

### 5c. Node + branch (tree / decision)
SVG circles on `--ground` with `--ink` stroke; branch paths `--line-strong` 1px;
an optional blurred "memory" path underneath (same path, `--quiet`, blur(6px),
opacity .08) for depth; a small animated `--accent` signal dot travelling a branch.

### 5d. Orbit (a cyclic loop)
A `border-radius:50%` ring (`--line-strong`) with a dashed inner ring (`inset:20%`),
four mono labels pinned N/E/S/W, and a bold center term. Breathe animation optional.
Two orbits + a pulsing bridge line = *coupled* loops.

### 5e. Stage rail (transformation flow)
`grid-template-columns:1fr 28px 1fr 28px 1fr` — cards separated by mono `→` arrows.
The focus stage gets `box-shadow: inset 0 2px var(--accent)`. Inside a card, tiny
animated glyphs (bars pulsing = event stream; stacked bars = compressed conditions;
a `state-readout` chip = reconciled state).

## 6. Animations (opt-in, reduced-motion-safe)

```css
@keyframes travel   { 0%{left:0} 45%,65%{left:58%} 100%{left:calc(100% - 7px)} }
@keyframes pulse    { 0%{opacity:.25;left:0} 100%{opacity:1;left:calc(100% - 6px)} }
@keyframes breathe  { 50%{transform:rotate(2deg) scale(1.015)} }
@keyframes signal   { 0%,12%{opacity:0;transform:translateY(0)} 24%{opacity:1}
                      72%,82%{opacity:1;transform:translateY(70px)}
                      94%,100%{opacity:0;transform:translateY(70px)} }
@keyframes evt      { 0%,100%{opacity:.25} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){ * { animation:none !important; } }
```
SVG-animated marks need `transform-box: view-box`.

## 7. Fonts

Self-host or `@font-face` Inter + JetBrains Mono for fidelity. Acceptable fallback:
`system-ui` + `ui-monospace`. Linear uses Berkeley Mono; monotykamary uses JetBrains
Mono — both read identically at these sizes. Do **not** ship Google-Fonts `<link>`
in an Artifact (CSP blocks it); inline `@font-face` with data-URIs or fall back.
    • elements.md 8.2 KB 
      # Editorial elements — the non-chart vocabulary

Beyond the figures, monotykamary.com and linear.app carry a set of reusable **page
elements** that give a post its editorial density: stat strips, status asides,
kickers, numbered chapter indexes, prose typography, inline cards. All extracted
from rendered source (2026-07-22). Same rules as the figures: mono for labels/data,
UPPERCASE micro-labels, hairlines, one coral accent, tokens from `design-system.md`
(pick the set matching the host page — light for a light blog).

Use these to lift a whole article, not just its charts.

---

## 1. Metric strip — a row of headline numbers

For 3–5 punchy figures (throughput, cost, counts). Big mono number + tiny uppercase
mono label, hairline-divided cells, ruled top and bottom.

```html
<figure class="metric-strip">
  <div>
    <div class="metric"><strong>75</strong><span>reference tokens / second</span></div>
    <div class="metric"><strong>3s</strong><span>typing burst gap</span></div>
    <div class="metric"><strong>50ms</strong><span>held-key collapse</span></div>
    <div class="metric"><strong>$0</strong><span>idle without output</span></div>
  </div>
</figure>
```
```css
.metric-strip{border-block:1px solid var(--line);margin:52px 0;padding:24px 0}
.metric-strip>div{display:grid;grid-template-columns:repeat(4,1fr)}
.metric{display:flex;flex-direction:column;justify-content:space-between;min-height:78px;padding:0 22px;border-right:1px solid var(--line)}
.metric:first-child{padding-left:0}.metric:last-child{border:0;padding-right:0}
.metric strong{font:490 30px/1.1 var(--mono);letter-spacing:-.05em;color:var(--ink)}
.metric span{font:7.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
```
Accent one number (`color:var(--accent)`) only if one is the point.

---

## 2. Status aside — the "state of this piece" sidebar

A sticky metadata rail: STATUS (with a live dot), last revision, active repo/branch.
Signals a living document. On monotykamary it sits in a `post-grid` two-column layout
(`minmax(0,760px) minmax(200px,260px)`, gap 80px).

```html
<aside class="post-context">
  <div><span>Status</span><b><i></i>Still testing this</b></div>
  <div><span>Last substantial revision</span><b>July 20, 2026</b></div>
  <div><span>Active branch or repository</span>
    <a href="…">inloopstudio-team/pi-ledger<small>branch / main</small></a></div>
</aside>
```
```css
.post-context{display:grid;position:sticky;top:30px;border-top:1px solid var(--line-strong)}
.post-context>div{border-bottom:1px solid var(--line);padding:17px 0}
.post-context span{display:block;margin-bottom:8px;font:8px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.post-context b,.post-context a{display:block;font-weight:450;color:var(--ink-soft);overflow-wrap:anywhere}
.post-context b i{display:inline-block;width:5px;height:5px;margin-right:8px;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent)}
.post-context a small{display:block;margin-top:5px;font-size:8px;color:var(--quiet)}
```
The dot `i` can be colored by state (coral = active, quiet = settled).

---

## 3. Kicker + sigil — the eyebrow above a title

A tiny hand-drawn SVG mark + an uppercase mono status word. The sigil is a 32-box
with two hairline "trace" paths (one faint "memory" ghost) and a node dot; it's the
site's recurring signature. Cheap to redraw per post with a different trace.

```html
<div class="post-kicker">
  <svg class="post-sigil" viewBox="0 0 32 32" aria-hidden="true">
    <rect x=".5" y=".5" width="31" height="31" class="frame"/>
    <path class="trace trace--memory" d="M5 25C10 23 10 11 16 9S23 14 28 5"/>
    <path class="trace" d="M5 23C11 21 10 13 16 11S22 16 28 5"/>
    <circle cx="16" cy="11" r="1.6"/>
  </svg>
  <p>Still testing this</p>
</div>
```
```css
.post-kicker{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.post-kicker p{margin:0;font:9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-sigil{width:26px;height:26px;overflow:visible}
.post-sigil .frame{fill:var(--surface);stroke:var(--line)}
.post-sigil .trace{fill:none;stroke:var(--ink);stroke-width:1}
.post-sigil .trace--memory{stroke:var(--quiet);opacity:.35}
.post-sigil circle{fill:var(--accent);stroke:var(--ink);stroke-width:1}
```

---

## 4. Numbered chapter index (Linear /method)

For a long piece with real sections: uppercase group label, then rows of
`title …… N.N` with dotted dividers between groups. The decimals are mono +
`tabular-nums`. Only use when the content genuinely is an ordered sequence.

```html
<nav class="chapter-index">
  <div class="chapter">
    <span class="chapter__group">Direction</span>
    <a><b>Set the product direction</b><em>2.1</em></a>
    <a><b>Set useful goals</b><em>2.2</em></a>
    <a><b>Prioritize enablers and blockers</b><em>2.3</em></a>
  </div>
</nav>
```
```css
.chapter{border-top:1px dashed var(--line-strong);padding-top:18px;margin-top:26px}
.chapter__group{font:9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.chapter a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;color:var(--muted);text-decoration:none}
.chapter a:hover b{color:var(--ink)}
.chapter b{font-weight:400;font-size:16px}
.chapter em{font:10px/1 var(--mono);font-style:normal;font-variant-numeric:tabular-nums;color:var(--quiet)}
```

---

## 5. Inline invitation card — a link that matters

A full-width bordered CTA row: label, mono sub-detail, animated arrow. For "go look
at the repo / read the next thing."

```html
<a class="article-invitation" href="…">
  <span>Have a look</span><small>inloopstudio-team/pi-ledger / main</small><b>→</b>
</a>
```
```css
.article-invitation{display:grid;grid-template-columns:1fr auto 30px;align-items:center;gap:20px;border-block:1px solid var(--line-strong);margin-top:76px;padding:22px 0;text-decoration:none;color:var(--ink)}
.article-invitation>span{font-size:20px;letter-spacing:-.025em}
.article-invitation small{font:8px/1.5 var(--mono);color:var(--quiet)}
.article-invitation b{font-weight:400;transition:transform .2s}
.article-invitation:hover b{transform:translateX(5px)}
```
Same skeleton, smaller, makes the **next-post** footer nav.

---

## 6. Prose typography (the body around the figures)

So embedded figures don't clash with the running text, match this scale. Body in
`--sans` (a host site may pin its own stack, e.g. Charter serif heads, Public Sans
body, JetBrains Mono for labels/code), heads
tight `--sans`.

```css
.prose{font:16px/1.72 var(--sans);color:var(--muted)}
.prose h2{margin:70px 0 18px;font:540 27px/1.18 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.prose h3{margin:52px 0 13px;font:540 20px/1.25 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.prose strong{font-weight:620;color:var(--ink-soft)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ink)}
.prose blockquote{border-left:1px solid var(--ink);padding:4px 0 4px 20px;color:var(--ink-soft)}
.prose code{font:.86em/1.6 var(--mono);color:var(--ink)}
.prose pre{border:1px solid var(--line);background:var(--surface);padding:17px;overflow-x:auto}
.prose hr{border:0;border-top:1px solid var(--line);margin:52px 0}
```

---

## 7. Obsession / lede block — a bordered manifesto opener

Left-hairline headline block for the top of a flagship post: big display headline,
one-line description, a `dt/dd` meta row. The `::before`/`::after` draw an L-bracket
on the left edge.

Key CSS: `border-block:1px solid var(--line-strong)`, a `1px` absolute bar down the
left, headline `clamp(42px,5.5vw,68px)/0.98` weight 480 letter-spacing -.06em, meta
row of `dt` (8px mono uppercase quiet) + `dd` (10px mono ink-soft).

---

## When to reach for these vs a figure

- The claim has a **structure** (spectrum, ranking, branch, loop…) → a figure
  (`worked-examples.md`).
- You just need **editorial furniture** (headline numbers, status, section index,
  a strong link) → an element here.
- A flagship post uses both: obsession lede → prose with 1–2 figures → metric strip
  → invitation card → next-post nav, with a status aside in the margin.
    • worked-examples.md 13.6 KB 
      # Worked examples — the method applied

These six are **case studies**, not a template menu. Each shows the same move:
*a sentence-length claim → the geometric primitive that makes the claim obvious →
the minimum markup that renders it.* Study the reasoning column; then build the
figure your post actually needs. HTML is the real extracted source (monotykamary,
2026-07-22), lightly cleaned. Swap the accent from `--ink` to `--accent` on the
one element that is the point.

Reduce every future figure to the same three questions:
1. **What is the claim?** (becomes the figcaption, verbatim)
2. **What is the claim's *structure*?** (spectrum? ranking? sequence-with-threshold?
   mutual causation? branch? transformation?) → picks the primitive.
3. **Where is the point?** → the one element that gets coral.

---

## 1. `autonomy-field` — claim has a SPECTRUM structure

**Claim:** "Autonomy isn't binary; the useful position slides with blast radius."
**Structure:** ordered positions on one axis → **cell grid with rising fill.**
**Point (coral):** the rightmost / highest-autonomy cell, or leave grayscale and let
fill-height carry it.

Why it works: the eye reads left→right as *more*, and the fill bars literally grow,
so "spectrum" is felt before it is read. The axis label pair ("More oversight → More
delegation") names the dimension; the stakes row underneath ("Throwaway prototype →
Production system") adds the second, orthogonal consideration without a second chart.

```html
<figure class="fig cells" style="--n:5">
  <div class="axis"><span>More oversight</span><i></i><span>More delegation</span></div>
  <div class="row">
    <section style="--v:.1"><span>01</span><b>Complete</b><small>Human decides every move</small><i></i></section>
    <section style="--v:.3"><span>02</span><b>Suggest</b><small>AI proposes local changes</small><i></i></section>
    <section style="--v:.5"><span>03</span><b>Pair</b><small>Shared iteration loop</small><i></i></section>
    <section style="--v:.75"><span>04</span><b>Delegate</b><small>AI executes bounded work</small><i></i></section>
    <section style="--v:1"><span>05</span><b>Roam</b><small>AI owns the trajectory</small><i></i></section>
  </div>
  <div class="stakes"><span>Throwaway prototype</span><b>Move deliberately, not permanently →</b><span>Production system</span></div>
  <figcaption>The useful position is contextual: autonomy moves with blast radius, expertise, and feedback quality.</figcaption>
</figure>
```

---

## 2. `bar-chart` — claim RANKS magnitudes

**Claim:** "Developers avoid handing AI the high-stakes work; trust is low."
**Structure:** comparable quantities, ordered → **horizontal bars** (never vertical;
labels stay readable). SVG, 720 viewBox, real axis 0–100.
**Point (coral):** the rows that prove the thesis (the "accent" rows). The one
surprising row (e.g. `2.6%`) is its own quiet punchline.

Why horizontal: long text labels; ranking is a vertical scan; the value sits at the
bar's end. The single tiny bar among big ones does more than any callout.

```html
<figure class="fig bars">
  <svg viewBox="0 0 720 336" role="img" aria-label="Share of respondents">
    <g class="grid">
      <g><line x1="246" x2="246" y1="18" y2="308"/><text x="246" y="12" text-anchor="middle">0</text></g>
      <g><line x1="459" x2="459" y1="18" y2="308"/><text x="459" y="12" text-anchor="middle">50</text></g>
      <g><line x1="672" x2="672" y1="18" y2="308"/><text x="672" y="12" text-anchor="middle">100</text></g>
    </g>
    <!-- row: y steps by 52; fill width = 426 * pct/100 -->
    <g class="row row--accent"><text class="label" x="0" y="56">Avoid deployment / monitoring</text>
      <rect class="track" x="246" y="38" width="426" height="24"/>
      <rect class="fill"  x="246" y="38" width="323.8" height="24"/>
      <text class="value" x="561" y="55" text-anchor="end">76%</text></g>
    <!-- ...more rows... the last, tiny one is the punchline -->
    <g class="row"><text class="label" x="0" y="264">Express high trust</text>
      <rect class="track" x="246" y="246" width="426" height="24"/>
      <rect class="fill"  x="246" y="246" width="11" height="24"/>
      <text class="value" x="274" y="263" text-anchor="end">2.6%</text></g>
  </svg>
  <figcaption>Selected developer-survey figures · share of respondents</figcaption>
</figure>
```

---

## 3. `process-diagram` — claim is a SEQUENCE with a THRESHOLD

**Claim:** "Nothing is billable until the work crosses the delivery boundary."
**Structure:** ordered stages + one that flips state → **stage grid + traveling dot
on a rail.** The committed stage inverts (coral fill).
**Point (coral):** the `is-committed` final stage — the moment the claim is about.

The dashed rail with a dot that pauses at 58% then completes *shows* the boundary:
the eye watches nothing commit until the dot crosses.

```html
<figure class="fig process">
  <div class="rail" aria-hidden="true"><i></i></div>
  <div class="stages">
    <section><span>01</span><b>Compose</b><small>Measured locally</small></section>
    <section><span>02</span><b>Queue</b><small>Staged, not billed</small></section>
    <section><span>03</span><b>Invoke</b><small>Tokens + tool time</small></section>
    <section><span>04</span><b>Deliver</b><small>Outcome lands</small></section>
    <section class="is-committed"><span>05</span><b>Commit</b><small>Receipt changes</small></section>
  </div>
  <figcaption>Nothing becomes billable until the work crosses the delivery boundary.</figcaption>
</figure>
```
`.stages section.is-committed{ background:var(--accent); border-color:var(--accent); color:var(--ground); }`
(match the `.stages section` specificity or the base cell background wins — real bug.)
`.rail i{ animation:travel 4.8s cubic-bezier(.5,0,.5,1) infinite; }`

---

## 4. `loop-field` — claim is MUTUAL CAUSATION

**Claim:** "Agent evidence sharpens human judgment; judgment decides which evidence
matters." (Two loops feeding each other.)
**Structure:** two cycles + a coupling → **two orbits + a pulsing bridge.**
**Point (coral):** the bridge pulse (the calibration signal moving between them).

A single loop would miss the reciprocity; two orbits side by side with a dot
pulsing across the gap encode "each feeds the other." Center term of each orbit =
the *output* of that loop (Evidence / Judgment).

```html
<figure class="fig loops">
  <div class="system">
    <section><span>Technical loop</span>
      <div class="orbit"><i>Context</i><i>Action</i><i>Tests</i><i>Repair</i><b>Evidence</b></div></section>
    <section><span>Human loop</span>
      <div class="orbit human"><i>Observe</i><i>Question</i><i>Review</i><i>Learn</i><b>Judgment</b></div></section>
    <div class="bridge"><i></i><span>Calibration</span></div>
  </div>
  <figcaption>Agent evidence sharpens human judgment; human judgment decides which evidence matters.</figcaption>
</figure>
```
`.bridge i{ background:var(--accent); border-radius:50%; width:6px; height:6px; animation:pulse 2.2s ease-in-out infinite alternate; }`

---

## 5. `condition-tree` — claim is a BRANCH under uncertainty

**Claim:** "A recursive evaluation preserves inspectable conditions at every branch
instead of one irreversible transcript."
**Structure:** a decision that forks → **node/branch SVG tree** with a signal that
falls from root to a leaf, and a blurred "ghost" of the same paths beneath for depth.
**Point (coral):** the falling signal dot.

The ghost path (blurred, low opacity) is the "irreversible transcript" the claim
argues against; the crisp branch tree on top is the inspectable alternative. Form
carries the argument's *contrast*.

```html
<figure class="fig tree">
  <svg viewBox="0 0 720 330" role="img" aria-labelledby="tree-cap">
    <g class="memory"><path d="M360 290V220M360 220 190 150M360 220 530 150M190 150 90 70M190 150 260 70M530 150 460 70M530 150 630 70"/></g>
    <g class="branches"><path d="M360 290V220M360 220 190 150M360 220 530 150M190 150 90 70M190 150 260 70M530 150 460 70M530 150 630 70"/></g>
    <g class="nodes"><circle cx="360" cy="290" r="9"/><circle cx="360" cy="220" r="7"/><circle cx="190" cy="150" r="6"/><circle cx="530" cy="150" r="6"/><circle cx="90" cy="70" r="5"/><circle cx="260" cy="70" r="5"/><circle cx="460" cy="70" r="5"/><circle cx="630" cy="70" r="5"/></g>
    <g class="labels"><text x="360" y="322" text-anchor="middle">OBSERVED STATE</text><text x="190" y="178" text-anchor="middle">VERIFIED</text><text x="530" y="178" text-anchor="middle">UNKNOWN</text><text x="90" y="48" text-anchor="middle">RECOMPUTE</text><text x="260" y="48" text-anchor="middle">REUSE</text><text x="460" y="48" text-anchor="middle">QUERY</text><text x="630" y="48" text-anchor="middle">DEFER</text></g>
    <circle class="signal" cx="360" cy="220" r="2"/>
  </svg>
  <figcaption id="tree-cap">A recursive evaluation tree preserves inspectable conditions at every branch instead of an irreversible reasoning transcript.</figcaption>
</figure>
```
`.memory path{ stroke:var(--quiet); stroke-width:11; opacity:.08; filter:blur(6px); fill:none; }`
`.branches path{ stroke:var(--line-strong); stroke-width:1; fill:none; }`
`.nodes circle{ fill:var(--ground); stroke:var(--ink); stroke-width:1.4; }`
`.signal{ fill:var(--accent); animation:signal 3.8s linear infinite; transform-box:view-box; }`

---

## 6. `state-flow` — claim is a TRANSFORMATION of representation

**Claim:** "Event history becomes observable conditions, which controllers reconcile
into state." (Data changing *form* through a pipeline.)
**Structure:** A → B → C where each stage looks *different* → **stage rail** where
each card contains a different mini-visual (pulsing bars → stacked conditions →
a readout chip).
**Point (coral):** the focus stage underline + the "READY" readout dot.

Each card's inner glyph *is* the data in that representation, so the reader sees the
transformation, not just labels with arrows.

```html
<figure class="fig flow">
  <div class="rail">
    <section><span>01 · events</span><b>Raw agent history</b>
      <i class="evt"><em></em><em></em><em></em><em></em></i></section>
    <span class="arrow">→</span>
    <section class="focus"><span>02 · observe</span><b>Compressed conditions</b>
      <div class="stack"><i data-tone="critical"></i><i data-tone="relevant"></i><i data-tone="info"></i></div></section>
    <span class="arrow">→</span>
    <section><span>03 · reconcile</span><b>Declarative state</b>
      <div class="readout"><i></i> READY</div></section>
  </div>
  <figcaption>Event history becomes observable conditions, which controllers reconcile into state.</figcaption>
</figure>
```

---

## 7. `lane-router` — claim is a DISPATCH / one-decision routing (NEW, shipped)

Built for a long-form blog post on agentic QA routing,
replacing an ASCII box diagram. **Light-themed to match the blog** (proof the method
+ elements adapt to a light host).

**Claim:** "One decision routes every task; the lane is chosen by where the work
already lives."
**Structure:** a single spine that fans to N mutually-exclusive outputs → **keyed
rows sharing one accent spine.** Each row = a key node (A/B/C) + its condition +
its destination. The coral vertical spine down the left connects all key nodes,
making "one branch, many lanes" literal.
**Point (coral):** the spine + the A/B/C key nodes (the routing itself is the point).

Why this over the branch tree (#5): a decision *tree* is for exploring uncertainty
(you don't know which leaf); a *router* is for dispatch (a known rule sends each task
to exactly one lane). Rows read faster than a fanned SVG when the lanes carry text.

```html
<figure class="edfig-lanes host" role="img" aria-label="One decision routes every test into one of three lanes">
  <div class="edfig-lanes__head">
    <span class="edfig-lanes__q">Which lane runs this test?</span>
    <span class="edfig-lanes__eyebrow">The one decision</span>
  </div>
  <div class="edfig-lanes__rows">   <!-- ::before draws the coral spine -->
    <div class="edfig-lane">
      <span class="edfig-lane__k">A</span>
      <span class="edfig-lane__cond">New behavior · no code yet · exploratory</span>
      <span class="edfig-lane__to"><span class="edfig-lane__name">Manual + Run with AI</span><span class="edfig-lane__act">Design cases → AI executes them</span></span>
    </div>
    <!-- B, C … -->
  </div>
  <figcaption class="edfig-lanes__cap">One branch routes every task; the lane is chosen by where the work already lives.</figcaption>
</figure>
```
Full CSS (light + dark override) lives in the post source
the post body, with a standalone preview page for review. Spine =
`.edfig-lanes__rows::before` (2px coral, left:14px aligns to node centers); nodes =
`.edfig-lane__k` (1.5px coral border, coral text, ground fill, z-index above spine).

---

## The point of these seven

They cover seven *claim structures*, not seven chart types:

| Claim structure             | Primitive           | Example |
|-----------------------------|---------------------|---------|
| a spectrum / gradient       | cell grid + fill    | 1 |
| ranked magnitudes           | horizontal bars     | 2 |
| sequence with a threshold   | stage grid + rail   | 3 |
| mutual causation            | coupled orbits      | 4 |
| branch under uncertainty    | node/branch tree    | 5 |
| transformation of form      | stage rail + glyphs | 6 |
| dispatch / one-rule routing | keyed rows + spine  | 7 |

Plus two more in the gallery (`assets/gallery.html`): accumulation-toward-a-target
(filling meter + threshold tick) and boundary/inside-vs-outside (framed region + a
crossing). If your post's claim doesn't match a row, **compose a new primitive** from
the atoms in `design-system.md §5`. The aesthetic is the tokens + typography law +
restraint; the *shape* is whatever makes your specific sentence obvious at a glance.
  • SKILL.md 9.5 KB 
    ---
name: editorial-illustrations
description: >
  Generate meaning-carrying editorial data-illustrations in the monotykamary /
  Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline
  framed figures) with a single coral accent. This is a GENERATIVE GUIDE, not a
  template gallery: it teaches the "claim -> geometry" method so any session can
  invent the RIGHT figure for what a post actually argues, then render it as a
  self-contained, theme-aware, reduced-motion-safe HTML/SVG figure. Use when
  writing/illustrating a blog post, essay, spec, or slide and you want a chart,
  diagram, or illustration that carries a thesis (not decoration) in the house
  style. Triggers: "make a chart/diagram/illustration for this", "visualize this
  argument", "monotykamary/Linear style figure", "editorial graphic".
---

# Editorial illustrations — claim → geometry

The look you want (monotykamary.com, linear.app/now) is not a chart library. It is
a **discipline**: every figure is a single argument rendered as geometry, framed in
a hairline box, captioned in mono uppercase with the *meaning*, drawn in grayscale
with exactly one accent. Get the discipline right and any shape reads as "house."
Copy templates blindly and it reads as slop.

**Do not reach for a fixed set of charts.** Reach for the method below and build the
figure this specific sentence needs. The six worked examples in
`references/worked-examples.md` are proof the method generalizes, not a menu.

## The core move

> Take the one sentence the figure must prove. Find that sentence's *structure*.
> Render the structure so the reader believes the sentence before reading it.

The caption is the thesis, written first. If you can't state the figure's claim in
one sentence, you don't have a figure yet, you have decoration. Stop.

## Method (run this every time)

1. **Write the claim.** One declarative sentence. This becomes the `<figcaption>`
   verbatim. Example: "Nothing is billable until work crosses the delivery boundary."

2. **Name the claim's structure.** Which of these is the sentence really about?
   Match to a geometric primitive:

   | If the claim is about…                    | Render it as…                | Atom (§5) |
   |-------------------------------------------|------------------------------|-----------|
   | a spectrum / more-vs-less / a gradient    | ordered cells, rising fill   | 5a |
   | ranked magnitudes / shares / a comparison | horizontal bars, real axis   | 5b |
   | a sequence with a tipping point           | stage grid + traveling dot   | 5a + rail |
   | mutual causation / a feedback relationship| two coupled orbits + bridge  | 5d |
   | a branch / decision under uncertainty     | node-and-branch SVG tree     | 5c |
   | one thing changing form / a data pipeline | stage rail, a glyph per stage| 5e |
   | accumulation toward a target              | stacked / filling bar        | 5a/5b |
   | a boundary / inside-vs-outside            | a framed region + a crossing | compose |
   | a distribution / where mass sits          | dot-strip or small-multiples | compose |

   If nothing matches, **compose a new primitive** from the atoms in
   `references/design-system.md §5`. The novelty is expected and welcome; the
   *tokens and restraint* are what must stay constant.

3. **Locate the point.** Which single element proves the claim? That one gets
   `--accent` (coral). Everything else stays grayscale. One accent, maybe two.
   No point → the figure has no thesis → go back to step 1.

4. **Draw in the system.** Apply `references/design-system.md`: tokens, the
   typography law (display = Inter 480–540 tight; everything else mono, tiny,
   UPPERCASE labels), the framed-figure chrome, 720-wide SVG viewBox, hairlines
   only, no chartjunk.

5. **Add motion only if it demonstrates the claim.** A dot that pauses before a
   boundary; a pulse crossing between two loops; a signal falling down a branch.
   2–6s, `ease-in-out`, and always killed under `prefers-reduced-motion`. If motion
   doesn't *show* the argument, omit it. Static is fine and often better.

6. **Caption it.** Mono, 8px, uppercase, above-the-rule. State the meaning, not the
   data source alone. ("…because X," not "Figure 3.")

## The aesthetic in one breath

- **Field:** matches the host — near-black `--ground:#080807` on a dark page, white/
  off-white on a light page (both token sets in `design-system.md`). Framed figures
  on a faint surface; `backdrop-filter: blur(16px)` on dark, a hairline + faint
  shadow on light.
- **Type:** Inter for the rare big display; **mono for everything inside a figure**,
  7–11px, labels/captions UPPERCASE. Never a second sans, never a bold display.
- **Color:** grayscale ramp (`--ink → --quiet`) + **one** accent = Claude-coral
  `#D97757`, on the point only. (Set `--accent: var(--ink)` for monotykamary-faithful
  pure grayscale.)
- **Structure:** 1px hairlines, true-circle nodes, dashed = provisional/failure,
  no shadows, no gradients except a single axis-direction hairline.
- **Density:** small type, tight cells, edge-to-edge. Restraint is the style.

Full spec + copy-paste token blocks (dark AND light) + primitive CSS:
`references/design-system.md`. Worked examples with the claim→geometry reasoning:
`references/worked-examples.md`. Non-chart editorial elements (metric strip, status
aside, kicker+sigil, numbered chapter index, prose type, inline cards):
`references/elements.md`. Live rendered proof (coral house style, toggleable):
`assets/gallery.html`.

## The figure follows the host page's theme (ALWAYS)

A figure is a guest on someone's page. It must match that page's light/dark, not
impose its own. A dark exhibit panel dropped into a light article reads as a foreign
object (learned the hard way, 2026-07-22).

- **Look at the host first.** Light page → light figure. Dark page → dark figure.
  a host site may default **light** and carry its own **theme toggle** (e.g. Charter serif heads + Public Sans body,
  blue accent) that stamps `data-theme="light"|"dark"` on `<html>` — figures there
  must **follow `data-theme`**, defaulting light.
- **If the host has an explicit theme system, key the dark override off IT, not the
  media query.** Use `:root[data-theme="dark"] .yourfig { … }`, NOT
  `@media (prefers-color-scheme: dark)`. Real bug (2026-07-22): a figure keyed on the
  media query rendered **dark on the light blog** because the viewer's OS was dark and
  the page theme was light. The page's `data-theme` is the source of truth; the media
  query only applies on hosts that have no toggle. On a toggled host, match the site's own
  dark tokens (ground `#171b22`, line `#262c36`, ink `#f1f5f9`) so the figure's dark
  panel sits in the site's dark, not a foreign near-black.
- **Build token-based so it adapts.** Define the palette on the figure's own scope,
  default = the host's default theme, plus a `:root[data-theme="dark"] .fig` override
  (and a `@media (prefers-color-scheme: dark)` override too ONLY if the host has no
  toggle). Costs nothing, future-proofs the figure.
- **Coral is AA-safe per ground.** On white use `--accent:#c15f3c` for text/strokes
  (keep `#D97757` only for large node fills); on near-black use `#D97757` directly.
- The **claim→geometry method and the restraint rules are theme-independent.** Only
  the palette tokens swap. Grayscale-ramp + one coral accent holds on both grounds.

## Output contract

- One self-contained `<figure>` per illustration: inline `<style>` scoped to the
  figure (or shared token `:root`), inline SVG, no external requests.
- **Theme = host's** (see above): light default when embedded in a light page, but
  always token-based with `prefers-color-scheme` + `:root[data-theme]` overrides, and
  **reduced-motion-safe**. Both are house rules, not optional.
- For an **Artifact**: no external fonts/CDN (CSP blocks them); inline `@font-face`
  data-URIs or fall back to `system-ui`/`ui-monospace`.
- For **blog posts on your own site**: emit the figure HTML/CSS into the post body (markdown
  passes raw HTML through verbatim via `build.py`). The blog is **light**, so the
  light tokens apply; keep the dark override for portability. Rebuild with
  `python3 build.py`; the built page uses absolute asset paths so preview it via a
  local server or a self-contained standalone copy, never a bare `file://` open
  (that renders the post unstyled). See a local self-contained HTML preview.

## Verify (mandatory — this is a UI/UX output)

Per the Visual Verification rule, a DOM check is not enough. **Render it and look.**

1. Open the figure in browser-harness, screenshot it (`evidence_shot`).
2. Read the image against the claim: does the geometry make the sentence obvious?
   Is coral on the point and nowhere else? Any clipped mono text, misaligned SVG
   labels, off-by-one bar math, broken responsive stack at ≤720px?
3. Fix what you see, re-shot to prove it. Check the light variant too.
4. Confirm motion stops under reduced-motion.

## Anti-slop checklist (reject the figure if any fail)

- [ ] The figcaption is a real claim, stated in one sentence.
- [ ] The geometry encodes that claim's *structure* (not a generic chart pinned on).
- [ ] Exactly one accent element (coral), on the point.
- [ ] Every in-figure label/value/caption is mono + tiny; labels UPPERCASE.
- [ ] Hairlines only; no shadows, no gradients (bar-axis hairline excepted), no
      rounded rectangles.
- [ ] Gridlines present only if the figure is genuinely quantitative.
- [ ] Motion (if any) demonstrates the claim and dies under reduced-motion.
- [ ] Renders correctly in both dark and light, and stacks cleanly on mobile.

Comments (0)

Sign in to join the conversation.

No comments yet.

Reviews (0)

No reviews yet.

Related

Claude Prompt
Tighten-my-prose editing prompt
Claude Skill
Adversarial code-review skill for Claude
Claude Workflow
Deep-research workflow (fan-out + verify)
Claude Skill
Conventional-commit writer for Claude