feat: AI-powered icon finder skill + PNG-to-SVG tracing

[nomativ]

Summary

Adds a Claude Code slash command (/add-icon <project>) that automates the full icon addition workflow — from finding a project's logo on the web to creating a ready-to-merge PR with optimized SVGs, metadata, and React components.

Also includes a PNG-to-SVG tracing utility for when only raster logos are available.

What's included

• .claude/commands/add-icon.md — 13-step AI skill that:

  1. Identifies the project type (token, network, wallet, exchange)
  2. Checks if the icon already exists
  3. Finds the official logo (SVG preferred, falls back to PNG tracing)
  4. Downloads and reformats to 24x24 frame with correct sizing (max 16px mono/branded, max 14px background, centered)
  5. Places SVGs in raw-svgs/ with correct naming conventions
  6. Adds metadata to the appropriate JSON file
  7. Runs validation, builds all packages, and runs post-build
  8. Cleans up SVG path data (trailing zeros, round numbers)
  9. Generates a visual test HTML with grid overlay for sizing verification
  10. Creates commit, pushes, and opens a PR

• scripts/cli/trace-png-to-svg.ts — CLI tool for bitmap-to-vector conversion

  • Uses sharp for preprocessing + potrace for tracing
  • Supports --mono, --background, --color, --threshold, --turdsize, --turnpolicy
  • Auto-installs dependencies if missing

• Stella wallet icon — proof-of-concept test of the skill

  • Source: official SVG from lightlink.io/wallet
  • Mono and branded variants, 16.00 x 13.90px centered in 24x24 frame
  • Metadata added to wallets.json

Visual test

The test-preview.html file shows the Stella icon at multiple sizes with the repo's icon grid overlay for sizing verification.

Metadata entry

{
  "id": "stella",
  "filePath": "wallet:stella",
  "name": "Stella",
  "variants": ["branded", "mono"]
}

Checklist

• SVG dimensions: 24x24 frame, icon max 16px largest side, centered
• Naming conventions: kebab-case for wallet
• Mono variant uses fill="white"
• Branded variant preserves brand color (#6A81FF)
• Metadata inserted alphabetically
• Path data cleaned (no trailing zeros, round numbers simplified)
• Visual test with grid overlay included

🤖 Generated with Claude Code