ui-design skill: full Phosphor glyph reference page (1512 glyphs)

Mirror assets/fonts/phosphor/codepoints.csv into a readable, greppable
markdown table at references/phosphor-glyphs.md — codepoint · kebab · Pascal,
with an "In clide" column flagging the ~45 glyphs already wired into
PhosphorIcons (reach for those first). Generated by scripts/gen-phosphor-
glyphs.py (regenerate after a font bump). Point icons.md + SKILL.md at it.

Supports glyph-picking for T-275 (composer permission-mode icons) and any
future icon work.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.claude/skills/ui-design/SKILL.md

@@ -22,6 +22,7 @@ This skill bundles four concerns that all surface in widget work:
 | Token selection per surface | [`references/surface.md`](references/surface.md) | Building a new widget or modifying an existing one — "which token does this need" |
 | Spacing, alignment, control layout | [`references/geometry.md`](references/geometry.md) | Building tab strips, list items, buttons, anything where icons sit next to text or padded edges |
 | Phosphor icon usage and codepoints | [`references/icons.md`](references/icons.md) | Adding or referencing an icon |
+| Full Phosphor glyph table (1512, with codepoints) | [`references/phosphor-glyphs.md`](references/phosphor-glyphs.md) | Picking a specific glyph by name/look — find its codepoint, see if it's already defined |
 
 Read the reference that matches the question. They cross-reference each
 other where relevant; you don't need to read all four.

.claude/skills/ui-design/references/icons.md

@@ -5,14 +5,19 @@
 The app bundles Phosphor Icons (v2.0.8, MIT) as TTF fonts at
 `assets/fonts/phosphor/` (regular, bold, fill weights).
 
-**Codepoint reference:** `assets/fonts/phosphor/codepoints.csv` — full
+**Glyph reference:** [`phosphor-glyphs.md`](phosphor-glyphs.md) — the full
-mapping of all 1512 icon codepoints to kebab-case and PascalCase
+1512-glyph table (codepoint · kebab name · Pascal name) with an **In clide**
-names. Read this file to look up any icon by name or codepoint.
+column flagging the ~45 already wired into `PhosphorIcons`. Read/grep this to
+pick a glyph; reach for an already-defined one first. (It mirrors
+`assets/fonts/phosphor/codepoints.csv`; regenerate with
+`python3 .claude/skills/ui-design/scripts/gen-phosphor-glyphs.py` after a font
+bump.)
 
 ### Adding an icon
 
-Find the codepoint in `codepoints.csv`, then add a `static const`
+Find the codepoint in [`phosphor-glyphs.md`](phosphor-glyphs.md), then add a
-entry to `PhosphorIcons` in `lib/widgets/src/icons/phosphor.dart`:
+`static const` entry to `PhosphorIcons` in
+`lib/widgets/src/icons/phosphor.dart`:
 
 ```dart
 static const arrowClockwise = PhosphorIconPainter(0xe036);

.claude/skills/ui-design/scripts/gen-phosphor-glyphs.py

@@ -0,0 +1,58 @@
+#!/usr/bin/env python3
+"""Generate the Phosphor glyph reference page for the ui-design skill.
+
+Mirrors `assets/fonts/phosphor/codepoints.csv` (the full bundled glyph set)
+into a readable, greppable markdown table at
+`.claude/skills/ui-design/references/phosphor-glyphs.md`, flagging which
+glyphs clide already defines in `lib/widgets/src/icons/phosphor.dart`.
+
+Run from the repo root:  python3 .claude/skills/ui-design/scripts/gen-phosphor-glyphs.py
+"""
+import csv
+import pathlib
+import re
+
+ROOT = pathlib.Path(__file__).resolve().parents[4]
+CSV = ROOT / "assets/fonts/phosphor/codepoints.csv"
+DART = ROOT / "lib/widgets/src/icons/phosphor.dart"
+OUT = ROOT / ".claude/skills/ui-design/references/phosphor-glyphs.md"
+
+# Codepoint -> camelCase accessor already defined in PhosphorIcons.
+defined = {}
+for m in re.finditer(r"static const (\w+) = PhosphorIconPainter\((0x[0-9a-fA-F]+)\)", DART.read_text()):
+    defined[int(m.group(2), 16)] = m.group(1)
+
+rows = list(csv.DictReader(CSV.open()))
+n_def = sum(1 for r in rows if int(r["codepoint"], 16) in defined)
+
+lines = [
+    "---",
+    "name: phosphor-glyphs",
+    "type: reference",
+    "tags: [icons, phosphor, ui-design]",
+    "---",
+    "",
+    "# Phosphor glyphs — full reference (v2.0.8)",
+    "",
+    f"All **{len(rows)}** glyphs bundled in clide's Phosphor font "
+    "(`assets/fonts/phosphor/`, MIT). Generated from "
+    "`assets/fonts/phosphor/codepoints.csv` — **do not hand-edit**; regenerate with "
+    "`python3 .claude/skills/ui-design/scripts/gen-phosphor-glyphs.py`.",
+    "",
+    f"The **In clide** column flags the **{n_def}** glyphs already wired into "
+    "`PhosphorIcons` (`lib/widgets/src/icons/phosphor.dart`) — reach for those first. "
+    "To use any other glyph, add a one-line `static const` to that class with the "
+    "codepoint below, then `ClideIcon(PhosphorIcons.<name>, size: 13)`. Keep additions "
+    "to icons we actually use — don't bulk-import.",
+    "",
+    "| Codepoint | Name (kebab) | Pascal | In clide |",
+    "|---|---|---|---|",
+]
+for r in rows:
+    cp = r["codepoint"]
+    accessor = defined.get(int(cp, 16))
+    in_clide = f"`PhosphorIcons.{accessor}`" if accessor else ""
+    lines.append(f"| `{cp}` | {r['name']} | {r['pascal_name']} | {in_clide} |")
+
+OUT.write_text("\n".join(lines) + "\n")
+print(f"wrote {OUT.relative_to(ROOT)} — {len(rows)} glyphs, {n_def} already defined")