wiro-image-fill
Generate missing or placeholder images in a project by calling the Wiro image generation API, saving assets under public/assets generated folders, and producing a JSON mapping. Use when you see empty img src, placeholder.png, or other image gaps that need real assets.
Best use case
wiro-image-fill is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generate missing or placeholder images in a project by calling the Wiro image generation API, saving assets under public/assets generated folders, and producing a JSON mapping. Use when you see empty img src, placeholder.png, or other image gaps that need real assets.
Teams using wiro-image-fill should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/wiro-image-fill/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How wiro-image-fill Compares
| Feature / Agent | wiro-image-fill | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Generate missing or placeholder images in a project by calling the Wiro image generation API, saving assets under public/assets generated folders, and producing a JSON mapping. Use when you see empty img src, placeholder.png, or other image gaps that need real assets.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Wiro Image Fill ## Overview Generate real images via Wiro and write a mapping from placeholder keys to generated asset paths for later replacement. ## How-to (quick start) 1. Get API credentials from Wiro dashboard for the target project. 2. Provide credentials using one of the options below. 3. Run the generator script with a prompt. 4. Use the mapping output to update image references. Option A: export environment variables in the shell session. ```bash export WIRO_API_KEY="your_project_api_key" export WIRO_API_SECRET="your_project_api_secret" ``` Option B: create a `.env` file in the project root (user creates this file). ```bash WIRO_API_KEY=your_project_api_key WIRO_API_SECRET=your_project_api_secret ``` If `.env` does not exist, the script creates it with placeholder `WIRO_API_KEY` and `WIRO_API_SECRET` lines. The script reads `.env` by default if it exists. Use `--env-file path/to/.env` to point to a different file. ## Workflow 1. Locate missing images. 2. Draft a prompt from nearby UI context. 3. Run the generator script. 4. Use the mapping to update image references. ## 1) Locate missing images Use ripgrep to find placeholders: ```bash rg -n "src=\"\"|src=''|placeholder\.png" <project-root> ``` Capture the placeholder key you will map (the literal placeholder string or path). ## 2) Draft a prompt Use nearby UI copy, alt text, component names, and page intent. Keep the prompt short and specific to the UI need. ## 3) Run the generator script Set credentials: ```bash export WIRO_API_KEY="..." export WIRO_API_SECRET="..." ``` Run per placeholder: ```bash python3 scripts/wiro_generate_image.py \ --model "google/nano-banana-pro" \ --prompt "Modern dashboard hero showing analytics cards on a clean desk." \ --map-key "placeholder.png" ``` Notes: - Default output dir: `public/generated` if `public/` exists, else `assets/generated`, else `generated/`. - Mapping file default: `<output-dir>/image-map.json`. - Use `--output-dir` or `--mapping-file` to override. - `--input-image` can be repeated or comma-separated. - `--body-mode multipart` (default) sends multipart form fields; use `--body-mode json` if needed. - IPv4 is preferred by default to avoid IPv6 delays. Use `--ip-mode auto` to disable IPv4 forcing. - Timeouts: `--connect-timeout` (default 5s), `--read-timeout` (default 30s), `--task-timeout` (default 180s). - `--verbose` prints run/poll progress to stderr; helpful for diagnosing stalls. - Network retries use `--request-retries` (default 2) and `--retry-wait` (default 1s backoff). ## 4) Apply the mapping Use the JSON mapping file to replace placeholders in code or templates. The script only writes the mapping entry when `--map-key` is provided. ## References Read `references/wiro_api.md` for endpoint and status details. ## Scripts - `scripts/wiro_generate_image.py`: Run Wiro generation, poll task status, download output, and update mapping.
Related Skills
all-images-ai-automation
Automate All Images AI tasks via Rube MCP (Composio). Always search tools first for current schemas.
ai-image-generator
使用 ModelScope 等平台生成 AI 图像。当用户需要生成图像、设计图标、创建角色立绘,或需要帮助编写 AI 绘画提示词时使用此技能。支持直接生成图像和仅优化提示词两种模式。
xhs-images
Xiaohongshu (Little Red Book) infographic series generator with multiple style options. Breaks down content into 1-10 cartoon-style infographics. Use when user asks to create "小红书图片", "XHS images", or "RedNote infographics".
x-image-cards
Create X/Twitter cards that look like images, not marketing banners. Use when asked to "create OG images", "set up X cards", "make social cards", or "twitter card without text".
seedream-image-generator
Generate images using the Doubao SeeDream API based on text prompts. Use this skill when users request AI-generated images, artwork, illustrations, or visual content creation. The skill handles API calls, downloads generated images to the project's /pic folder, and supports batch generation of up to 4 sequential images.
placeholder-images
Rule to use placekitten.com for placeholder images in seed data.
og-image-generator
Generate and optimize Open Graph meta images for social media sharing. Use this skill when building web applications that need dynamic OG image generation with support for Vercel's @vercel/og library, pre-generated image storage, and social media optimization (Twitter Cards, Facebook, LinkedIn). Handles dynamic routes, performance optimization, and includes best practices for crawler compatibility and testing.
nanobanana-image
Nano Banana (Google Gemini API) を使って画像を生成・編集するスキル。「画像を生成して」「イラストを作って」「○○の絵を描いて」「画像を作成」「この画像を編集して」「この画像をもとに○○を作って」「generate an image」「create a picture」「edit this image」などの依頼があった場合に使用。テキストからの生成、参照画像からの生成、画像編集、Google検索グラウンディングによる最新情報を反映した画像生成に対応。「最新の○○」「トレンドを反映」「リアルタイム情報」といった依頼にも対応可能。
nano-image-generate
Generate images using Nano Banana (Flash) or Nano Banana Pro. Use 'flash' for speed/efficiency and 'pro' for high quality, text rendering, and complex prompt adherence. Triggers include 'generate image', 'create logo', 'fast image', 'high quality image'.
imagen
AI image generation skill powered by Google Gemini, enabling seamless visual content creation for UI placeholders, documentation, and design assets.
imagekit-io-automation
Automate Imagekit IO tasks via Rube MCP (Composio). Always search tools first for current schemas.
imagegen-gemini
Generate/edit images via Gemini API (Nano Banana). Triggers: generate image, create picture, AI art, edit image, make illustration.