docs-diagrams
Installation
SKILL.md
Docs diagrams
Use the diagrams already published in the docs as references. They share a faint grid background, bordered panels with soft shadows, gray skeleton UI, gray arrows, and a small accent palette in which each color has a consistent meaning. This skill reproduces that visual language from code.
Files
| Task | Read |
|---|---|
| Colors, sizes, fonts, what each color means, shape anatomy | style-tokens.md |
| Reviewing a render before handing it off | review-checklist.md |
| Primitives: canvas, panels, tree rows, windows, holes, badges | scripts/lib.mjs |
| Generate SVG + HTML for every diagram module | scripts/gen.mjs |
| Screenshot light + dark PNGs at 2x | scripts/render.sh |
| Measure a render's margins from the ink | scripts/measure.py |