resource-image-generator

Name: resource-image-generator
Availability: InStock
Author: Databricks

Generate deterministic light/dark PNG placeholder pairs for DevHub resources.

13|13|Updated Mar 12, 2026

Search Tags:#playwright #image-generation #devhub #placeholder-images #brand-skeleton #ui-skeleton

Ready to run

npx skills add https://github.com/databricks/devhub --skill resource-image-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: resource-image-generator
Source: https://github.com/databricks/devhub/tree/main/.agents/skills/resource-image-generator
Command: npx skills add https://github.com/databricks/devhub --skill resource-image-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

Generate deterministic, branded placeholder preview images for DevHub resources when real screenshots are unavailable, ensuring visuals align with the Databricks brand.

Core Features & Use Cases

Deterministic, on-brand 1920x1080 placeholders for recipes, cookbooks, and examples.
Wires generated images into src/lib/recipes/recipes.ts and passes npm verify:images.
Supports light/dark themes and no-text skeletons to avoid content leakage.

Quick Start

Use the resource-image-generator to create a pair of placeholder preview images for a new resource and wire them into its metadata.

Frequently Asked Questions about resource-image-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate brand-consistent placeholder preview images for missing resource screenshots?▼

Generate brand-consistent placeholder preview images by creating deterministic 1920x1080 PNG pairs for light and dark themes. The tool wires these placeholders directly into repository metadata to replace missing screenshots for recipes, cookbooks, and examples.

What are UI skeleton placeholders and when do I need them for DevHub resources?▼

UI skeleton placeholders are no-text visual frames that prevent content leakage while displaying resources. You need them for DevHub resources when real screenshots are unavailable, ensuring visuals align with the Databricks brand without exposing sensitive data.

Does the image generation process work with Playwright and pass npm verify:images validation?▼

Yes, the image generation process uses Playwright for browser automation and validates all generated PNGs by running npm verify:images. This ensures all placeholder previews meet repository standards before being wired into src/lib/recipes/recipes.ts.

How to wire generated placeholder images into recipes.ts metadata?▼

Wire generated placeholder images into recipes.ts metadata by running the generator script, which automatically updates the src/lib/recipes/recipes.ts file with paths to the new 1920x1080 light and dark PNG pairs for each resource.

What are the limitations of using no-text skeleton constraints for placeholder images?▼

The no-text skeleton constraint limits placeholders to generic visual frames only, preventing any text rendering in the generated images. This avoids content leakage but means placeholders cannot display specific resource titles or descriptive information.