Claude Code skill для редакционных диаграмм
🔹 cathrynlavery/diagram-design
⭐ 4780 звёзд · HTML
27 типов диаграмм (в версии 2.0 добавили Loop), которые Claude Code генерирует как самостоятельный HTML + SVG. Без теней, без Mermaid-эстетики, открываются в браузере без build-step и внешних картинок.
Skill анализирует homepage сайта и за 60 секунд подтягивает его цвета и шрифты во все диаграммы. Каждая идёт в трёх вариантах: minimal light, minimal dark, full-editorial. Типографика — Instrument Serif для заголовков, Geist sans для узлов, Geist Mono для подписей.
Внутри — progressive disclosure: SKILL.md держит индекс, а 34 reference-файла подгружаются по требованию. Контраст автоматом проверяется по WCAG AA на 9–12px, экспорт в PNG через Playwright на 2× и SVG с инъекцией Google Fonts.