mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 11:19:27 +08:00
Rename skill and update desc
This commit is contained in:
Udai Arora
parent
d152f74a93
commit
4745bc71ee
77
skills/generating-images/SKILL.md
Normal file
77
skills/generating-images/SKILL.md
Normal file
@ -0,0 +1,77 @@
|
||||
---
|
||||
name: generating-images
|
||||
description: Generates high-fidelity visual assets, logos, and UI mockups using the media-management MCP server. Trigger this skill whenever the user asks to "generate image," "create logo," "produce a hero banner," "design a UI icon," or "build a visual asset." It is explicitly designed to handle technical specifications including file formats (PNG, JPEG, WEBP), specific dimensions (e.g., "1024x1024"), and transparency requirements. Load this skill when the user needs to integrate generated imagery into application code or web pages. It ensures consistent output quality and provides a standardized SVG fallback if the generation tool is unavailable.
|
||||
---
|
||||
|
||||
# Generating 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
|
||||
|
||||
1. Check if the `media-management` MCP server is configured and its `create_image` tool is available.
|
||||
2. If available, use `create_image` to generate the image.
|
||||
3. 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
|
||||
|
||||
Automatically download and preview the image:
|
||||
|
||||
**1. Retrieve credentials:**
|
||||
```bash
|
||||
TARGET_ORG=$(sf config get target-org --json | jq -r '.result[0].value')
|
||||
```
|
||||
|
||||
**2. Download the image:**
|
||||
```bash
|
||||
mkdir -p "generatedimages"
|
||||
curl -f -H "Authorization: Bearer $ACCESS_TOKEN" "$URL" -o "generatedimages/<responseId>.<outputFormat>"
|
||||
```
|
||||
|
||||
**3. Preview in VS Code:**
|
||||
```bash
|
||||
code generatedimages/<responseId>.<outputFormat>
|
||||
```
|
||||
|
||||
**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.
|
||||
@ -1,68 +0,0 @@
|
||||
---
|
||||
name: image-generation
|
||||
description: Orchestrates how to handle image creation requests. Decides whether to delegate to the media-management MCP tool or fall back to a placeholder when the MCP is unavailable. Use when the user asks to add, include, or place an image or media asset in their project.
|
||||
---
|
||||
|
||||
# Media Management
|
||||
|
||||
This skill defines the decision flow for handling image creation requests. It does not generate images itself — it determines what to do based on what is available.
|
||||
|
||||
## Decision Flow
|
||||
|
||||
1. Look at your available tools. If `create_image` is present, proceed to **Using the MCP Tool**.
|
||||
2. If `create_image` is not available, proceed to **Fallback: Placeholder**.
|
||||
|
||||
## Using the MCP Tool
|
||||
|
||||
Delegate image generation to the `create_image` tool from the `media-management` MCP server. (`media-management` here refers to the MCP server name, not this skill.)
|
||||
|
||||
Apply these defaults unless the user specifies otherwise:
|
||||
|
||||
| Parameter | Default | Options |
|
||||
|---|---|---|
|
||||
| `model` | `Standard` | `Standard`, `Premium` |
|
||||
| `size` | `auto` | `auto`, `1024x1024`, `1536x1024`, `1024x1536` (pick closest to 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 the tool responds
|
||||
|
||||
Download and preview the result:
|
||||
|
||||
```bash
|
||||
# Retrieve credentials
|
||||
TARGET_ORG=$(sf config get target-org --json | jq -r '.result[0].value')
|
||||
|
||||
# Download
|
||||
mkdir -p "generatedimages"
|
||||
curl -f -H "Authorization: Bearer $ACCESS_TOKEN" "$URL" -o "generatedimages/<responseId>.<outputFormat>"
|
||||
|
||||
# Preview
|
||||
code generatedimages/<responseId>.<outputFormat>
|
||||
```
|
||||
|
||||
Use CSS (`width`, `height`, `object-fit`) to control display size. Never resize using external tools.
|
||||
|
||||
## Fallback: Placeholder
|
||||
|
||||
When `create_image` is not available, use a static placeholder instead of attempting image generation.
|
||||
|
||||
1. Check if `generatedimages/placeholder.svg` already exists.
|
||||
2. If it exists, use it — do not download again.
|
||||
3. If it does not exist, download it:
|
||||
|
||||
```bash
|
||||
mkdir -p generatedimages
|
||||
curl -f -o generatedimages/placeholder.svg "https://res.cloudinary.com/dveb6nwve/image/upload/v1775081606/placeholderFinal_l03h2n.svg"
|
||||
```
|
||||
|
||||
## Placeholder Policy
|
||||
|
||||
- Only one placeholder exists: `generatedimages/placeholder.svg`.
|
||||
- Do not generate alternative placeholders using Python, ImageMagick, or any other tool.
|
||||
- Do not create resized or reformatted versions of the placeholder.
|
||||
- If the user asks for a placeholder of a different size or format, inform them that only `placeholder.svg` is available and direct them to use CSS to scale it at the point of use.
|
||||
Loading…
Reference in New Issue
Block a user