svg-diagram

Установка

npx skillfoxx add skills/svg-diagram

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a claude-code -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a cursor -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a github-copilot -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a codex -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a gemini-cli -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a cline -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a roo -y

npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a opencode -y

npx skills add bybit-exchange/svg-diagram -g

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл задает агенту единый стиль рисования диаграмм прямо в SVG: арифметику раскладки, систему цветов и типографику, дружелюбную к иероглифам. Агент рассчитывает высоту блоков, отступы, зазоры у стрелок и положение подписей так, чтобы элементы не накладывались и текст не резался рамкой. В комплекте линтер svg-lint без зависимостей, который читает готовый SVG и проверяет его по двенадцати правилам: экранирование, поля viewBox, шрифтовой стек, геометрия связей и другие. Каждая находка называет проблему и точное исправление.

Для кого. Для разработчиков и техписателей, которым нужны аккуратные схемы в документации и README.

Пример запроса к агенту

Нарисуй архитектурную схему сервиса в SVG по стилю svg-diagram и проверь ее линтером

Ограничения

Линтер svg-lint это ручной инструмент, он ничего не запускает автоматически, его нужно вызывать перед сдачей схемы. Диаграмма несет один набор цветов и рисует белую подложку, чтобы читаться на темной теме, это не переключение тем. Для запуска линтера нужен Node, зависимостей у него нет.

Как отключить. Удалите каталог svg-diagram из папки скиллов агента.

Проверка безопасности

• Скилл это инструкции и локальный линтер, который только читает SVG

Коротко о README

README описывает единый стиль ручных SVG-схем: арифметика раскладки, цвета, типографика и линтер без зависимостей. Показана галерея из десяти диаграмм, каждая иллюстрирует конкретное правило. Установка идет через skills CLI, есть путь только с текстом скилла без линтера. Линтер svg-lint читает готовый SVG и сообщает нарушения с точным исправлением. Лицензия MIT.

SKILL.md

---
name: svg-diagram
description: SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.
---

# SVG Diagramming Conventions

## Output location and referencing

> Diagrams go in SVG, never ASCII art. That rule decides *whether* to draw; this skill covers *how*, starting with where the file lands.

- Put the file in an `assets/` directory next to the document (e.g. `docs/foo.md` -> `docs/assets/foo-arch.svg`)
- Reference it from markdown with a relative path, `![title](assets/xxx.svg)`. Do not inline SVG XML.

Похожие