[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FCSW105229SMFZAXY8EJ86":3,"skill-same:01M6FCSW105229SMFZAXY8EJ86":53},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M6FCSW105229SMFZAXY8EJ86","icon-generation",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmichaelboeding\u002Fskills\u002Ficon-generation\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[23,24,25],"generation","icon","icon generation","2026-11-10 10:12:30",false,"# Icon Generation Skill\n\nGenerate professional app icons with transparent backgrounds using AI (Google Gemini).\n\n**Output:** Square PNG with transparent background - ready for app stores, favicons, or UI.\n\n## Quick Examples\n\n| User Says | What Happens |\n|-----------|--------------|\n| \"Create an icon for a music app\" | Generates square PNG with transparent background |\n| \"Make a settings gear icon, flat style\" | Flat design icon with clean lines |\n| \"Generate a 3D shopping cart icon\" | 3D-style icon with depth and shadows |\n| \"I need a favicon for my blog\" | Small icon optimized for web |\n| \"Create icon set: home, search, profile\" | Batch generates multiple icons |\n| \"Make icons matching this style\" + image | Uses reference image to match style |\n| \"Generate more icons like this one\" | Creates consistent icon set from reference |\n\n## Prerequisites\n\n- `GOOGLE_API_KEY` - Required for Google Gemini image generation\n  - Get your key at: https:\u002F\u002Faistudio.google.com\u002Fapikey\n\n## Icon Styles\n\n| Style | Description | Best For |\n|-------|-------------|----------|\n| **flat** | Modern flat design, solid colors, minimal shadows | iOS, Material Design, web |\n| **3d** | Depth, gradients, realistic shadows | macOS, premium apps |\n| **line** | Outline only, thin strokes | Minimalist UI, toolbars |\n| **glyph** | Solid filled shape, single color | System icons, tab bars |\n| **gradient** | Smooth color transitions | Modern app icons |\n| **minimal** | Ultra-simple, essential shapes only | Professional, clean UI |\n\n## Workflow\n\n### Step 1: Gather Requirements (REQUIRED)\n\nUse the `AskUserQuestion` tool for each question. Ask ONE question at a time.\n\n**Q1: Icon Concept**\n> \"What should this icon represent?\n>\n> Examples: settings gear, shopping cart, user profile, home, music note, camera\"\n\n*Wait for response.*\n\n**Q2: Style**\n> \"What **style**?\n>\n> - Flat (modern, solid colors)\n> - 3D (depth, shadows)\n> - Line (outline only)\n> - Glyph (solid filled shape)\n> - Gradient (color transitions)\n> - Minimal (ultra-simple)\"\n\n*Wait for response.*\n\n**Q3: Size**\n> \"What **size**? (can generate multiple)\n>\n> - 1024px (App Store, high-res)\n> - 512px (Android, web)\n> - 256px (desktop apps)\n> - 128px (favicons, small UI)\n> - All common sizes\"\n\n*Wait for response.*\n\n**Q4: Reference Image (Optional but important for icon sets)**\n> \"Do you have a **reference image** to match the style?\n>\n> - Yes, I have an existing icon to match\n> - No, generate fresh style\"\n\n*If yes, ask for the image path. Wait for response.*\n\n**Q5: Colors (Optional)**\n> \"Any **color preferences**?\n>\n> - Let AI choose based on concept\n> - Specific colors (e.g., blue and white)\n> - Monochrome (single color + transparency)\n> - Match brand colors\"\n\n*Wait for response.*\n\n**Q6: Output Format**\n> \"What **file format**?\n>\n> - PNG (transparency, recommended)\n> - JPEG (smaller file, no transparency)\n> - WebP (modern format, good compression)\"\n\n*Wait for response.*\n\n**Q7: Background Removal Method (for PNG\u002FWebP)**\n> \"How should we remove the background?\n>\n> - Built-in (fast, may have minor artifacts)\n> - Rembg (AI-based, high quality, runs locally)\n> - None (keep white background from generation)\"\n\n*Wait for response.*\n\n### Step 2: Craft the Prompt\n\nTransform user request into an icon-specific prompt:\n\n**Template:**\n```\nA [STYLE] style icon of [CONCEPT] on a transparent background.\nSquare format, centered, clean edges, suitable for app icon.\n[COLOR PREFERENCES]. Simple, recognizable, professional.\n```\n\n**Example transformations:**\n- User: \"music app icon\"\n- Enhanced: \"A flat style icon of a musical note on a transparent background. Square format, centered, clean edges, suitable for app icon. Vibrant purple and pink gradient. Simple, recognizable, professional design with modern aesthetic.\"\n\n- User: \"settings gear, minimal\"\n- Enhanced: \"A minimal style icon of a settings gear on a transparent background. Square format, centered, clean edges. Monochrome gray. Ultra-simple design, essential shapes only, no extra details.\"\n\n### Step 3: Generate the Icon\n\nExecute the script:\n\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  --prompt \"your enhanced prompt\" \\\n  --style \"flat\" \\\n  --size 1024 \\\n  --output \"\u002Fpath\u002Fto\u002Ficon.png\"\n```\n\n**With multiple sizes:**\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  --prompt \"your enhanced prompt\" \\\n  --style \"flat\" \\\n  --size 1024 512 256 128 \\\n  --output \"\u002Fpath\u002Fto\u002Ficon\"\n```\nThis generates: `icon_1024.png`, `icon_512.png`, `icon_256.png`, `icon_128.png`\n\n**Batch generation (multiple icons):**\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  --batch '[\"home\", \"search\", \"profile\", \"settings\"]' \\\n  --style \"flat\" \\\n  --size 512 \\\n  --output \"\u002Fpath\u002Fto\u002Ficons\"\n```\nThis generates: `home_512.png`, `search_512.png`, `profile_512.png`, `settings_512.png`\n\n### Step 4: Deliver the Result\n\n1. Show the generated icon(s) to the user\n2. Provide the prompt used\n3. Offer to:\n   - Generate different sizes\n   - Try a different style\n   - Create variations\n   - Generate as ICO (favicon format)\n\n## Script Parameters\n\n| Parameter | Short | Description | Default |\n|-----------|-------|-------------|---------|\n| `--prompt` | `-p` | Icon description | Required |\n| `--style` | `-s` | Icon style preset | flat |\n| `--size` | `-z` | Size(s) in pixels | 512 (or auto from reference) |\n| `--format` | `-f` | Output format (png, jpeg, webp) | png |\n| `--bg-removal` | `--bg` | Background removal method (builtin, rembg, none) | builtin |\n| `--output` | `-o` | Output path | auto-generated |\n| `--batch` | `-b` | JSON array of concepts | None |\n| `--colors` | `-c` | Color preferences | AI choice |\n| `--reference` | `-r` | Reference image(s) for style matching | None |\n\n## Background Removal Methods\n\nThis skill uses the **background-remove** skill for transparent background generation.\n\n| Method | Description | Best For |\n|--------|-------------|----------|\n| **builtin** | Fast white-to-transparent conversion | Quick iterations, most icons |\n| **rembg** | AI-based removal using U2-Net model | High-quality results, complex backgrounds |\n| **none** | Keeps the white background as-is | JPEG output, manual post-processing |\n\n### Requirements\n\nSee the [background-remove skill](..\u002Fbackground-remove\u002FSKILL.md) for installation instructions.\n\n```bash\n# Install rembg for AI-based background removal\npip install rembg\n\n# Or with GPU acceleration (requires CUDA)\npip install rembg[gpu]\n```\n\n## Style Prompt Modifiers\n\nThe script automatically adds these style-specific prompt modifiers:\n\n| Style | Modifier Added |\n|-------|----------------|\n| flat | \"flat design, solid colors, no gradients, minimal shadows, clean vector style\" |\n| 3d | \"3D style, depth, soft shadows, subtle gradients, professional rendering\" |\n| line | \"line art, outline only, thin consistent strokes, no fill, minimalist\" |\n| glyph | \"solid filled shape, single color, bold silhouette, high contrast\" |\n| gradient | \"smooth gradient colors, modern vibrant transitions, glossy finish\" |\n| minimal | \"ultra-minimal, essential shapes only, maximum simplicity, geometric\" |\n\n## Common Icon Sizes\n\n| Size | Use Case |\n|------|----------|\n| 1024px | iOS App Store, high-resolution displays |\n| 512px | Android Play Store, macOS apps |\n| 256px | Windows apps, desktop shortcuts |\n| 192px | Android launcher icons |\n| 180px | iOS home screen |\n| 128px | Favicons (high-res), small UI |\n| 64px | Toolbar icons |\n| 32px | Standard favicon |\n| 16px | Smallest favicon |\n\n## Error Handling\n\n**Missing API key:**\n```\nError: GOOGLE_API_KEY not set. Get your key at https:\u002F\u002Faistudio.google.com\u002Fapikey\n```\n\n**Generation failed:**\n- Retry with simpler prompt\n- Check if concept is clear and recognizable\n- Ensure style is appropriate for the concept\n\n**Non-transparent output:**\n- The script explicitly requests transparent background\n- If still not transparent, try adding \"isolated on transparent\" to prompt\n- For complex concepts, results may vary\n\n## Reference Image Support\n\nUse reference images to create consistent icon sets. When you provide a reference, the AI will match:\n- Visual style and design language\n- Line weight and stroke thickness\n- Color palette and shading\n- Level of detail and complexity\n- Overall proportions and spacing\n\n### When to Use Reference Images\n\n| Scenario | Use Reference? |\n|----------|----------------|\n| Creating multiple icons for same app | Yes - ensures consistency |\n| Matching existing brand icons | Yes - maintains brand identity |\n| Adding to existing icon set | Yes - blends seamlessly |\n| Single standalone icon | Optional - fresh style is fine |\n| Exploring different styles | No - let AI be creative |\n\n### Reference Image Examples\n\n**Single icon matching existing style:**\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -p \"settings gear\" \\\n  -r \u002Fpath\u002Fto\u002Fexisting_icon.png \\\n  -z 512\n```\n\n**Icon set with consistent style:**\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -b '[\"home\", \"search\", \"profile\", \"settings\", \"notifications\"]' \\\n  -r \u002Fpath\u002Fto\u002Fbrand_icon.png \\\n  -z 512 \\\n  -o \"app_icons\"\n```\n\n**Multiple reference images (up to 14):**\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -p \"calendar\" \\\n  -r \u002Fpath\u002Fto\u002Ficon1.png \\\n  -r \u002Fpath\u002Fto\u002Ficon2.png \\\n  -z 512\n```\n\n## Tips for Best Results\n\n1. **Be specific about the concept**: \"shopping cart\" is better than \"e-commerce\"\n2. **Match style to platform**: Flat for iOS\u002FAndroid, 3D for macOS\n3. **Keep it simple**: Icons should be recognizable at small sizes\n4. **Test at small sizes**: Generate 32px to ensure readability\n5. **Use consistent style**: For icon sets, use same style for all icons\n6. **Use reference images**: For icon sets, always use a reference to ensure consistency\n\n## Examples\n\n### App Icon\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -p \"camera with colorful lens\" \\\n  -s gradient \\\n  -z 1024 512 256 \\\n  -o \"camera_icon\"\n```\n\n### Favicon\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -p \"letter B for blog\" \\\n  -s minimal \\\n  -z 128 32 16 \\\n  -o \"favicon\"\n```\n\n### Icon Set\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -b '[\"home\", \"search\", \"notifications\", \"profile\", \"settings\"]' \\\n  -s flat \\\n  -z 512 \\\n  -o \"app_icons\"\n```\n\n### High-Quality Background Removal (Rembg)\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -p \"detailed gear with shadows\" \\\n  -s 3d \\\n  -z 512 \\\n  --bg rembg \\\n  -o \"gear_icon\"\n```\n\n### WebP Format with Built-in Background Removal\n```bash\npython3 ${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Ficon-generation\u002Fscripts\u002Ficon_generator.py \\\n  -p \"lightning bolt\" \\\n  -s gradient \\\n  -z 512 \\\n  -f webp \\\n  -o \"bolt_icon\"\n```\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fmichaelboeding\u002Fskills\u002Ficon-generation",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill icon-generation",{"tool":45,"command":46},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill icon-generation",{"tool":48,"command":49},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill icon-generation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fmichaelboeding\u002Fskills\u002Ficon-generation\u002FSKILL.md",true,[],[54,64,74,83,89,96],{"skillNo":55,"name":56,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":60,"publishedAt":26},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[59],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[61,62,63],"model","model hierarchy","model hierarchy skill",{"skillNo":65,"name":66,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":70,"publishedAt":26},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[69],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[71,72,73],"MCP","zoom","zoom mcp",{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":26},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[80,81,82,72],"sdk","zoom apps sdk","apps",{"skillNo":84,"name":85,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":26},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[85],{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":95,"publishedAt":26},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[94],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[91],{"skillNo":97,"name":98,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":26},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[98]]