illyism/dev-skills/extension-store-assets

Extension store assets

Three-phase workflow for extension branding + Chrome Web Store listing. Self-contained script uses OpenRouter gpt-image-2 directly (no blog-image-generator dependency).

Phases

Do not skip phase 1. Do not generate literal UI screenshots for store slides — use promotional concept slides that explain benefits.

Setup

1. Copy brand.config.example.json → {outputDir}/brand.config.json
2. Fill in product name, brand prompt prefix, colors, concept prompts, store slide prompts
3. Run from repo root with env loaded

Commands

set -a && source .env && set +a && bun .cursor/skills/extension-store-assets/scripts/generate.ts --config=public/store-assets/brand.config.json --phase=concepts
 
set -a && source .env && set +a && bun .cursor/skills/extension-store-assets/scripts/generate.ts --config=public/store-assets/brand.config.json --phase=brand-guide
 
set -a && source .env && set +a && bun .cursor/skills/extension-store-assets/scripts/generate.ts --config=public/store-assets/brand.config.json --phase=store
 
set -a && source .env && set +a && bun .cursor/skills/extension-store-assets/scripts/generate.ts --config=public/store-assets/brand.config.json --phase=store --screenshots-only

After phase 1, user picks a concept → set iconFile in config to that filename → delete other concepts → run phase 2 and 3.

Store asset rules

See sizes.md for exact dimensions.

Promo tiles — generate at closest aspect ratio, fit: cover to exact size.

Store screenshots (1280×800) — promotional benefit slides, NOT fake browser/extension UI mocks. Generate at 16:9, scale with fit: cover to exact size (full bleed). Set paddingPercent: 0 in config (default).

What makes slides look store-ready (see public/store-assets/store/):

• Background color/texture fills all four edges — no letterbox margin
• Decorative elements (glows, class pills, footer bars) bleed off canvas edges
• Content uses multi-column editorial layout that fills the frame — not a small centered island
• Concrete UI widgets with sample data (class names, code snippets, button states) — not abstract icon rows alone
• Contrasting card pairs (before vs after, format A vs format B)
• Bottom footer bar or three-icon feature row anchors the composition

See prompts.md for per-slide composition templates.

Listing copy — write store/product-details.md using product-details-template.md. Short description ≤132 chars.

Prompt patterns

See prompts.md.

Concept icons: distinct visual worlds — not literal clipboard/marquee dev-tool clichés unless requested. Fun, beautiful, readable at 16px.

Brand guide: 16:9 cheat sheet — palette, typography, UI components, icon usage. Use picked icon as input_reference.

Store slides (5 max): hero value prop → how it works → key benefit → feature depth → format/compare. Concept illustration only.

Do not

• Edit lib/blog-image-generator/generate.ts
• Use blog _references/ style refs (raw prompts only)
• Generate literal screenshots for Chrome store slides
• Letterbox 1280×800 slides unless paddingPercent > 0 is explicitly set
• Center small content on a large empty background — use multi-column layouts that fill the frame
• Abstract icon-only slides with no sample data or UI widgets
• Skip visual review before shipping

Paths

Worked example

A fictional tab-grouping extension in public/store-assets/: deep navy + amber, stacked-cards metaphor. Store slides: store/screenshot-01-hero through screenshot-05-formats.