image

Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs.

Quality

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

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 efficient, well-structured reference skill: executable quick start, catalog customization example, and tidy component/export tables with zero fluff. The only improvement would be showing how to load font data and installing the resvg dependency for the PNG path.

Suggestions

Add one line showing how to obtain fontData (e.g. reading a .ttf/.woff2 file into a Buffer) since every render call requires it.

State that renderToPng requires installing @resvg/resvg-js (e.g. npm i @resvg/resvg-js) at the point of use, not only in the exports table.

Dimension	Reasoning	Score
Conciseness	The body is lean: a one-line intro, executable code, and dense reference tables with no padding or explanations of concepts Claude already knows. Every token earns its place.	5 / 5
Actionability	The quick start is near copy-paste ready with a complete spec shape, but "fontData" is referenced without any font-loading guidance and the "@resvg/resvg-js" dependency needed for renderToPng is only noted in a table — minor gaps against anchor 5.	4 / 5
Workflow Clarity	This is a simple single-task skill (render a spec to SVG/PNG) and the single action is unambiguous, fully demonstrated by the quick start and export tables. No destructive or batch operation requires validation checkpoints.	5 / 5
Progressive Disclosure	No bundle files exist and none are needed: the ~90-line body is compact, well-sectioned (Quick Start, Components, Exports, Sub-paths), and the inline tables are the appropriate size to remain in SKILL.md.	5 / 5
	Total	19 / 20 Passed

Description

82%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 in third-person voice with an explicit what-and-when structure and concrete triggers. The only weakness is that the capability statement covers one core action with two output formats rather than several distinct actions, which slightly limits specificity and keyword variety.

Dimension	Reasoning	Score
Specificity	"turns JSON specs into SVG and PNG images via Satori" names the domain with 1-2 concrete actions (SVG and PNG rendering), but does not list several distinct actions as anchor 4 requires.	3 / 5
Completeness	Explicitly answers "what" (image renderer turning JSON specs into SVG and PNG images via Satori) and "when" via a concrete "Use when..." clause listing multiple trigger scenarios.	5 / 5
Trigger Term Quality	Triggers "generating OG images from JSON", "creating social cards", "rendering AI-generated image specs", and the package name "@json-render/image" give good natural keyword coverage, though synonyms like "open graph" or "PNG/SVG images" are missing.	4 / 5
Distinctiveness Conflict Risk	Clear niche (JSON-spec-to-image rendering tied to a specific package) with distinct trigger phrases; minimal risk of firing for unrelated image skills.	5 / 5
	Total	17 / 20 Passed

Validation

100%

Warnings & errors only

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: vercel-labs/json-render
Path: skills/image/SKILL.md
Commit: c2600d7

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.