Cathryn Lavery
45421a256d
Brings in the jet-black + atomic-tangerine palette repaint (ba3062c), the consultant-special 2×2 variant, the Jobs-minimal axis simplification (e13c993), the type-quadrant.md rule codification (4feb760), and the Codex plugin wrapper from PR #3 (7326c4e). Conflict resolutions: - skills/diagram-design/SKILL.md (add/add): keep the full 400-line SKILL.md from this PR. PR #3's 13-line Codex wrapper becomes unnecessary — with the real SKILL.md at skills/diagram-design/, the Codex plugin's "skills": "./skills/" finds the full file directly, no redirect needed. - README.md (content): keep the new skills/diagram-design/... link targets from this PR, combined with the "14 diagrams" count and #eb6c36 accent from the repaint work on main. - example-quadrant-consultant.html: moved to the new skills/diagram-design/assets/ location with its Jobs-minimal axis labels intact. Also fixed the clone-install instructions to match the new layout: clone the repo, then symlink the inner skills/diagram-design/ directory into ~/.claude/skills/diagram-design. The old instructions (clone the repo root directly into the skills dir) would break with this structure.
1.7 KiB
1.7 KiB
Annotation Callout (italic-serif aside)
Use for editorial asides — the "italic pointer" that marks a detail without competing with the primary diagram grammar. Think marginalia: "structure IS the index", "no imports, no configuration".
Grammar
<!-- 1. Italic Instrument Serif text -->
<text x="904" y="36" fill="#2d3142" font-size="14" font-style="italic"
font-family="'Instrument Serif', serif" text-anchor="end">no imports, no configuration</text>
<!-- 2. Dashed Bézier leader -->
<path d="M 820 44 Q 700 84 520 216" fill="none"
stroke="rgba(45,49,66,0.40)" stroke-width="1" stroke-dasharray="4,3"/>
<!-- 3. Landing dot -->
<circle cx="520" cy="216" r="2" fill="#2d3142"/>
Rules
- Italic + serif together signal "editorial voice" against the diagram's sans/mono body. Don't substitute italic sans or italic mono — the combination is load-bearing.
- Dashed path (
stroke-dasharray="4,3") distinguishes the callout leader from primary arrows (which are solid). - Place callouts in margins (top-right, bottom-left). Never inside the active diagram area.
- Max 2 callouts per diagram. More becomes commentary, not signal.
Colors
| Intent | Text | Leader |
|---|---|---|
| Neutral aside | ink #2d3142 |
rgba(45,49,66,0.40) |
| Focal / accent | coral #eb6c36 |
rgba(235,108,54,0.50) |
| Tertiary (muted) | muted #4f5d75 |
rgba(45,49,66,0.30) |
Anti-patterns
- Solid arrow leader (reads as a flow arrow).
- Italic sans or italic mono — the serif is load-bearing.
- Callouts crossing primary arrows / lifelines — offset to a clear margin.
- Using a callout to label something the diagram should label directly — put the label on the element.