CtrlK
BlogDocsLog inGet started
Tessl Logo

render-diagram

Create and render an Excalidraw diagram from a description or codebase analysis — exports to PNG via a pure-node pipeline (no browser/MCP), shows it inline via the Read tool, and embeds it in docs. Use when asked to diagram, visualize, or draw an architecture/flow, or when another skill needs a rendered diagram.

69

Quality

87%

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

SKILL.md
Quality
Evals
Security

Quality

Content

82%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.

A dense, high-signal body: concrete commands and hard-won operational gotchas throughout, clear step sequencing with explicit preflight error branches, and a well-organized one-level-deep reference bundle. The main deductions are duplicated passages (deps provisioning, fontFamily, bound-text re-centering) and scripts/requirements referenced by path that are not part of the bundle.

Suggestions

Deduplicate the render-deps auto-provisioning sentence (stated nearly verbatim in both "How rendering works" and "Step 3") — state it once and cross-reference it, and collapse the thrice-repeated fontFamily:2 warning into one canonical note.

Make the validation.md pre-write checklist an explicit step in the Step 2→3 flow (e.g. "run the validation.md checklist; fix and re-check before rendering") so the authoring feedback loop matches the preflight's rigor.

Ship or clearly locate the execution-side files the body depends on (render.sh, render-deps.sh, requirements.json) in the bundle, or note where they live relative to $SKILL_DIR, so every referenced path resolves.

DimensionReasoningScore

Conciseness

Almost every token is skill-specific, hard-won knowledge Claude would not have (fontFamily:2 resvg fallback, non-TTY EOF-to-"n" behavior, show_widget empirics), so it mostly assumes competence. Not 5 because of real redundancy: the render-deps auto-provisioning sentence appears nearly verbatim in both "How rendering works" and "Step 3", the fontFamily:2 warning is repeated three times, and bound-text re-centering is fully explained in both Step 2 and the maintenance notes. Not 3 since none of it is generic padding — it is duplication of genuinely useful content, not explanation of things Claude already knows.

4 / 5

Actionability

Copy-paste-ready commands for both install paths (`DEVFLOW_RENDER_ASSUME_YES=1 devflow visualizations render <path>/<name>.excalidraw` and the `render.sh` fallback), exact JSON property shapes (`boundElements:[{"type":"text","id":"..."}]`, `startBinding`/`endBinding` with `focus:0, gap:4`), exact color hexes per component type, and the exact markdown embed syntax. Specific examples cover the common cases; not 4 because no key execution detail is left to inference.

5 / 5

Workflow Clarity

Steps 1–5 are clearly sequenced, and the preflight section is an explicit validation checkpoint with error-recovery branches (required dep → STOP and report; optional dep → ask, with a non-interactive default; declined install → report missing deps). Not 5 because the authoring-validation checkpoint is delegated rather than stated: Step 2 says "Read the ones you need" among the references including validation.md, so the pre-write checklist is optional in the flow rather than an explicit validate-and-fix loop like the preflight is.

4 / 5

Progressive Disclosure

The body is a well-signaled overview: it inlines only the must-know essentials and points one level deep to references/ — `json-format.md` (element schema + text binding), `arrows.md` (routing + edge bindings), `colors.md` (palette), `examples.md` (complete JSON templates), `validation.md` (pre-write checklist) — all of which exist in the bundle, plus SOURCE.md for attribution. Not 5 because the body also invokes `render.sh`, `render-deps.sh`, and `requirements.json`, none of which are present in this bundle's file structure, leaving a navigation gap for the execution half of the skill.

4 / 5

Total

17

/

20

Passed

Description

88%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.

A strong description: third-person, concrete about the full pipeline, with an explicit and natural 'Use when' trigger clause. The only gap is a few missing synonyms (flowchart, .excalidraw) that would sharpen trigger matching and reduce overlap with generic visualization skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — "Create and render an Excalidraw diagram from a description or codebase analysis", "exports to PNG via a pure-node pipeline (no browser/MCP)", "shows it inline via the Read tool", "embeds it in docs" — comprehensively covering the skill's job. Not below 4 because coverage is complete rather than having minor gaps; nothing here is vague fluff.

5 / 5

Completeness

Explicitly answers both: the "what" is the create/render/export/show/embed pipeline, and the "when" is the explicit clause "Use when asked to diagram, visualize, or draw an architecture/flow, or when another skill needs a rendered diagram." Both are concrete and match the anchor-5 example's structure; a 4 would require the 'when' to be less explicit than it is.

5 / 5

Trigger Term Quality

Natural trigger phrases are present ("asked to diagram, visualize, or draw an architecture/flow") plus the product name "Excalidraw". Not 5 because common variations like "flowchart", "architecture diagram of this codebase", or the `.excalidraw` file extension are missing; not 3 because the included terms are exactly what a user would naturally say.

4 / 5

Distinctiveness Conflict Risk

The Excalidraw/pure-node-pipeline niche is clear and "when another skill needs a rendered diagram" carves out a distinct role. Not 5 because bare "visualize"/"diagram" triggers could overlap with general charting/dataviz skills; not 3 because the description repeatedly narrows to rendered Excalidraw diagrams, which most visualization skills do not produce.

4 / 5

Total

18

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 2 missing

Warning

Total

15

/

16

Passed

Repository
AndreJorgeLopes/devflow
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.