Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add bahayonghang/my-ai-cli-toolkit --skill beautiful-mermaid-editorgit clone --depth 1 https://github.com/bahayonghang/my-ai-cli-toolkitWrote 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.
[](https://agentmods.dev/skills/bahayonghang/my-ai-cli-toolkit/beautiful-mermaid-editor)<a href="https://agentmods.dev/skills/bahayonghang/my-ai-cli-toolkit/beautiful-mermaid-editor"><img src="https://agentmods.dev/badge/skills/bahayonghang/my-ai-cli-toolkit/beautiful-mermaid-editor/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.
<a href="https://agentmods.dev/skills/bahayonghang/my-ai-cli-toolkit/beautiful-mermaid-editor"><img src="https://agentmods.dev/badge/skills/bahayonghang/my-ai-cli-toolkit/beautiful-mermaid-editor.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00065 | $0.01011 |
| Opus 5 | $0.00032 | $0.00505 |
| Sonnet 5 | $0.00013 | $0.00202 |
| Haiku 4.5 | $0.00006 | $0.00101 |
Grade A, and why
beautiful-mermaid-editor 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.
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.
How it starts
The opening of the file, as written. The whole thing — 100 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Beautiful Mermaid Editor
Work from the Beautiful Mermaid editor source tree, not from generated HTML output.
Preconditions
- If
$ARGUMENTSincludes a repo path, treat it as the starting point. - Before proposing edits, read the target repo's
AGENTS.md, package scripts, and current editor source. - Treat
editor.tsas the source of truth. Do not edit generatededitor.htmldirectly unless the target repo explicitly requires committed build artifacts.
Execution flow
1. Locate the real edit surface
- Find the Beautiful Mermaid repo root and the
editor.tsfile that generateseditor.html. - Read the current build/dev entrypoints (
package.json,dev.ts, Bun scripts, or equivalents) before assuming command names. - Identify adjacent source files only after locating the concrete change path:
src/browser.tssrc/types.tssrc/theme.tssrc/styles.tssamples-data.ts
2. Route by task type
Load only the references needed for the requested change:
| Task type | Load first |
|---|---|
| Config panel, color control, slider, sample preset | references/CHANGE_PATTERNS.md |
| Render pipeline, theme, dark mode, zoom, export, clipboard | references/ARCHITECTURE.md |
| Rebuild commands, smoke checks, generated artifact review | references/VERIFICATION.md |
Renderer support or new RenderOptions field |
references/ARCHITECTURE.md + references/CHANGE_PATTERNS.md |
3. Inspect before editing
Trace the current behavior through the real code path before changing anything:
- UI control or action handler in
editor.ts - local editor state
buildOptions()/ render call- SVG post-processing, theme sync, zoom, or export path
What ships with it
4 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.
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.
- 12d ago First seen · 100 lines · 65 tokens per session scan A b8353e7f6d29
beautiful-mermaid-editor is a skill published in the GitHub repository bahayonghang/my-ai-cli-toolkit (16 stars, last pushed 2d ago), licensed MIT. It adds 65 tokens to every session and 1,011 once invoked, about $0.0003 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.
Other skills, from other repositories
widen-return-type
When delegating a task affected by this skill, include.
add-a-lib
Scaffold a new shared library under libs/ in the builders-stack monorepo. Use when code is needed in two or more places (apps or services) and should become a single source of truth consumed by package name. Covers the package.json, tsconfig, the one-public-door src/index.ts barrel, and wiring it into a consumer…
bun
Use this skill when building with Bun runtime — Bun APIs, testing, package management, shell scripting, hot reload, SQLite, file I/O. This skill enforces: built-in APIs over npm equivalents, Bun test runner, bun install speed optimization, Bun.shell for scripts. Do NOT use for: Node.js-specific APIs…
hono-core
Hono ultrafast web framework fundamentals - routing, context, handlers, and response patterns for multi-runtime deployment.
typescript-ultimate
End-to-end TypeScript engineering skill for designing, implementing, reviewing, and refactoring production-grade TS codebases. Use when tasks involve TypeScript architecture, advanced typing, strict safety, API/schema typing, React/Node/Nest/Express/Fastify patterns, testing, linting, migration, or code review in…
nifra
Use when writing, reviewing, or debugging code in a Nifra project (@nifrajs/ packages, nifra CLI, server()/defineContract, loaders and actions, file routes under routes/). Explains how to reach Nifra's live MCP tools so signatures come from the installed version instead of memory, and which sibling skill to load for…