app-icon · code-with-beto — скилл для Claude Code: что делает и как установить
Создаёт и настраивает иконки для проектов на React Native Expo под iOS 26 и Android. Задействует генерацию через SnapAI и прописывает ассеты в app.json.
npx skills add Code-with-Beto/skills --skill app-icon -a claude-codeЧто делает app-icon
Скилл ведёт разработчика по шагам генерации графики для мобильного приложения. Сначала он считывает настройки в app.json, уточняет нужный стиль (например, минимализм, неоновый, пиксельный или стеклянный) и запускает консольную утилиту SnapAI. На выходе создаётся файл 1024x1024 с прозрачным фоном.
Дальше скрипт упаковывает графику под требования платформ. Для iOS 26 разворачивается структура каталога .icon с параметрами стиля Liquid Glass. Под Android иконка масштабируется до 66% площади с помощью ImageMagick, чтобы маски системы не обрезали контент. Финальным шагом агент обновляет секции ios и android.adaptiveIcon в app.json.
Генерация завершится сбоем, если заранее не привязать ключ OpenAI в SnapAI и не поставить ImageMagick.
Какие задачи решает
- Сгенерировать иконку приложения по текстовому описанию с прозрачным фоном
- Собрать структуру каталога .icon с поддержкой iOS 26 Liquid Glass
- Уменьшить ассет до 66% под безопасную зону адаптивных масок Android
- Прописать пути к готовым иконкам в app.json проекта Expo
Примеры запросов агенту
- Создай минималистичную иконку для приложения заметок на Expo
- Сгенерируй иконку в стиле glassy и настрой app.json для iOS и Android
- Подготовь адаптивную иконку для Android с помощью ImageMagick
Как установить app-icon
1Через Skills CLI (Vercel)
npx skills add Code-with-Beto/skills --skill app-icon -a claude-code2Вручную: положить файлы
~/.claude/skills/app-icon/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/app-icon/
1Через Skills CLI (Vercel)
npx skills add Code-with-Beto/skills --skill app-icon -a codex2Вручную: положить файлы
.agents/skills/app-icon/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Code-with-Beto/skills --skill app-icon -a cursor2Вручную: положить файлы
.cursor/skills/app-icon/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Code-with-Beto/skills app-icon2Вручную: положить файлы
.github/skills/app-icon/SKILL.md1Через Skills CLI (Vercel)
npx skills add Code-with-Beto/skills --skill app-icon -a gemini-cli2Командой платформы
gemini skills install https://github.com/Code-with-Beto/skills --path plugins/cwb-app-icon/skills/app-iconВручную: положить файлы
.devin/skills/app-icon/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Code-with-Beto/skills --skill app-icon -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Другие версии app-icon
Похожие
Рядом в теме «Мобильная разработка»
Всё по теме «Мобильная разработка» →Вопросы о app-icon
Как установить app-icon в Claude Code?
Выполните команду npx skills add Code-with-Beto/skills --skill app-icon -a claude-code. Файл навыка появится по пути ~/.claude/skills/app-icon/SKILL.md.
Что делает app-icon?
Он запрашивает генерацию у SnapAI, создаёт конфигурацию Liquid Glass для iOS 26, масштабирует адаптивную иконку для Android и регистрирует файлы в app.json.
Что нужно подготовить перед запуском генерации?
Требуется настроить SnapAI с помощью npx snapai config --openai-api-key "<their-api-key>" или переменной OPENAI_API_KEY, а также установить ImageMagick через brew install imagemagick.
