agentleFS
Sign inStart free
mantleCurvemantleCurve/claude-skills/skills/prototyping-typeface-from-prd/SKILL.md

prototyping-typeface-from-prd

Skill0 starsChanged 8 days agoMITView on GitHub

Use when someone wants a new typeface or font designed from a brief, a font PRD written, sample glyphs drawn, a type specimen page, a WOFF/OTF prototype or an editable type tester, especially a geometric sans with letterform rules such as a straight t, a straight j, a single-storey g, and named weights (Light, Medium, Bold). Also use to review or extend an existing skeleton-based glyph generator.

  • Installs packages

The file

We split this skill into the rules it gives an agent

4 rules. About 0 are common, 1 is distinctive, and 3 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Write the PRD first, with numeric metrics, then draw.

    line 10
  2. Very specific:

    PRD: Write docs/PRD.md from references/prd-template.md: 22 sections, numeric metrics (8), each mandated glyph as glyph (subtitle) plus …

    line 25
  3. Distinctive:

    Read references/glyph-construction.md first.

    line 30
  4. Very specific:

    All commands take --root <project> (default: cwd).

    line 44

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Prototyping a typeface from a PRD

Overview

Write the PRD first, with numeric metrics, then draw. Glyphs are stroke skeletons on a 1000 UPM grid, stroked per weight into specimen/glyphs.json; specimen, proof sheets and fonts all render that file. Review every terminal and junction at every weight on proof sheets first. Scripts read family and weights from font.json or the PRD.

When to use

A brief for a new font family or UI face; a font PRD; sample glyphs; a specimen or type tester; an OTF/WOFF prototype. Not for editing existing fonts, hinting, kerning or full character sets.

Workflow

Project: docs/PRD.md, font.json, tools/glyphs.py, specimen/, fonts/, proofs/. SKILL=~/.claude/skills/prototyping-typeface-from-prd.

  1. PRD. Write docs/PRD.md from references/prd-template.md: 22 sections, numeric metrics (8), each mandated glyph as **glyph (subtitle)** plus bullets with coordinates (9.1), weights table (12), Appendix A strings. Resolve conflicting metrics there. Copy font.example.json to font.json.
  2. Metrics. Copy glyphs.py to tools/glyphs.py; set its metrics block to PRD section 8. Read references/glyph-construction.md first.
  3. Glyphs. Rewrite the @glyph recipes to the PRD, mandated glyphs first; run glyphs.py.
  4. Review loop. Render the eight proof sheets in references/review-checklist.md, Read every PNG, fix, regenerate, re-render; Bold fails first.
  5. Specimen. build_specimen.py creates specimen/index.html from the template once, then refreshes only its marked regions.
  6. Fonts and tester. python3 -m venv .venv && .venv/bin/pip install fonttools skia-pathops brotli, then build_font.py --screenshot.
  7. Publish. Screenshot specimen and tester at 1280 and 400 px, Read them, publish both as artifacts (checklist section 5).

Quick reference

All commands take --root <project> (default: cwd); all but build_font.py are stdlib-only.

ScriptOutputCommand
glyphs.pyspecimen/glyphs.jsonpython3 tools/glyphs.py
proof.pyproof sheet per weight; --zoom, --pngpython3 $SKILL/scripts/proof.py proofs/lc1.html a b c --png proofs/lc1.png
build_specimen.pyspecimen/index.htmlpython3 $SKILL/scripts/build_specimen.py
build_font.pyOTF/WOFF/WOFF2 per weight, specimen/tester.html.venv/bin/python $SKILL/scripts/build_font.py --screenshot
screenshot.pyheadless Chrome PNG; --wrap for doctype-less pagespython3 $SKILL/scripts/screenshot.py specimen/index.html out.png --wrap --width 400

Common mistakes

MistakeFix
Clip-rectangle terminal trim leaves a sliver or wedgeEnd the skeleton where the tangent gives the cut (12/6 o'clock for a vertical face, 3/9 horizontal) or use face_cut
Diagonal meeting a bar as two strokes: stepped corner (z Z 7 1 2 5 E)One filled polygon, mitres from diag_angle
Monoline double-storey a and s congest at BoldCounters ≥ 30, clearance ≥ 40, steeper terminals, ≤ 6 % width growth, documented
g tail counter fills at BoldTail inner radius ≥ 60 at the boldest master
Arch overshoots or seams at its stemSkeleton tangent to the stem centre; stem overlaps 1 to 3 units into the arch
"g as in the reference image"PRD gives bowl box, stem x, tail radius, terminal x/y, clearances
Judging a fix from path dataRe-render proof sheets after every fix; Read the PNGs
Conflicting PRD metrics (fixed descender vs minimum clearance)Reconcile in the PRD, never silently

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free