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

Pending

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 involved. The only minor note is the use of second person ('when you need'), but the rest of the description uses third person for actions, so the impact is minimal.

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 and specific trigger terms: 'placeholder preview images', 'previewImageLightUrl', 'previewImageDarkUrl', 'DevHub resources', 'recipes', 'cookbooks', 'examples', 'verify:images', '1920x1080', and '16:9'. These cover the terms a user working in this codebase would naturally use.	3 / 3
Distinctiveness Conflict Risk	Extremely specific niche: DevHub resource placeholder preview images with specific file paths, dimensions, and verification steps. Very unlikely to conflict with any other skill.	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 highly actionable with an excellent workflow that includes validation checkpoints, visual verification, error recovery, and a clear checklist. However, it is severely bloated by inlining the entire skeleton library and base HTML template directly in the SKILL.md, making it a poor use of context window tokens. The content would benefit enormously from splitting the skeleton library and base template into separate referenced files, keeping the SKILL.md as a concise overview with workflow steps.

Suggestions

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

Move the base HTML template into a referenced file (e.g., templates/base.html) rather than inlining it, since it's a static artifact that doesn't need to be read on every skill invocation.

Condense the brand palette to just the CSS custom properties block (already in the base template) rather than duplicating it as both a markdown table and CSS declarations.

Trim explanatory prose that Claude can infer — e.g., the 'No Text' rationale paragraphs about locale-neutrality and Figma mockups could be reduced to a single bullet: 'No text characters on images (bars/shapes only).'

Dimension	Reasoning	Score
Conciseness	The skill is extremely verbose at ~500+ lines. The full HTML skeleton library is inlined directly into the SKILL.md rather than being referenced from separate files. The brand palette table, base HTML template, and six complete skeleton HTML blocks massively inflate the token count. Much of this (CSS patterns, HTML structure) is knowledge Claude can derive from a brief description plus one example.	1 / 3
Actionability	The skill provides fully executable HTML templates, exact bash commands for rendering and verification, specific file paths, TypeScript code snippets for wiring images into recipes.ts, and agent-browser commands for visual verification. Everything is copy-paste ready.	3 / 3
Workflow Clarity	The 8-step workflow is clearly sequenced with explicit validation checkpoints: npm run verify:images (step 4), visual verification via agent-browser (step 6), a detailed visual checklist (step 7), and clear feedback loops ('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 six skeleton HTML templates, the full base template, the brand palette, and the complete workflow inlined into a single file. The skeleton library alone is hundreds of lines and should be in a separate referenced file. References to external files (CONTRIBUTING.md, scripts) exist but the skill itself desperately needs to split its own content across files.	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: 6338825

Reviewed: about 10 hours 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.