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.

16 stars

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

$curl -o ~/.claude/skills/wiro-image-fill/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/content-media/wiro-image-fill/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/wiro-image-fill/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How wiro-image-fill Compares

Feature / Agentwiro-image-fillStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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

16
from diegosouzapw/awesome-omni-skill

Automate All Images AI tasks via Rube MCP (Composio). Always search tools first for current schemas.

ai-image-generator

16
from diegosouzapw/awesome-omni-skill

使用 ModelScope 等平台生成 AI 图像。当用户需要生成图像、设计图标、创建角色立绘,或需要帮助编写 AI 绘画提示词时使用此技能。支持直接生成图像和仅优化提示词两种模式。

xhs-images

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

Rule to use placekitten.com for placeholder images in seed data.

og-image-generator

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

Nano Banana (Google Gemini API) を使って画像を生成・編集するスキル。「画像を生成して」「イラストを作って」「○○の絵を描いて」「画像を作成」「この画像を編集して」「この画像をもとに○○を作って」「generate an image」「create a picture」「edit this image」などの依頼があった場合に使用。テキストからの生成、参照画像からの生成、画像編集、Google検索グラウンディングによる最新情報を反映した画像生成に対応。「最新の○○」「トレンドを反映」「リアルタイム情報」といった依頼にも対応可能。

nano-image-generate

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

AI image generation skill powered by Google Gemini, enabling seamless visual content creation for UI placeholders, documentation, and design assets.

imagekit-io-automation

16
from diegosouzapw/awesome-omni-skill

Automate Imagekit IO tasks via Rube MCP (Composio). Always search tools first for current schemas.

imagegen-gemini

16
from diegosouzapw/awesome-omni-skill

Generate/edit images via Gemini API (Nano Banana). Triggers: generate image, create picture, AI art, edit image, make illustration.