CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

resource-image-generator

Generate on-brand 16:9 placeholder preview images for DevHub resources (recipes, cookbooks, examples) when a real app screenshot is not available. Use when you need to add, regenerate, or improve a resource's previewImageLightUrl / previewImageDarkUrl. Produces a light and a dark PNG at 1920x1080 that passes `npm run verify:images`, wires the images into `src/lib/recipes/recipes.ts`, and verifies them with agent-browser.

Quality

86%

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

77%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 exceptionally actionable — every command, template, and verification step is copy-paste ready — and the workflow is clearly sequenced with validation checkpoints and failure-mode recovery. Its weaknesses are structural: the inline HTML skeleton library makes the file far longer than it needs to be at load time, and key rules (no-text, primary-outcome) are repeated across sections.

Suggestions

Move the base HTML template and the six skeleton HTML blocks to a references/skeletons.md (referenced one level deep from the workflow), keeping only the 'Picking A Skeleton' mapping table in SKILL.md to cut the always-loaded body from ~740 lines to roughly a third.

State the no-text rule once in a single authoritative section and reference it from the workflow rules and visual checklist instead of restating it four times.

Merge the 'Picking A Skeleton' guidance into the Skeleton Library intro (or vice versa) — the 'primary outcome, not most services' advice currently appears nearly verbatim in two places.

DimensionReasoningScore

Conciseness

The body is ~740 lines, with ~500 of them an inline HTML skeleton library, and key guidance repeated several times: the no-text rule appears in the Overview ("no titles, no subtitles, no body copy"), the 'One Big Rule' section, the step-2 rules ("No text characters at all"), and the visual checklist ("Zero text. No letters."); the 'pick the primary outcome' advice is stated twice nearly verbatim ("pick the one that matches the **primary outcome**" at both the Skeleton Library intro and 'Picking A Skeleton'). Mostly efficient and free of concept-explanation padding, but more than minor trimming is warranted — matching the level-3 anchor rather than level 4's 'minor instances'.

3 / 5

Actionability

Fully executable, copy-paste-ready throughout: the exact scoped sed command for the dark variant, exact node invocations with --input/--output paths, `npm run verify:images`, concrete agent-browser commands (open/eval/screenshot), a complete base HTML template, and six complete skeleton HTML blocks. Not 4: there are no gaps — even the output directory choice and recipes.ts wiring snippets are given verbatim.

5 / 5

Workflow Clarity

A clear 8-step numbered workflow with explicit validation checkpoints and feedback loops: step 4 'Verify The Contract' (`npm run verify:images` must pass), step 6-7 visual verification via agent-browser with a 6-item checklist and 'If any answer is "no", iterate on the HTML and re-render', plus a 'Failure Modes And Fixes' section mapping each failure to its fix. Matches the level-5 anchor exactly.

5 / 5

Progressive Disclosure

No references/, scripts/, or assets/ bundle directories exist — everything lives in a single ~740-line SKILL.md, and the ~500-line skeleton library plus base template is content that clearly belongs in a separate file (e.g. references/skeletons.md), with the body keeping only the picking table. Section structure and navigation are good, which fits the level-3 anchor ('some structure... content that should be separate is inline') better than level 2 (which implies no organization) or level 4 ('most content is appropriately placed').

3 / 5

Total

16

/

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 exactly what it produces (light/dark 1920x1080 PNGs), what it does end-to-end (generate, pass the verifier, wire into recipes.ts, visually verify), and gives an explicit 'Use when...' trigger clause tied to concrete field names. The only minor gap is a few natural synonyms (thumbnail, hero image, fallback art) beyond the ones it does cover.

DimensionReasoningScore

Specificity

Quotes multiple specific concrete actions with comprehensive coverage: "Generate on-brand 16:9 placeholder preview images for DevHub resources (recipes, cookbooks, examples)", "Produces a light and a dark PNG at 1920x1080 that passes `npm run verify:images`", "wires the images into `src/lib/recipes/recipes.ts`", and "verifies them with agent-browser". Unlike the level-4 anchor, there are no gaps in coverage — generate, verify, wire, and re-verify are all named.

5 / 5

Completeness

Explicitly answers both: what — "Produces a light and a dark PNG at 1920x1080 that passes `npm run verify:images`, wires the images into `src/lib/recipes/recipes.ts`, and verifies them with agent-browser" — and when — "when a real app screenshot is not available. Use when you need to add, regenerate, or improve a resource's previewImageLightUrl / previewImageDarkUrl". Clear what-and-when with concrete trigger phrases, matching the level-5 anchor; level 4 would require the 'when' to be less explicit.

5 / 5

Trigger Term Quality

Good keyword coverage with natural phrases: "placeholder preview images", "recipes, cookbooks, examples", "add, regenerate, or improve", "previewImageLightUrl / previewImageDarkUrl", "real app screenshot". Not 5 because a few natural synonyms users might say are missing (e.g. thumbnail, hero image, card art, fallback art); not 3 because the concrete field names and add/regenerate/improve variations go well beyond 'some relevant keywords'.

4 / 5

Distinctiveness Conflict Risk

Clear niche with distinct triggers: scoped to DevHub resource preview images with repo-specific artifacts (`npm run verify:images`, `src/lib/recipes/recipes.ts`, agent-browser), so minimal conflict risk with other skills. Not 4: no meaningful overlap with closely related skills since the triggers are uniquely tied to this repo's field names and workflow.

5 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (740 lines); consider splitting into references/ and linking

Warning

referenced_paths_exist

Referenced path issues: 4 missing

Warning

Total

14

/

16

Passed

Repository

databricks/devhub

Path

.agents/skills/resource-image-generator/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.