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

88%

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

85%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 highly actionable, well-sequenced skill with strong validation feedback loops; its main weakness is progressive disclosure — the large reusable HTML template library is inlined in SKILL.md rather than split into reference files the overview links to.

Suggestions

Move the six skeleton templates (and optionally the base HTML template) into separate files under references/ (e.g. references/skeletons/chat.html) and have SKILL.md link to them, keeping the workflow and palette as the in-file overview.

Trim the rationale bullets under 'The One Big Rule: No Text' ('Consistent with the rest of DevHub / Locale-neutral / Clean and modern') since the rule itself plus the checklist already convey the constraint.

Consolidate the 'No Text' rule and the checklist's 'Zero text' item to remove the light redundancy, or cross-reference one from the other.

Dimension	Reasoning	Score
Conciseness	Prose is tight and assumes Claude's competence (no explaining of Playwright, HTML, or 16:9), with most size coming from needed copy-paste templates; minor rationale bullets under 'The One Big Rule' and light redundancy between the rule and the checklist could be trimmed.	4 / 5
Actionability	Fully executable throughout: a complete base HTML template, six complete skeleton snippets, exact bash commands (scoped sed, node render script, npm run verify:images, agent-browser invocations), exact output paths, and copy-paste TS wiring — covering the common cases end to end.	5 / 5
Workflow Clarity	An explicit 8-step sequence with validation checkpoints (`npm run verify:images` must pass), a feedback loop ('If any check fails, tweak the HTML and re-render'), a dedicated visual checklist, and a Failure Modes And Fixes section for error recovery.	5 / 5
Progressive Disclosure	Headers and the 'Picking A Skeleton' table give good navigation, but ~500 lines of reusable base + skeleton HTML templates are inlined in a 740-line SKILL.md with no bundle files (references/scripts/assets absent); this bulk belongs in one-level-deep reference files the overview points to.	3 / 5
	Total	17 / 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, specific description that clearly states both the concrete actions and the triggering conditions, anchored to real codebase artifacts. The only soft spot is trigger-term breadth, which could add user-natural synonyms alongside the technical field names.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — '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' — with comprehensive coverage of what the skill does.	5 / 5
Completeness	Explicitly answers both what (generate on-brand 16:9 light/dark PNGs at 1920x1080, pass verify, wire into recipes.ts, verify with agent-browser) and when ('Use when you need to add, regenerate, or improve... when a real app screenshot is not available') with concrete trigger phrases.	5 / 5
Trigger Term Quality	'Use when you need to add, regenerate, or improve a resource's previewImageLightUrl / previewImageDarkUrl' gives good concrete triggers tied to real field names, but lacks synonyms or common variations (e.g. 'fallback image', 'card art', 'thumbnail').	4 / 5
Distinctiveness Conflict Risk	Highly niche — DevHub resource placeholder previews, specific paths, field names, and tooling (verify:images, agent-browser) — giving a clear trigger surface with minimal conflict risk against other skills.	5 / 5
	Total	19 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
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
Commit: f83a74d

Reviewed: 4 days 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.