CtrlK
BlogDocsLog inGet started
Tessl Logo

beautiful-mermaid

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

64

Quality

76%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/beautiful-mermaid/SKILL.md

The canonical home for this skill is beautiful-mermaid in intellectronica/agent-skills

SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a lean, highly actionable five-step workflow with executable commands throughout and a clean one-level-deep reference structure. Its only weaknesses are a duplicated theme listing and a missing output-verification checkpoint before cleanup.

DimensionReasoningScore

Conciseness

The body contains no padding or explanations of concepts Claude already knows — every section is operational. Minor trimmable redundancy exists: the theme list appears twice (the prose list in "Available Themes" and again as the "Theme Selection Guide" table). This matches anchor 4 (efficient with minor instances that could be trimmed) rather than anchor 5's every-token-earns-its-place.

4 / 5

Actionability

Every step gives copy-paste-ready executable commands ("bun run scripts/render.ts --code ... --output diagram --theme default", "agent-browser screenshot --full diagram.png"), with alternative runtimes (npx tsx, deno) and both inline-code and file input shown. This matches anchor 5: fully executable commands covering the common cases.

5 / 5

Workflow Clarity

The five steps are clearly sequenced (generate/validate code → render SVG → HTML wrapper → PNG capture → cleanup) with a troubleshooting section for error recovery. Minor validation gap: there is no explicit checkpoint verifying the SVG/PNG were produced before Step 5 deletes intermediary files. This matches anchor 4 (clear sequence, most checkpoints present) rather than anchor 5's explicit validate-then-proceed loop inside the workflow.

4 / 5

Progressive Disclosure

The SKILL.md is a well-organized overview that correctly delegates full syntax details to references/mermaid-syntax.md (a real bundle file, one level deep, clearly signaled in Step 1) and invokes the bundled scripts directly. Content is appropriately split and navigation is easy, matching anchor 5.

5 / 5

Total

18

/

20

Passed

Description

66%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is clear, concise, and distinct with an explicit "Use when" clause, but its trigger coverage is narrow. Broadening the trigger phrases to include natural variations (flowchart, diagram, chart, .mmd) would lift completeness and trigger term quality.

Suggestions

Expand the "Use when" clause to cover natural trigger variations, e.g. "Use when the user asks to render, draw, or export a Mermaid diagram, flowchart, or sequence diagram, or mentions .mmd files."

Add 1-2 more concrete capabilities to the "what" portion (e.g., applying themes, supporting flowcharts/sequence/state/class/ER diagrams) to improve coverage beyond a single render action.

DimensionReasoningScore

Specificity

"Render Mermaid diagrams as SVG and PNG" names the domain and one concrete action (rendering to two output formats), but lists no other capabilities such as theming, diagram types, or syntax validation, matching the anchor for 1-2 concrete actions that are not comprehensive. It falls short of anchor 4, which requires several specific actions listed.

3 / 5

Completeness

It clearly answers "what" ("Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library") and "when" ("Use when the user asks to render a Mermaid diagram"). The trigger clause is explicit but narrow — a single phrase where anchor 5 requires concrete trigger phrases with variations, so it sits at anchor 4 where the "when" could be more specific.

4 / 5

Trigger Term Quality

The keywords "Mermaid diagram", "render", "SVG", and "PNG" are relevant, but common natural variations are missing — users would say "draw a flowchart", "make a diagram", "visualize a pipeline", or mention ".mmd" files. This matches the anchor for some relevant keywords while missing common variations or synonyms, rather than anchor 4's only-a-few-missing.

3 / 5

Distinctiveness Conflict Risk

"Mermaid" is a clear niche with distinct triggers (rendering Mermaid diagrams as SVG/PNG) and minimal overlap risk with other skills; a user or model could not confuse this with a generic diagramming or document skill. This matches anchor 5 exactly.

5 / 5

Total

15

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
calesthio/OpenMontage
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.