SKILL-PROJECT: Skill for OpenCode

.opencode/skills/svg-generator/SKILL.md

svg-generator is a skill for OpenCode from BeWaterMyFriend7/SKILL-PROJECT. It costs 120 tokens per session (1,405 once invoked), scanned A, original, Apache-2.0.

A generator for self-contained SVG vector graphics, which stay sharp when resized and can be shown in browsers or embedded in documents.

In plain words
What is it for?
Use it to create architecture, process, relationship, comparison, timeline, roadmap, and other presentation diagrams as SVG files.
Why use it?
It provides a defined process for planning and checking diagrams so the result is readable, structured, and suitable for its intended use.

Skill for OpenCode

Written for OpenCode: installed under .opencode/.

This is BeWaterMyFriend7/SKILL-PROJECT's own configuration. It tells OpenCode how to work on SKILL-PROJECT itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything SKILL-PROJECT configures →

Reuse

Borrowing it

Nothing to install: this file belongs to BeWaterMyFriend7/SKILL-PROJECT. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/BeWaterMyFriend7/SKILL-PROJECT/main/.opencode/skills/svg-generator/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/BeWaterMyFriend7/SKILL-PROJECT

Made for: OpenCode.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for svg-generator

README.md
[![agentmods](https://agentmods.dev/badge/skills/bewatermyfriend7/skill-project/svg-generator/github.svg)](https://agentmods.dev/skills/bewatermyfriend7/skill-project/svg-generator)
Your own site
<a href="https://agentmods.dev/skills/bewatermyfriend7/skill-project/svg-generator"><img src="https://agentmods.dev/badge/skills/bewatermyfriend7/skill-project/svg-generator/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for svg-generator

Your own site · 80×15
<a href="https://agentmods.dev/skills/bewatermyfriend7/skill-project/svg-generator"><img src="https://agentmods.dev/badge/skills/bewatermyfriend7/skill-project/svg-generator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 120 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,405 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00120 $0.01405
Opus 5 $0.00060 $0.00702
Sonnet 5 $0.00024 $0.00281
Haiku 4.5 $0.00012 $0.00140

Measured 12d ago against content hash 8ac4d85836b9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

svg-generator scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

The scan reads SKILL.md. This mod also ships 2 executable files (scripts/validate.py, tests/test_validate.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.opencode/skills/svg-generator/SKILL.md · 97 lines

How it starts

The opening of the file, as written. The whole thing — 97 lines — stays where its author put it; the contents beside it link to each section on GitHub.

SVG 图形生成器

生成自包含 UTF-8 SVG。用户未指定目录时保存到项目根目录 output/svg/;需要拖拽编辑时改用 xml-diagram

必读资源

  • 分析需求和编写图形描述前读取 references/svg-dsl.md
  • 规划布局、颜色、连线和检查项时读取 references/quality-rules.md
  • 读取与图形类型同名的 templates/*.svg,再参考同类型 examples/*.svg;禁止只替换标题后交付。

强制流程

分析需求 → 详细自然语言 DSL → 匹配模板 → 计算布局 → 生成 SVG
        → 严格源文件校验 → 浏览器渲染检查 → 修正并交付

1. 分析需求

确定图形目的、受众、图形类型、浅色或深色主题、阅读方向、内容层级、核心关系和输出路径。区分用户明确内容、合理补充和不可擅自推断的业务事实。

图形类型从以下目录选择:

  • 架构:业务、应用/系统、技术、部署、数据;
  • 流程与行为:线性流程、分支流程、生命周期、状态、时序;
  • 关系:ER、依赖关系、知识关系;
  • 信息表达:对比、决策矩阵、SWOT、时间线、路线图、总结图。

不生成系统上下文图;中心系统与外部角色关系优先改为应用架构或依赖关系图。

2. 生成详细自然语言 DSL

references/svg-dsl.md 写清画布、层级、分区、节点、布局、尺寸、连线、主题和检查要求。DSL 不强制落盘,不使用 JSON、JSON Schema 或 DiagramPlan 作为中间格式。

3. 匹配模板

  • 业务架构读取 templates/architecture-business.svg
  • 应用或系统架构读取 templates/architecture.svg
  • 技术架构读取 templates/architecture-technical.svg
  • 部署架构读取 templates/architecture-deployment.svg
  • 数据架构读取 templates/architecture-data.svg
  • 其他类型读取同名模板。

用户内容与模板不同,可以增减层和卡片,但必须保留模板的层级、间距和设计语言,不机械保留空层。

4. 计算布局

先计算区域、标题、卡片、文字和必要连线所需空间,再确定画布。

  • 架构图默认整体纵向分层、层内横向排列;一级标题可在容器顶部居中,二级标题与三级卡片分离。
  • 三级卡片默认高 28-34px,同组等宽、等高、等距;内容过多时规则换行或扩展画布。
  • 架构图默认不画箭头,通过层级、容器、分组和空间顺序表达关系。只有调用、流量或主数据流不可缺少时才保留少量正交连线。
  • 同层内容铺满可用区域,不得集中在左侧;左右、上下留白与内容量匹配。
  • 时序图必须包含完整参与者、生命线、横向消息、返回消息和起止语义。
  • 流程图必须包含起点、终点和完整判断出口;关系图必须预留连线通道。

5. 生成 SVG

  • widthheightviewBox 一致。
  • 根节点使用 role="img"aria-labelledby,包含 <title><desc>
  • 使用唯一 id;引用的 marker、filter、gradient、clipPath 必须存在。
  • 使用字体 fallback,不嵌入外部字体、位图、CSS 或远程资源。
  • 多行文字使用 <tspan>,不使用 foreignObject
  • 为主要节点、连线和辅助文字分别添加 data-role="node"data-role="edge"data-text-role="auxiliary"
  • 只使用统一默认视觉风格。浅色和深色只切换颜色变量,几何结构、文字和关系保持一致。
  • background → regions → edges → nodes → labels → legend 分层,保证文字和节点位于连线之上。

6. 严格校验和渲染

交付前运行:

python -X utf8 scripts/validate.py output/svg/文件名.svg --strict --render

修改 skill 内模板或示例时运行:

python -X utf8 scripts/validate.py . --strict
python -m unittest discover -s tests -v

Read the full file on GitHub · 97 lines

Files

What ships with it

44 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 97 lines · 120 tokens per session scan A 8ac4d85836b9

Subscribe to this mod's changes

svg-generator is a skill published in the GitHub repository BeWaterMyFriend7/SKILL-PROJECT (51 stars, last pushed 4d ago), licensed Apache-2.0. It adds 120 tokens to every session and 1,405 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 52 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

make-resume

A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.

Hisn00w/ASu-skills · 86 tokens