# app-icon

Generates and configures app icons for React Native Expo apps. Handles iOS 26 Liquid Glass formats, Android adaptive safe areas, and app.json updates.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2100 installs · ★ 143
- Author: Code-with-Beto
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Code-with-Beto/skills/tree/HEAD/plugins/cwb-app-icon/skills/app-icon/SKILL.md
- Updated: 2026-07-12
- HTML: https://affpapa.org/en/nevibecode/skills/app-icon

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Code-with-Beto/skills --skill app-icon -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/app-icon/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/app-icon/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Code-with-Beto/skills --skill app-icon -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/app-icon/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Code-with-Beto/skills --skill app-icon -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/app-icon/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Code-with-Beto/skills app-icon
```

2. **Manually: put the files in place**
- File: `.github/skills/app-icon/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Code-with-Beto/skills --skill app-icon -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Code-with-Beto/skills --path plugins/cwb-app-icon/skills/app-icon
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/app-icon/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Code-with-Beto/skills --skill app-icon -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Code-with-Beto/skills/tree/HEAD/plugins/cwb-app-icon/skills/app-icon/SKILL.md

## When to use it
- 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
- 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

## Similar
- [app-icon-optimization](https://affpapa.org/en/nevibecode/skills/app-icon-optimization.md) — skill · 2700 installs
- [expo-native-ui](https://affpapa.org/en/nevibecode/skills/expo-native-ui.md) — skill · 31700 installs
- [Mobile App Design Standards](https://affpapa.org/en/nevibecode/skills/mobile-app-design-standards.md) — skill · 906 installs
- [expo-app-clip](https://affpapa.org/en/nevibecode/skills/expo-app-clip.md) — skill · 19800 installs
- [limrun-expo-development](https://affpapa.org/en/nevibecode/skills/limrun-expo-development.md) — skill · 43100 installs
- [react-native-brownfield-migration](https://affpapa.org/en/nevibecode/skills/react-native-brownfield-migration.md) — skill · 5200 installs

## Other versions with the same name
- [app-icon · melvynx](https://affpapa.org/en/nevibecode/skills/melvynx-app-icon.md) — 396 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md