AIKraft/AI/Войти
AIKraft/Skills/expo-design-system

expo-design-system

Создаёт и поддерживает дизайн-систему в Expo-приложении: токены, компоненты с вариантами и правила их использования. Помогает стандартизировать стили, исправить «AI-вид» интерфейса и провести аудит на отклонения. Используйте expo-native-ui для нативных стилей, expo-project-structure для структуры папок.

expo official Разработка ★ 2.7k

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

Создаёт и поддерживает дизайн-систему в Expo-приложении, определяя токены (цвета, отступы, типографику) и переиспользуемые компоненты с вариантами. Решает задачу стандартизации стилей, устранения «AI-вида» интерфейса и проведения аудита на отклонения от единого источника правды.

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

  • Инициализация дизайн-системы в новом приложении Expo с нуля.
  • Аудит существующего приложения на предмет дрейфа дизайна и внедрение токенов.
  • Создание переиспользуемых UI-компонентов (например, кнопок) с поддержкой вариантов и состояний.
  • Настройка семантических цветов с поддержкой светлой и тёмной тем.

Как работает

  1. Проверить наличие существующей системы стилей (NativeWind, Tamagui и др.) и токенов; если система есть, расширять её, а не создавать новую.
  2. Создать единый источник токенов в src/theme/ (colors, spacing, typography, radius, shadows, motion), используя 4-пунктовую сетку и семантические цвета платформы.
  3. Определить переиспользуемые компоненты в src/components/ с явными вариантами, размерами, состояниями и поддержкой переопределения стилей.
  4. Провести аудит приложения на отклонения, используя grep-проверки и рубрики из references/audit.md.
  5. Заменить повторяющиеся хардкод-значения на импортируемые токены, обеспечив единую точку входа для стилей.

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

Создай дизайн-систему для нового Expo-приложения: токены цветов, отступов и типографики.
Проведи аудит текущего проекта на отклонения от дизайн-системы и предложи план исправлений.
Реализуй переиспользуемый компонент кнопки с вариантами primary и secondary, поддерживающий состояния pressed и loading.

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

  • Среда Expo (React Native)
  • Пакет expo-router (для семантических цветов Color)
  • Рекомендуется использование expo-native-ui и expo-project-structure

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

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

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

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