# Extension Assets

> Generate and manage all Chrome extension assets: icons (16–128px), CWS listing images, promotional tiles, and public/ folder setup. Supports ImageMagick, Gemini API, and manual prompt templates.

- **Type:** Skill
- **Install:** `agentstack add skill-quangpl-browser-extension-skills-extension-assets`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [quangpl](https://agentstack.voostack.com/s/quangpl)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [quangpl](https://github.com/quangpl)
- **Source:** https://github.com/quangpl/browser-extension-skills/tree/main/skills/extension-assets

## Install

```sh
agentstack add skill-quangpl-browser-extension-skills-extension-assets
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Extension Assets (Icon & Image Generator)

Generate all required icons and assets for a Chrome extension and CWS listing. Do NOT just explain — execute the workflow.

## Assets Checklist

### Extension Icons (required)
| File | Size | Usage |
|------|------|-------|
| `icon16.png` | 16x16 | Favicon, context menus |
| `icon32.png` | 32x32 | Windows taskbar |
| `icon48.png` | 48x48 | Extensions management page |
| `icon128.png` | 128x128 | Installation dialog, CWS store icon |

### Action Icons (toolbar)
| File | Size |
|------|------|
| `action16.png` | 16x16 |
| `action24.png` | 24x24 |
| `action32.png` | 32x32 |

### CWS Listing Assets
| Asset | Size | Required? |
|-------|------|-----------|
| Screenshots | 1280x800 or 640x400 | Yes (1–5) |
| Small promo tile | 440x280 | For featured placement |
| Large promo tile | 920x680 | Optional |
| Marquee promo tile | 1400x560 | Optional |

## Workflow (Execute This)

### Step 1: Generate or locate source icon

Ask user: "Do you have a source logo? (SVG or PNG, min 512x512)"

**If no source — generate SVG directly:**
Create a clean, professional SVG icon. Design should be:
- Simple geometric shapes (recognizable at 16x16)
- Flat design, no gradients (clean at all sizes)
- Natural, hand-crafted look (NOT AI-generated style)
- 2-3 colors max, bold contrast

Save as `icon.svg` in project root.

### Step 2: Convert SVG → PNG (Node.js script)

```bash
npm install -D sharp
node scripts/generate-icons.js
```

See `references/icon-converter-script.md` for the full Node.js script using **sharp**.

**Fallback (ImageMagick):**
```bash
for size in 16 32 48 128; do
  convert -background none -resize ${size}x${size} icon.svg "public/icons/icon${size}.png"
done
```

### Step 3: Generate placeholder CWS assets

```bash
# Screenshot placeholder (1280x800)
convert -size 1280x800 xc:"#f8f9fa" \
  -font DejaVu-Sans -pointsize 48 -fill "#6c757d" \
  -gravity center -annotate 0 "Screenshot Placeholder\n1280x800" \
  public/store/screenshot1.png

# Small promo tile (440x280)
convert -size 440x280 xc:"#4285f4" \
  -font DejaVu-Sans -pointsize 32 -fill white \
  -gravity center -annotate 0 "Extension Name\nChrome Web Store" \
  public/store/promo-small.png
```

### Step 4: Gemini API generation (optional)

Check for API key:
```bash
echo $GEMINI_API_KEY
```

If set, use `ai-multimodal` skill or call Gemini API directly. See `references/image-generation-prompts.md` for prompt templates.

If not set, output prompts from `references/image-generation-prompts.md` for user to generate manually.

### Step 5: Set up public/ folder

Follow structure in `references/public-folder-setup.md`. Verify manifest.json icon paths match.

### Step 6: Validate assets

```bash
# Check all required icons exist and are correct size
for size in 16 32 48 128; do
  identify public/icons/icon${size}.png | grep "${size}x${size}" \
    && echo "icon${size}.png OK" || echo "icon${size}.png MISSING/WRONG SIZE"
done
```

## Output Format

```
## Assets Generation Report: 

### Generated Icons
- icon16.png ✓ | icon32.png ✓ | icon48.png ✓ | icon128.png ✓
- action16.png ✓ | action24.png ✓ | action32.png ✓

### CWS Listing Assets
- screenshot1.png (1280x800) ✓
- promo-small.png (440x280) ✓

### Pending (manual generation needed)
- Large promo tile (920x680) — prompt provided below
- Screenshots with real extension UI

### Prompts for Manual Generation

```

## References

- `references/icon-requirements.md` — Icon specs, manifest config, design guidelines
- `references/icon-converter-script.md` — Node.js script (sharp) to convert SVG → multi-size PNG
- `references/store-listing-assets.md` — CWS listing requirements and best practices
- `references/image-generation-prompts.md` — AI prompt templates, Gemini API setup
- `references/public-folder-setup.md` — public/ folder structure and manifest paths
- [Chrome Extension Icons](https://developer.chrome.com/docs/extensions/reference/api/action#icon)
- [CWS Best Listing](https://developer.chrome.com/docs/webstore/best-listing)

## Related Skills

- `extension-create` — Scaffold new extension with public/ folder
- `extension-manifest` — Generate/validate manifest.json icon paths
- `extension-publish` — Store submission checklist

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [quangpl](https://github.com/quangpl)
- **Source:** [quangpl/browser-extension-skills](https://github.com/quangpl/browser-extension-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-quangpl-browser-extension-skills-extension-assets
- Seller: https://agentstack.voostack.com/s/quangpl
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.