Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/melvynx/aiblueprint --skill app-icon- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads app-icon automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Generate the icon yourself with any reachable image tool. Codex: image_gen. If gemini-cli is available, use it (gemini-cli auth set <GOOGLE_API_KEY> if unauthenticated). Do not hand the prompt back when a tool can run. Do not fake it with SVG-to-PNG. If no tool exists, give the filled prompt to the user and resume post-processing with their file.
Read the Expo config and write to its real paths: expo.icon, expo.android.adaptiveIcon.foregroundImage, expo.android.adaptiveIcon.backgroundColor, expo.web.favicon. Pull brand colors and the app concept from the project. Use color names in the prompt, never hex.
Targets: iOS <ASSETS>/icon.png 1024×1024, no transparency, no baked rounded mask. Android <ASSETS>/adaptive-icon.png with the subject inside the central ~66% safe circle. Web <ASSETS>/favicon.png 192×192.
Send this as one prompt, filling Subject and Color palette:
Create a 1024x1024 square app icon — premium, vibrant and dimensional, in the style of top App Store featured apps.
Subject: <single hero for <AppName> — soft 3D mascot with simple dot eyes, OR a bold symbolic object; readable at small sizes>
Look: one glossy 3D/2.5D hero, studio lighting, rim light, subtle glow, centered on a FULL-BLEED branded background that reaches all four edges.
Composition: hero fills ~60-80%; one focal point; sharp 90° corners; critical detail inside the central ~70%.
Do NOT: flat pictogram, black-on-white glyph, line icon, white/empty background, icon-in-icon, baked rounded corners, text, letters, faces, logos, chrome, neon, flares.
Color palette: <brand color names>. Technical: square 1:1; readable at 60px.
Pick mascot for consumer, social, wellness, or AI; symbol or object for finance, productivity, or utilities.
gemini-cli image generate --prompt "$PROMPT" \
--model gemini-3-pro-image-preview --aspect-ratio 1:1 --image-size 2K \
--out ./icon-raw.png --images-only --json
gemini-2.5-flash-image is the cheaper fallback. Reject flat, monochrome, SVG-like, white-background, or mushy-at-64px output and regenerate. Reword safety-filter rejects into one plain paragraph.
sips -z 1126 1126 icon-raw.png --out /tmp/icon-up.png
sips -c 1024 1024 /tmp/icon-up.png --out /tmp/icon-fullbleed.png
sips -s format png /tmp/icon-fullbleed.png --out <ASSETS>/icon.png
sips -g hasAlpha <ASSETS>/icon.png
magick <ASSETS>/icon.png -resize 66% -background "<brand-bg-color>" -gravity center -extent 1024x1024 <ASSETS>/adaptive-icon.png
sips -z 192 192 <ASSETS>/icon.png --out <ASSETS>/favicon.png
Skip the scale-up crop if the background already bleeds to sharp corners. If hasAlpha is yes: magick in.png -background "<brand-bg-color>" -alpha remove -alpha off <ASSETS>/icon.png. Match expo.android.adaptiveIcon.backgroundColor to that color. Without magick, regenerate with "~20% padding for the Android adaptive safe zone".
Icon and adaptive-icon changes need a native rebuild (npx expo run:ios or npx expo run:android). Fail the run if the home screen still shows the old art, a flat glyph, or a corner halo.
FAQ
What does the app-icon skill do?
Generate a vibrant dimensional iOS and Android app icon, then post-process it for store specs. Use for creating, regenerating, or polishing an Expo or React Native app logo or launcher icon.
How do I install app-icon?
Run npx skills add https://github.com/melvynx/aiblueprint --skill app-icon in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/app-icon/ (personal) or .claude/skills/app-icon/ (project).
Which AI agents can use app-icon?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is app-icon safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains app-icon?
It is published by melvynx in melvynx/aiblueprint. It has 398 recorded installs.
More from melvynx/aiblueprint
apex
melvynx/aiblueprint
Run adaptive APEX implementation with scoped delegation, durable checkpoints, risk-based tests and review, and proof-backed verification. Use for features, bug fixes, migrations, or code changes requiring disciplined execution.
claude-memory
melvynx/aiblueprint
Create and optimize CLAUDE.md memory files or .claude/rules/ modular rules for Claude Code projects. Comprehensive guidance on file hierarchy, content structure, path-scoped rules, best practices, and anti-patterns. Use when working with CLAUDE.md files, .claude/rules directories, setting up new projects, or improving Claude Code's context awareness.
rules-manager
melvynx/aiblueprint
Create, edit, and maintain AGENTS.md and .agents/rules/. Use when adding, modifying, restructuring, or optimizing project rules, conventions, or constraints.
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.