Cathryn Lavery
53bd8dde0f
Thirteen editorial diagram types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layers, venn, pyramid) as self-contained HTML files with inline SVG. Progressive disclosure: lean SKILL.md points to per-type references. Neutral stone+rust default skin, first-run gate that prompts users to customize the style guide from their own website, URL-based onboarding, annotation-callout primitive, sketchy filter variant, live gallery at assets/index.html.
977 B
977 B
Quadrant
Best for: prioritization (Impact × Effort), positioning (Reach × Frequency), portfolio maps, 2×2 decision frames.
Layout conventions
- 2×2 grid. Axis lines: 1px ink cross through the center.
- Axis labels at the ends of each axis (e.g.,
HIGH IMPACT →on the right,LOW IMPACT ←on the left — Geist Mono eyebrow). Never label at the midpoint. - Items: small labeled dots (
r=4) positioned in the quadrants. Labels 8–10px away; don't let labels cross axis lines. - Coral on the "do first" item (typically top-right).
- Limit to ~12 items; cluster or split beyond that.
Anti-patterns
- Four filled quadrants in different colors — position + label does the work; color noise weakens it.
- Items placed on axis lines (ambiguous quadrant).
- Missing axis names.
Examples
assets/example-quadrant.html— minimal lightassets/example-quadrant-dark.html— minimal darkassets/example-quadrant-full.html— full editorial