AIKraft/AI/Войти
AIKraft/Skills/Создание нативного UI

Создание нативного UI

Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, animations, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill.

expo official Дизайн

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

Навык обеспечивает создание визуально привлекательных и нативно выглядящих экранов в Expo, включая стилизацию по Apple HIG, использование семантических цветов и нативных элементов управления. Он охватывает работу с анимациями, градиентами, медиа, хранилищем данных и адаптивной вёрсткой. Для маршрутизации и навигации рекомендуется использовать отдельный навык expo-router.

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

  • Создание интерфейсов, соответствующих гайдлайнам Apple HIG, с использованием нативных элементов управления iOS.
  • Реализация сложных анимаций, включая переходы, жесты и анимации, связанные со скроллом, с помощью Reanimated.
  • Добавление визуальных эффектов, таких как размытие (Blur) и эффект жидкого стекла (liquid glass), в интерфейс приложения.
  • Работа с SF Symbols для отображения иконок с различными весами и анимациями.
  • Интеграция медиа-контента (камера, аудио, видео) и управление данными через SQLite, AsyncStorage или SecureStore.

Как работает

  1. Для навигации, маршрутизации и управления экранами (стэки, табы, модальные окна) использовать навык expo-router.
  2. При необходимости стилизации применять CSS-градиенты через experimental_backgroundImage (доступно только в New Arch).
  3. Для иконок использовать SF Symbols через expo-image, указывая источник (sf: source), имена, анимации и веса.
  4. Для анимаций обращаться к документации Reanimated, используя возможности entering, exiting, layout, scroll-driven анимаций и жестов.
  5. Для нативных элементов управления iOS (Switch, Slider, SegmentedControl, DateTimePicker, Picker) обращаться к соответствующим разделам документации.
  6. Для визуальных эффектов применять Blur (expo-blur) и liquid glass (expo-glass-effect), а для 3D-графики — WebGPU и Three.js.

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

Создай экран настроек с переключателями и ползунками, стилизованными под нативный iOS.
Добавь анимацию появления списка элементов с использованием Reanimated.
Реализуй фон с градиентом и эффектом размытия для модального окна.

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

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

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

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