AIKraft/Skills/appllama-app-design-skill

appllama-app-design-skill

Создаёт экраны мобильных приложений на Expo/React Native с точным соблюдением Apple HIG, семантических цветов и нативных контролов. Пригоден для проектирования экранов, онбординга, навигации и полировки UI, анимации (Reanimated) и тёмной темы. Вызывается по запросам на создание или улучшение экранов, настройку потоков и повышение нативности интерфейса.

appllama official Разработка ★ 2.4k

Что делает навык

Создаёт экраны мобильных приложений на Expo/React Native с точным соблюдением Apple HIG, семантических цветов и нативных контролов. Обеспечивает проектирование экранов, онбординга, навигации, анимации (Reanimated) и поддержки тёмной темы.

Когда применять

  • Проектирование экранов мобильных приложений с учётом нативных паттернов
  • Настройка потоков навигации и переходов между экранами
  • Повышение нативности интерфейса и полировка UI
  • Реализация анимаций и поддержки тёмной темы

Как работает

  1. Исследовать 20–30 экранов топовых приложений в той же категории через Appllama MCP, извлекая паттерны макета и иерархии
  2. Применить стек Expo (Expo Router, React Native, TypeScript) с нативными контролами, SF Symbols и семантическими цветами для светлой и тёмной тем
  3. Настроить навигацию с использованием router.push, router.replace и модальных представлений (modal, formSheet, fullScreenModal) согласно грамматике UX
  4. Реализовать анимации через react-native-reanimated, соблюдая частотные ограничения и используя пружинные анимации для жестов
  5. Обеспечить соответствие анти-шаблонным правилам: один акцентный цвет, единая радиус скругления, отсутствие эмодзи в интерфейсе и полные циклы состояний

Примеры запросов агенту

Создай экран онбординга для приложения по фитнесу, соблюдая Apple HIG и используя нативные контролы
Настрой навигационный поток для модального окна выбора фильтров, чтобы пользователь мог легко вернуться назад
Добавь поддержку тёмной темы и анимации появления элементов в существующем экране списка задач на Expo

Что понадобится

  • Подключённый Appllama MCP для доступа к референсным экранам
  • Среда Expo с установленными пакетами react-native-reanimated, expo-router, expo-image

Описание составлено по SKILL.md навыка, сверено 07.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «appllama-app-design-skill» из репозитория: # https://github.com/appllama/appllama-skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r appllama-app-design-skill/ ~/.claude/skills/appllama-app-design-skill/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.