app-icon · code-with-beto — Claude Code skill: what it does, how to install
Generates and configures app icons for React Native Expo apps. Handles iOS 26 Liquid Glass formats, Android adaptive safe areas, and app.json updates.
npx skills add Code-with-Beto/skills --skill app-icon -a claude-codeWhat app-icon does
The skill manages the end-to-end asset creation pipeline for Expo applications. It inspects app.json, asks for an aesthetic style such as glassy, neon, pixel, or minimalism, and invokes the SnapAI CLI to render a 1024x1024 transparent PNG.
Next, the workflow structures the platform assets. For iOS 26, it builds the .icon directory containing Liquid Glass layer specifications. For Android, it uses ImageMagick to scale the graphic down to 66% so circular and squircle masks do not crop the core image. It finishes by updating app.json with the new asset paths.
The generation will break immediately if SnapAI lacks an OpenAI API key or if ImageMagick is not installed locally.
What it helps with
- Generate transparent app icons from a prompt using SnapAI
- Build an iOS 26 Liquid Glass .icon folder bundle
- Scale Android foreground assets down to the 66% safe area
- Configure iOS and Android icon entries directly in Expo app.json
Example prompts for the agent
- Generate a minimalist app icon for my Expo app
- Create a glassy icon and configure app.json for iOS and Android
- Prepare Android adaptive icons with ImageMagick scaling
How to install app-icon
1Skills CLI (Vercel)
npx skills add Code-with-Beto/skills --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 Code-with-Beto/skills --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 Code-with-Beto/skills --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 Code-with-Beto/skills app-icon2Manually: put the files in place
.github/skills/app-icon/SKILL.md1Skills CLI (Vercel)
npx skills add Code-with-Beto/skills --skill app-icon -a gemini-cli2Platform CLI
gemini skills install https://github.com/Code-with-Beto/skills --path plugins/cwb-app-icon/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 Code-with-Beto/skills --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 Code-with-Beto/skills --skill app-icon -a claude-code. The skill file will be stored at ~/.claude/skills/app-icon/SKILL.md.
What does app-icon do?
It orchestrates icon rendering via SnapAI, configures the iOS 26 Liquid Glass folder structure, resizes Android adaptive layers, and writes the paths into app.json.
What dependencies are required before using this skill?
You need SnapAI configured with an OpenAI API key via npx snapai config --openai-api-key "<their-api-key>" and ImageMagick installed on your system.
Similar skills
Everything for Mobile →app-icon by other authors comes first.
