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

—

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

77%

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 executable code, explicit validation/feedback loops, and clear organization. Its main weaknesses are redundancy around the no-text rule and a large inline skeleton library that has not been split into reference files.

Suggestions

Collapse the 'One Big Rule: No Text' rationale bullets into the Overview to remove the duplicate no-text statement and the non-operational Figma/lo-fi justification.

Move each skeleton in the 'Skeleton Library' into its own reference file (e.g. references/skeleton-chat.html) referenced one level deep, so SKILL.md stays an overview with the picking table pointing to the detail files.

Tighten or remove the 'Clean and modern (lo-fi app skeletons look like the UI mockups designers share in Figma...)' justification, which explains a concept Claude does not need motivated.

Dimension	Reasoning	Score
Conciseness	Mostly efficient and operational, but the no-text rule is stated twice (Overview bullets and the 'One Big Rule' section with three rationale bullets like 'lo-fi app skeletons look like the UI mockups designers share in Figma'), and the inline six-skeleton library is voluminous — matching the score-2 'mostly efficient but could be tightened' rather than the lean score-3 anchor.	2 / 3
Actionability	Provides fully executable, copy-paste-ready material — a complete base HTML template, six complete skeleton HTML blocks, exact `sed`/`node`/`npm run verify:images`/`agent-browser` commands, and TS wiring snippets — matching the score-3 'fully executable code/commands' anchor rather than the pseudocode/incomplete score-2 anchor.	3 / 3
Workflow Clarity	The 8-step workflow has explicit validation checkpoints (step 4 'Must pass. If it fails...', step 7 visual checklist) and feedback loops ('If any check fails, iterate on the HTML and re-render'; 'Once the pair passes both `npm run verify:images` and the visual checklist, commit'), plus a Failure Modes section — matching the score-3 anchor and not the checkpoint-missing score-2 anchor.	3 / 3
Progressive Disclosure	Sections are clearly organized and signaled, but no bundle files exist and hundreds of lines of HTML skeletons (the 'Skeleton Library') are inline content that could be split into one-level-deep reference files, matching the score-2 'content that should be separate is inline' anchor rather than the score-3 'content appropriately split' anchor; the under-50-lines exception does not apply.	2 / 3
	Total	10 / 12 Passed

Description

100%

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, third-person description that names concrete actions, explicit 'Use when' triggers, and distinct field/verifier tokens. It answers both what and when without verbosity or over-claims.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'Generate on-brand 16:9 placeholder preview images', 'Produces a light and a dark PNG at 1920x1080 that passes `npm run verify:images`', 'wires the images into `src/lib/recipes/recipes.ts`', 'verifies them with agent-browser' — matching the score-3 anchor of several specific concrete actions rather than a single named action (score 2).	3 / 3
Completeness	Explicitly answers both what ('Generate on-brand 16:9 placeholder preview images...') and when via an explicit 'Use when you need to add, regenerate, or improve...' clause plus the 'when a real app screenshot is not available' condition, satisfying the score-3 anchor and not the score-2 cap (which requires a missing/implied 'when').	3 / 3
Trigger Term Quality	Covers natural terms a developer would actually say — 'placeholder preview images', 'previewImageLightUrl / previewImageDarkUrl', 'recipes, cookbooks, examples', 'add, regenerate, or improve' — giving good coverage of common variations rather than only jargon or a single phrase.	3 / 3
Distinctiveness Conflict Risk	Occupies a clear niche (DevHub resource placeholder preview images) with distinct triggers (previewImageLightUrl/previewImageDarkUrl, `npm run verify:images`) unlikely to fire for unrelated skills, matching the score-3 clear-niche anchor rather than the overlapping score-2 anchor.	3 / 3
	Total	12 / 12 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
Commit: 131db95

Reviewed: 5 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.