experience-content-media-image-generate
About experience-content-media-image-generate
A skill for generating, downloading, and previewing image assets. It first checks for the `media-management` MCP server's `create_image` tool, then provides a fixed placeholder URL if generation is unavailable.
Key features
- 01Checks image-generation tool availability
- 02Generates images with `create_image`
- 03Configurable output format and quality
- 04Downloads and previews generated images
- 05Uses a fixed fallback placeholder
Use cases
- 01Generating an image from a natural-language prompt
- 02Saving and previewing a generated asset
- 03Providing an image source when generation is unavailable
MCP support
Uses the `create_image` tool from the `media-management` MCP server when available; otherwise it specifies a placeholder URL fallback.
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/experience-content-media-image-generatein Claude Code to confirm it loaded.
Bundled filesscripts/download-image.sh
Details
From the project READMEGenerating Images
Goal
To programmatically generate, download, and preview visual assets requested by the user, ensuring specific format and quality standards are met while providing a robust fallback mechanism.
Workflow
- Check if the
media-managementMCP server is configured and itscreate_imagetool is available. - If available, use
create_imageto generate the image. - If not available, use the placeholder fallback below.
MCP: media-management
Tool: create_image
Check your available tools. If create_image is present, use it as the primary image generation method — pass the natural language prompt and applicable parameters from the table below. (media-management here refers to the MCP server name, not this skill.)
If create_image is not in your tool list, the media-management MCP is not configured — use the placeholder fallback below.
Image Generation Parameters
Use these defaults unless the user specifies otherwise:
| Parameter | Default | Options |
|---|---|---|
model | Standard | Standard, Premium |
size | auto | auto, 1024x1024, 1536x1024, 1024x1536 (pick closest to user-requested size) |
quality | medium | low, medium, high |
outputCompression | 75 | 0–100 (webp/jpeg only) |
outputFormat | webp | webp, jpeg, png |
background | auto | auto, transparent, opaque |
Format rule: If outputFormat is png, set outputCompression to 100.
After Successful Generation
Run download-image.sh (located in this skill's scripts/ directory) to download and preview the image:
bash scripts/download-image.sh \
--url "<image_url_from_response>" \
--id "<responseId>" \
--format "<outputFormat>" \
--preview
The script handles credential retrieval, download, and VS Code preview. Pass --output-dir <dir> to override the default generatedimages/ directory.
Never resize or post-process the generated image with external tools. To control display dimensions, use CSS properties (e.g. width, height, object-fit) at the point of use.
Fallback: Use placeholder URL
If image generation fails or is not enabled, return the following URL as the image source — do not download it, do not save it locally:
https://cdn.scs.static.lightning.force.com/content/assets/d5222d4a11e6c2b735152d7eea824ce4/placeholder.svg
Use this URL directly wherever the image is referenced in code (e.g. as a src attribute or CSS url()).
Placeholder Policy
There is only one placeholder URL. Do not download it, modify it, or generate alternative placeholders using Python, ImageMagick, or any other tool.
If the user requests a placeholder of a specific size or format, inform them that only this placeholder URL is available and direct them to use CSS properties (e.g. width, height, object-fit) to scale it at the point of use.