shopify-icon-forge

An agent skill that walks you from a blank page to a production-ready Shopify app icon — discovery questions → concept ideas → clean SVG → iterative feedback → PNG export at every size the Shopify App Store, admin, and marketing surfaces need.

Install

npx skills add ratul0/shopify-icon-forge

That's it. Works with Claude Code, Cursor, Codex, OpenCode, and 40+ other agents via the skills CLI.

What it does

When you ask your agent something like "design an icon for my Shopify app StockPing", the skill takes over and runs a 5-phase conversational workflow:

1. Discovery — 3-4 short questions (app name, purpose, brand color, style). No interrogation.
2. Concept ideas — 3-4 distinct concepts with names, descriptions, and rationale. Words only — no SVG yet. Honors a built-in cliché list (no gears, no shopping carts, no circular arrows for reorder apps).
3. SVG generation — once you pick a concept, it emits a clean inline SVG (viewBox="0 0 200 200", no embedded fonts, clean paths).
4. Feedback loop — iterate on the SVG. Every version is numbered (v1, v2, v3…) and re-rendered in full.
5. Export — when you approve, it runs a bundled Node.js script (using sharp) to generate the full icon size set:
   • shopify-listing-1200.png (1200×1200, transparent) — App Store listing
   • favicon-32.png / favicon-64.png — Shopify admin favicon
   • social-1200x630.png — OG / Twitter card with icon centered on your brand color
   • app-store-512.png / app-store-1024.png — iOS/Android-style previews

All output files land in ./icon-exports/ in your working directory.

Example

You: I'm building a Shopify app called StockPing. It sends back-in-stock
     alerts to merchants. Brand color #E66B2E. Minimal geometric style.

Agent: Got it — StockPing, back-in-stock alerts, #E66B2E, minimal geometric.

       Here are four directions:

       1. Pulse Dot — A single filled dot with a thin concentric ring,
          slightly offset. Nods at the "ping" signal without being literal.
       2. Notch Mark — A solid rounded square with a clean triangular notch
          cut from one edge. Reads as "something missing → filled".
       3. Arrow Flag — A minimal pennant shape angled upward.
          Restock/return-to-shelf metaphor, not a literal arrow.
       4. Step Tower — Three stacked bars of increasing height.
          Inventory climbing back up.

       Which direction?

You: 1 looks great.

Agent: [emits SVG inline]
       **v1** — Pulse Dot with a 12% offset ring. What would you change?

You: Perfect, ship it.

Agent: [saves icon-final.svg, runs export script, returns 6 PNGs]
       Done — 6 files in ./icon-exports/.

Skill structure

skills/shopify-icon-forge/
├── SKILL.md                          # The workflow — this is what the agent reads
├── scripts/
│   └── export-icon.mjs               # Node.js + sharp, called during Phase 5
├── references/
│   └── icon-design-principles.md     # Deeper checklist, loaded on demand
└── evals/
    ├── evals.json                    # 4 test cases for phases 1-3
    └── phase5_test.sh                # Standalone bash test for the export script

Requirements

• Node ≥ 18 — the export script uses modern ESM + top-level await
• sharp — will be auto-installed on first Phase 5 export if missing. If your project already has sharp, the skill uses that.

Verify it works

After installing, run the standalone export test:

bash ~/.claude/skills/shopify-icon-forge/evals/phase5_test.sh

You should see 7 PASS: lines and phase5_test: OK. This generates a sample icon and verifies all 6 PNG outputs exist at the correct dimensions with an opaque brand-color background on the social card.

How it was built

This skill was developed using the skill-creator workflow: draft → evals → run in subagents → review → iterate. Three iterations, 26 assertions across 4 test cases, final score 95.8% with-skill vs 65.4% baseline (+30pp lift). Full iteration history is in the repo's git log.

The evals include a deliberate "reject-then-abstract" multi-turn case to verify the skill handles rejection feedback gracefully without locking into early concepts.

License

MIT — see LICENSE.

Contributing

PRs welcome, especially for:

• New cliché additions to the references list (post an example of the cliché in the wild)
• Export format additions (e.g., Shopify Plus custom sizes, Chrome extension icons)
• Additional eval test cases

If you build a similar skill for other app ecosystems (iOS, Android, Chrome Web Store), open an issue — I'd love to link to it.