Initial release: diagram-design v1.0

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.

references/type-tree.md

@@ -0,0 +1,24 @@
+# Tree / Hierarchy
+
+**Best for:** org charts, dependency trees, taxonomy, file trees, decision breakdowns, skill trees.
+
+## Layout conventions
+- Root at top, children fan out below (or root at left, children to right).
+- Nodes are small labeled rectangles (`rx=6`), Geist 12px 600 name + optional Geist Mono 9px sublabel. Width 120–180px, height 40–52px.
+- **Connectors are orthogonal (elbow-style), never diagonal.** Parent drops a short vertical line, then a horizontal bus connects siblings, then each child has a short vertical drop into its top edge. 1px muted stroke.
+- Leaf indicator: thinner stroke (0.8) or different fill — OR let terminal position do the work.
+- Max depth: 4 (root + 3 tiers). Max breadth per level: 5.
+- Coral on **one** node: root OR critical leaf. Not both.
+- Draw connectors before nodes.
+
+## Anti-patterns
+- Tree 5+ levels deep on a single page (illegible — split).
+- Nodes of wildly varying widths — pick 2 widths max.
+- Diagonal connector lines.
+- Skipped levels (parent connected to grandchild with no middle).
+- Coral on root AND a leaf.
+
+## Examples
+- `assets/example-tree.html` — minimal light
+- `assets/example-tree-dark.html` — minimal dark
+- `assets/example-tree-full.html` — full editorial