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

77%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.agents/skills/resource-image-generator/SKILL.md

Quality

Discovery

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.

This is an excellent skill description that clearly defines a narrow, specific task with concrete actions, explicit trigger conditions, and domain-specific terminology. It covers what the skill does, when to use it, and the specific outputs and verification steps, making it easy for Claude to select appropriately from a large skill set.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: generate placeholder preview images, produce light and dark PNGs at 1920x1080, pass verification, wire images into a specific file path, and verify with agent-browser.	3 / 3
Completeness	Clearly answers both what (generate on-brand 16:9 placeholder preview images, produce light/dark PNGs, wire into recipes.ts, verify) and when ('Use when you need to add, regenerate, or improve a resource's previewImageLightUrl / previewImageDarkUrl').	3 / 3
Trigger Term Quality	Includes highly natural trigger terms users would say: 'placeholder preview images', 'previewImageLightUrl', 'previewImageDarkUrl', 'recipes', 'cookbooks', 'DevHub resources', 'regenerate', 'improve', and specific file references like 'recipes.ts' and 'verify:images'.	3 / 3
Distinctiveness Conflict Risk	Highly distinctive with a very specific niche: DevHub resource preview images at exact dimensions, specific file paths, and specific verification tooling. Extremely unlikely to conflict with other skills.	3 / 3
	Total	12 / 12 Passed

Implementation

55%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The skill is exceptionally actionable with a well-structured workflow, explicit validation steps, and copy-paste ready code for every phase. However, it is severely bloated by inlining hundreds of lines of HTML skeleton templates directly in the body, making it a poor use of context window tokens. The content would be dramatically improved by extracting the skeleton library and base template into referenced files, keeping the SKILL.md as a concise overview with clear pointers.

Suggestions

Extract the skeleton library (Chat, Table, Dashboard, Code/CLI, Pipeline, Minimal) into a separate SKELETONS.md file and reference it from the main skill with a one-line description of each skeleton type.

Move the base HTML template into a separate file (e.g., BASE_TEMPLATE.md or a .html file in the bundle) and reference it, since it's a static artifact that doesn't need to be read on every invocation.

Consider moving the brand palette table and failure modes into a REFERENCE.md file, keeping only the essential workflow steps and decision logic in the main SKILL.md.

Dimension	Reasoning	Score
Conciseness	The skill is extremely verbose at ~500+ lines, with massive inline HTML templates that could easily be referenced as separate files. The skeleton library alone accounts for hundreds of lines of raw HTML that bloat the context window significantly. While the content is accurate, the token cost is enormous and much of it (full HTML templates with inline styles) could be in referenced files.	1 / 3
Actionability	The skill provides fully executable HTML templates, exact bash commands for rendering and verification, specific file paths, a complete CSS palette table, and copy-paste ready code for every step including the sed command, node render commands, agent-browser verification, and TypeScript wiring. Everything is concrete and immediately usable.	3 / 3
Workflow Clarity	The 8-step workflow is clearly sequenced with explicit validation checkpoints: step 4 runs `npm run verify:images`, step 6 uses agent-browser for visual verification, and step 7 provides a detailed visual checklist with clear pass/fail criteria. There's an explicit feedback loop ('If any check fails, tweak the HTML and re-render'). The failure modes section adds additional error recovery guidance.	3 / 3
Progressive Disclosure	This is a monolithic wall of content with all skeleton HTML templates inlined directly in the SKILL.md. The skeleton library (Chat, Table, Dashboard, Code/CLI, Pipeline, Minimal) should clearly be in a separate referenced file like SKELETONS.md. The brand palette, base HTML template, and failure modes could also be split out. Everything is crammed into one massive document with no external file references for detailed content.	1 / 3
	Total	8 / 12 Passed

Validation

90%

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 — 10 / 11 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

	Total	10 / 11 Passed

Repository: databricks/devhub
Commit: 49eeda2

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