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>
This commit is contained in:
2026-06-08 18:11:26 +02:00
co-authored by Claude Opus 4.8
parent 7e13b109a7
commit 628db30645
4 changed files with 1595 additions and 5 deletions
+1
View File
@@ -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.
+10 -5
View File
@@ -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
mapping of all 1512 icon codepoints to kebab-case and PascalCase
names. Read this file to look up any icon by name or codepoint.
**Glyph reference:** [`phosphor-glyphs.md`](phosphor-glyphs.md) — the full
1512-glyph table (codepoint · kebab name · Pascal name) with an **In clide**
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`
entry to `PhosphorIcons` in `lib/widgets/src/icons/phosphor.dart`:
Find the codepoint in [`phosphor-glyphs.md`](phosphor-glyphs.md), then add a
`static const` entry to `PhosphorIcons` in
`lib/widgets/src/icons/phosphor.dart`:
```dart
static const arrowClockwise = PhosphorIconPainter(0xe036);
File diff suppressed because it is too large Load Diff
@@ -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")