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

skills/references/type-flowchart.md

@@ -0,0 +1,23 @@
+# Flowchart
+
+**Best for:** decision logic, algorithms, user-facing branching flows ("Should I…?"), onboarding routing, support-triage trees.
+
+## Layout conventions
+- Shape carries type, not color:
+  - **Oval** (`rx=20`) — start / end
+  - **Rectangle** (`rx=6`) — step / action
+  - **Diamond** — decision (≤3 exits)
+  - **Small filled ink dot** (`r=4`) — merge point where branches rejoin
+- Flow runs top→down. From a diamond, conventional exits: Yes to the right, No below — but label every outgoing arrow regardless.
+- Use coral on the happy path *or* on the single most consequential decision — never on every decision.
+- If two arrows must cross, use a small arc jump on one so the crossing is readable.
+
+## Anti-patterns
+- Using fill color to signal node type (shape does that).
+- Decision diamond with 4+ exits — refactor into nested diamonds.
+- Unlabeled decision branches.
+
+## Examples
+- `assets/example-flowchart.html` — minimal light
+- `assets/example-flowchart-dark.html` — minimal dark
+- `assets/example-flowchart-full.html` — full editorial