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

91%

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

The canonical home for this skill is docs-diagrams in vercel/next.js

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.

An exceptionally well-crafted workflow body: lean and dense with non-obvious constraints, fully executable commands and templates, and a six-step process with real validation and feedback loops. The one material defect is bundle integrity — style-tokens.md and review-checklist.md are repeatedly referenced as the source of truth for colors and review criteria but are missing from the bundle, breaking two navigation paths.

Suggestions

Add the missing style-tokens.md and review-checklist.md to the bundle (or inline the color-token table and review criteria), since the body defers to both files multiple times as the source of truth for colors and the review bar.

If the two markdown files are intentionally not shipped, replace the dead links with the minimum needed inline (e.g., the 'What the colors mean' mapping) so the color-semantics rules in the Conventions section are self-contained.

Verify every path in the Files table resolves in the shipped bundle — currently 2 of 6 rows point at nonexistent files, which undermines an otherwise excellent navigation table.

DimensionReasoningScore

Conciseness

Every paragraph carries non-obvious, skill-specific constraints ("Top must equal bottom and left must equal right, within 4px", "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") with zero padding and no explanation of concepts Claude already knows. This matches anchor 5 — every token earns its place.

5 / 5

Actionability

Fully executable, copy-paste-ready guidance throughout: the grep/curl reference-fetching commands, a near-complete diagram module template with exact field semantics, `./render.sh`, `CHROME=/path/to/chrome ./render.sh`, `node gen.mjs <name>`, `python3 scripts/measure.py light/<name>.png`, and exact primitive signatures like `browserWindow(t, x, y, w, h, url, body = '')`. This matches the anchor-5 exemplar of copy-paste commands covering the common cases.

5 / 5

Workflow Clarity

Six numbered steps (read mdx → pull references → write module → render → review → hand off) with an explicit validation checkpoint and feedback loop: "Look at both PNGs at full size, against review-checklist.md and against the references... Run python3 scripts/measure.py... Fix in constants and re-render. Do not hand off a PNG you have not looked at." The hand-off step adds its own verification (srcLight basename must match the PNG name). This is a non-destructive skill, so the batch/destructive cap does not apply.

5 / 5

Progressive Disclosure

The task→file table is well-designed and references are one level deep and clearly signaled, but scored against the actual bundle, two of the six referenced paths (`style-tokens.md` and `review-checklist.md`, cited three times in the body and both load-bearing for the color conventions and the review step) do not exist in the bundle. Dead navigation targets for core reference material are more than the 'minor organization gaps' of anchor 4, though the structure itself is far better organized than anchor 3's exemplar.

3 / 5

Total

18

/

20

Passed

Description

87%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 a concrete capability, an explicit and natural 'Use when' trigger clause covering both new and changed diagrams, the exact deliverable convention, and a clear method with an exclusion boundary. The only gaps are missing common synonyms like 'figure' or 'illustration' that users might use instead of 'diagram'.

DimensionReasoningScore

Specificity

"Draw diagrams for the Next.js docs", "Hand-written SVG from a primitives library, rendered by headless Chrome at 2x", and "No AI image generation" name several concrete, specific actions for a well-defined deliverable (light/dark PNGs matching the published Image-tag convention). It sits at anchor 4 rather than 5 because it describes one task with a detailed method rather than the multiple distinct actions of the anchor-5 exemplar, and above anchor 3 because coverage is thorough, not 1-2 actions.

4 / 5

Completeness

It explicitly answers both questions: what ("Draw diagrams for the Next.js docs in the style of the ones already published there... 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"). The when-clause carries concrete trigger phrases, matching the anchor-5 exemplar pattern; anchor 4 would require the when to be less explicit than it is.

5 / 5

Trigger Term Quality

Natural trigger terms are well covered: "diagram", "new diagram", "Next.js docs", "guide", "API reference", "image", and "an existing one needs a change". It falls short of anchor 5's comprehensive synonym coverage (e.g., "figure", "illustration", "chart" are absent) but clearly exceeds anchor 3's partial coverage.

4 / 5

Distinctiveness Conflict Risk

The Next.js docs niche is pinned by the mdx `<Image srcLight="/docs/light/<name>.png" srcDark="/docs/dark/<name>.png">` convention, and "No AI image generation" explicitly separates it from image-generation skills. Clear niche with distinct triggers and minimal conflict risk, matching anchor 5.

5 / 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: 5 missing

Warning

Total

15

/

16

Passed

Repository

boranfurkan/planb-hackathon

Path

skills/.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.