Initial: pi-skill — 68 skills, 43 extensions, 11 themes for Pi

skills/references/type-pyramid.md

@@ -0,0 +1,33 @@
+# Pyramid / Funnel
+
+**Best for:** hierarchy of needs, prioritization ranks, value pyramids, conversion funnels, content importance stacks.
+
+## Two orientations — pick one
+- **Pyramid** (point up) — narrow apex = most important / rarest / most valuable. Base is broadest / foundational.
+- **Funnel** (point down) — narrow end = conversion (smallest group). Top is widest / audience.
+
+Don't mix orientations on one diagram.
+
+## Layout conventions
+- 4–6 layers. Each layer is a trapezoid built from an SVG `<polygon>` with 4 points.
+- Consistent layer height (56–72px).
+- Widths decrease linearly from base to apex (pyramid) or top to bottom (funnel). When showing real funnel data, widths must be honest (proportional to count/percentage).
+- Each layer has:
+  - **Name label** centered inside the trapezoid — Geist 12–14px 600.
+  - **Sublabel** below or beside the name — Geist Mono 9–10px.
+  - **Side annotation** (right or left) — optional. For funnels: drop-off percentage here (`−40%`).
+- Fill: subtle graded tints OR all paper-2 with hairline dividers (cleaner). Pick one.
+- Stroke: 1px hairline between layers; outer silhouette 1px muted or ink.
+- **Coral on ONE layer only**: apex of pyramid, conversion layer of funnel, or critical bottleneck.
+- Optional left-margin axis arrow + Geist Mono label (`rarer ↑`, `drop-off ↓`).
+
+## Anti-patterns
+- 7+ layers (illegible — compress or split).
+- Pyramid for non-hierarchical data (use a tree or bar chart).
+- Dishonest widths (fake equal spacing when drops are unequal).
+- Coral on the base layer (dilutes the "apex = rare" signal).
+
+## Examples
+- `assets/example-pyramid.html` — minimal light
+- `assets/example-pyramid-dark.html` — minimal dark
+- `assets/example-pyramid-full.html` — full editorial