CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

docs-diagrams

Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with `<Image srcLight="/docs/light/<name>.png" srcDark="/docs/dark/<name>.png">`. Use when a guide or API reference needs a new diagram or an existing one needs a change. Hand-written SVG from a primitives library, rendered by headless Chrome at 2x. No AI image generation.

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

92%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 an excellent, executable skill: concrete commands, a copy-paste module template, a six-step workflow with explicit review gates and a fix-and-re-render feedback loop, and dense conventions that assume Claude's competence without padding. The one real defect is progressive disclosure: style-tokens.md and review-checklist.md are linked from the Files table and workflow but are absent from the bundle, leaving the skill's color semantics and review criteria unavailable.

Suggestions

Add the missing style-tokens.md and review-checklist.md to the bundle (or fix their paths) — both are linked from the Files table and from workflow steps 1 and 5, and neither exists in the skill directory.

Since the color semantics are load-bearing (step 1 and the Color convention both defer to 'What the colors mean' in style-tokens.md), either inline a minimal color-legend table in SKILL.md or verify the reference resolves, so the workflow does not depend on an unavailable file.

Add a fallback for the missing review-checklist.md content by inlining the key review criteria (equal margins within 4px, shared edges, text centered, vertical alignment) directly into step 5, which currently points only at the absent file.

DimensionReasoningScore

Conciseness

Lean and dense with project-specific knowledge only (e.g. 'text drawn with dominant-baseline="central" has its visual top about 0.35 × size above its y'; 'Published files are a mix of 1x and 2x; that is history, not a target'). It assumes competence — no explanations of SVG, Chrome, or rendering basics — and no sentence is padding, matching the 5 anchor.

5 / 5

Actionability

Fully executable guidance: exact commands ('grep -rhoE srcLight="[^"]+" docs | sort -u', a concrete curl blob URL, 'CHROME=/path/to/chrome ./render.sh', 'node gen.mjs <name>', 'python3 scripts/measure.py light/<name>.png') and a complete, commented diagram-module template. The sketched draw() body is justified flexibility since each diagram differs, so this is 5 rather than 4.

5 / 5

Workflow Clarity

Six clearly sequenced steps with explicit validation (step 5: 'Look at both PNGs at full size, against review-checklist.md and against the references'; 'Run python3 scripts/measure.py light/<name>.png for the margins'), a feedback loop ('Fix in constants and re-render'), and a hard gate ('Do not hand off a PNG you have not looked at') plus a final name-agreement check — matching the 5 anchor's checkpoints and error-recovery loop.

5 / 5

Progressive Disclosure

The structure is exemplary — a task-to-file table, one-level-deep references, workflow steps linking to the file they need — but scored against the actual bundle, two of the six referenced files ('style-tokens.md' and 'review-checklist.md') do not exist anywhere, and style-tokens.md carries the color semantics ('What the colors mean') that step 1 and the Color convention depend on. A dangling, load-bearing reference is more than the 'minor organization gaps' of the 4 anchor, so this falls to 3.

3 / 5

Total

18

/

20

Passed

Description

92%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: it states the exact deliverable (light/dark PNGs referenced by mdx Image blocks), the mechanism (hand-written SVG from a primitives library rendered by headless Chrome at 2x), an explicit 'Use when' clause covering both new and changed diagrams, and a negative constraint (no AI image generation). The only weakness is trigger-term coverage, which misses common synonyms like 'illustration' or 'figure'.

DimensionReasoningScore

Specificity

Names multiple concrete actions and specifics: 'Draw diagrams for the Next.js docs in the style of the ones already published', 'the light/dark PNGs an mdx references', 'Hand-written SVG from a primitives library, rendered by headless Chrome at 2x', plus the constraint 'No AI image generation'. Coverage of the niche is comprehensive with no real gaps, matching the 5 anchor rather than 4.

5 / 5

Completeness

Explicitly answers both questions: what ('Draw diagrams... light/dark PNGs... Hand-written SVG from a primitives library, rendered by headless Chrome at 2x') and when ('Use when a guide or API reference needs a new diagram or an existing one needs a change') with two concrete trigger conditions. This matches the 5 anchor exactly; the 'when' clause is present and specific, so no cap applies.

5 / 5

Trigger Term Quality

Good natural keyword coverage: 'diagram' (twice), 'guide', 'API reference', 'PNG', 'new diagram', 'existing one needs a change'. A few natural synonyms a user might say ('illustration', 'figure', 'image', '.png') are missing, which fits the 4 anchor rather than the comprehensive synonym coverage of 5.

4 / 5

Distinctiveness Conflict Risk

Scoped tightly to 'the Next.js docs in the style of the ones already published there' via mdx <Image> light/dark PNG pairs — a clear niche with distinct triggers and minimal conflict risk against generic diagramming or image skills, matching the 5 anchor.

5 / 5

Total

19

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

relative_links

Relative link issues: 5 missing

Warning

Total

13

/

16

Passed

Repository

vercel/next.js

Path

.agents/skills/docs-diagrams/SKILL.md

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.