app-icon · melvynx — Claude Code skill: what it does, how to install
Generates dimensional iOS and Android app icons for Expo projects and crops them to store requirements.
npx skills add Melvynx/aiblueprint --skill app-icon -a claude-codeWhat app-icon does
This skill reads your Expo configuration and creates a 3D-styled app icon using Codex image_gen or gemini-cli. If no image tool is connected, it gives you the prompt and resumes processing once you supply the image file. Brand concept and colors come straight from the repository, with color names instead of hex codes.
Post-processing relies on sips and magick command-line tools. The skill exports a 1024×1024 icon.png without transparency for iOS, centers the subject within the ~66% safe zone for Android's adaptive-icon.png, and creates a 192×192 web favicon.png.
You need sips and magick installed locally to strip alpha channels and fit the adaptive bounds cleanly. Seeing the updated icon requires a native rebuild with npx expo run:ios or npx expo run:android, because the bundle cache keeps the old assets otherwise.
What it helps with
- generate a dimensional app icon from project branding
- produce store-ready iOS icon.png and Android adaptive-icon.png
- strip alpha transparency and enforce Android safe area margins
- create a matching favicon.png for Expo web
Example prompts for the agent
- Generate an app icon for this Expo project using our brand colors
- Create a 3D mascot app icon and set up the adaptive icon files
- Refresh our app icon and prepare assets for iOS and Android stores
How to install app-icon
1Skills CLI (Vercel)
npx skills add Melvynx/aiblueprint --skill app-icon -a claude-code2Manually: put the files in place
~/.claude/skills/app-icon/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/app-icon/
1Skills CLI (Vercel)
npx skills add Melvynx/aiblueprint --skill app-icon -a codex2Manually: put the files in place
.agents/skills/app-icon/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Melvynx/aiblueprint --skill app-icon -a cursor2Manually: put the files in place
.cursor/skills/app-icon/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Melvynx/aiblueprint app-icon2Manually: put the files in place
.github/skills/app-icon/SKILL.md1Skills CLI (Vercel)
npx skills add Melvynx/aiblueprint --skill app-icon -a gemini-cli2Platform CLI
gemini skills install https://github.com/Melvynx/aiblueprint --path agents-config/skills/app-iconManually: put the files in place
.devin/skills/app-icon/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Melvynx/aiblueprint --skill app-icon -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about app-icon
How to install app-icon in Claude Code?
Run npx skills add Melvynx/aiblueprint --skill app-icon -a claude-code in your terminal. This registers the skill for Claude Code.
What does the app-icon skill do?
It designs a dimensional icon using connected AI image tools and automatically renders the final assets for iOS, Android, and web into your Expo project.
What command-line utilities are required?
It uses sips and ImageMagick's magick to crop and remove alpha channels. If magick is missing, the skill asks for regeneration with ~20% safe zone padding.
Similar skills
Everything for Design →app-icon by other authors comes first.
