К основному содержанию
скилл CX Codex GP ChatGPT официальный · OpenAI

expo-ui-swift-ui — скилл для Codex: SwiftUI в React Native

Скилл учит агента работать с пакетом @expo/ui/swift-ui, который позволяет использовать SwiftUI-компоненты и модификаторы в React Native приложениях на Expo SDK 55.

Установить в Codex · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add openai/plugins --skill expo-ui-swift-ui -a codex
Открыть на GitHub

Что делает expo-ui-swift-ui

Скилл подключает знания о @expo/ui/swift-ui — пакете, который переносит API SwiftUI в React Native. Агент импортирует компоненты из @expo/ui/swift-ui, модификаторы из @expo/ui/swift-ui/modifiers и оборачивает каждое SwiftUI-дерево в Host. Для встраивания обычных RN-компонентов внутрь SwiftUI используется RNHostView.

Перед использованием компонента или модификатора агент обращается к документации Expo UI SDK 55, чтобы уточнить API. Если нужного View или модификатора нет в пакете, скилл предлагает расширить его через локальный Expo-модуль — но только после подтверждения пользователя. После установки @expo/ui требуется пересборка нативной части командой npx expo run:ios.

Какие задачи решает

  • использовать SwiftUI-компоненты в React Native приложении
  • встроить RN-элемент в SwiftUI-дерево через RNHostView
  • применить SwiftUI-модификаторы к React-компонентам
  • расширить Expo UI недостающим View через локальный модуль

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

  • Добавь VStack с тремя Text и модификатором .padding(16)
  • Оберни <Pressable /> в RNHostView внутри Host
  • Проверь API компонента ScrollView в документации Expo UI SDK 55

Как установить expo-ui-swift-ui

1Через Skills CLI (Vercel)

npx skills add openai/plugins --skill expo-ui-swift-ui -a codex

2Вручную: положить файлы

.agents/skills/expo-ui-swift-ui/SKILL.md

Для всех проектов — ~/.agents/skills/

По шагам, с командами для каждой платформы: Скиллы Codex: как установить, где лежат и как вызвать

Вопросы о expo-ui-swift-ui

Как установить expo-ui-swift-ui в Codex?

Выполни npx skills add openai/plugins --skill expo-ui-swift-ui или npx skills add openai/plugins --skill expo-ui-swift-ui -a codex. Скилл будет доступен в .agents/skills/expo-ui-swift-ui/SKILL.md.

Что делает expo-ui-swift-ui?

Скилл учит агента работать с пакетом @expo/ui/swift-ui, который позволяет использовать SwiftUI Views и модификаторы в React Native приложениях на Expo SDK 55. Агент импортирует компоненты, оборачивает их в Host и обращается к документации перед использованием.

Нужна ли пересборка нативной части после установки @expo/ui?

Да, после установки пакета @expo/ui требуется пересборка командой npx expo run:ios.

Исходный текст

SKILL.md · MIT
---
name: expo-ui-swift-ui
description: "`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app."
---

> The instructions in this skill apply to SDK 55 only. For other SDK versions, refer to the Expo UI SwiftUI docs for that version for the most accurate information.

## Installation

```bash
npx expo install @expo/ui
```

A native rebuild is required after installation (`npx expo run:ios`).

## Instructions

- Expo UI's API mirrors SwiftUI's API. Use SwiftUI knowledge to decide which components or modifiers to use.
- Components are imported from `@expo/ui/swift-ui`, modifiers from `@expo/ui/swift-ui/modifiers`.
- When about to use a component, fetch its docs to confirm the API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/{component-name}/index.md
- When unsure about a modifier's API, refer to the docs - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md
- Every SwiftUI tree must be wrapped in `Host`.
- `RNHostView` is specifically for embedding RN components inside a SwiftUI tree. Example:

```jsx
import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";

<Host matchContents>
  <VStack>
    <RNHostView matchContents>
      // Here, `Pressable` is an RN component so it is wrapped in `RNHostView`.
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;
```

- If a required modifier or View is missing in Expo UI, it can be extended via a local Expo module. See: https://docs.expo.dev/guides/expo-ui-swift-ui/extending/index.md. Confirm with the user before extending.

© Expo Team · MIT · openai/plugins

Похожие скиллы

Всё по теме «Фронтенд и UI» →
expo-liquid-glass devanshuDesai Помогает собрать стеклянные интерфейсы в Expo React Native: четыре пути реализации, проверки доступности и откат на Android. CX Codex +1 478установок expo-native-ui expo Настраивает правила вёрстки нативных экранов в Expo по гайдам Apple HIG: цвета, элементы @expo/ui, SF Symbols и адаптивные отступы. CX Codex +1 31 700установок expo-brownfield expo Помогает внедрить React Native и Expo в существующие нативные приложения на iOS и Android. Пригодится для точечной встройки экранов в SwiftUI, UIKit или Kotlin. CX Codex +1 27 900установок limrun-expo-development limrun-inc Готовит и запускает Expo и React Native приложения на Limrun: dev-client сборка, туннель Metro, правки JS и TS без повторных нативных пересборок. CX Codex +1 43 100установок animate-expo emilkowalski Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах. CX Codex +1 137 900установок clerk-expo clerk Скилл, который добавляет вход и регистрацию Clerk в приложения на Expo и React Native. Пригодится, когда нужны готовые экраны авторизации или свои потоки с OTP и MFA. CX Codex +1 14 100установок

Из того же набора420

Весь набор →
shopify-custom-data Скилл для Codex и ChatGPT, который ведёт агента по работе с Metafields и Metaobjects в приложениях Shopify. CX Codex GP ChatGPT 1установок metric-pack-designer Скилл помогает описать локальный набор метрик для plugin-eval: рубрики, проверки и метрики в совместимом с схемой виде. CX Codex GP ChatGPT 1установок evaluate-skill Проверяет локальный скилл, объясняет причины оценки и предлагает, что исправить первым. Нужен перед бенчмарком или измерением токенов. CX Codex GP ChatGPT 1установок evaluate-plugin Разбирает локальный плагин Codex по шагам и говорит, что чинить первым. Пригодится перед сравнением версий. CX Codex GP ChatGPT 1установок expo-ui-jetpack-compose Скилл подсказывает агенту, как писать нативные Android-интерфейсы через @expo/ui/jetpack-compose в приложении Expo. CX Codex GP ChatGPT 1установок expo-module Скилл объясняет, как создавать нативные модули и представления Expo на Swift, Kotlin и TypeScript. Пригодится для работы с Expo Modules API. CX Codex GP ChatGPT 1установок expo-dev-client Скилл для Codex, который проводит агента через сборку development-клиента Expo и его отправку в TestFlight или на устройство. CX Codex GP ChatGPT 1установок expo-cicd-workflows Скилл помогает создавать и проверять YAML-файлы EAS Workflows в Expo-проектах. Пригодится для CI/CD, сборок и автоматизации деплоя. CX Codex GP ChatGPT 1установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой