Skip to main content
NEW · APP STORE Now on iOS · macOS · iPad Android & Windows soon GET IT
Prompts Expo SDK 55 SwiftUI UI Assistant

agent coding skill risk: low

Expo SDK 55 SwiftUI UI Assistant

Instructs the model on using the @expo/ui/swift-ui package for Expo SDK 55, covering installation, component and modifier selection from SwiftUI, wrapping trees in Host, embedding…

SKILL 1 file

SKILL.md
---
name: antigravity-awesome-skills-expo-ui-swift-ui
description: "expo-ui-swift-ui"
---
---
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.

## When to Use
- You need to build iOS-native UI in Expo using `@expo/ui/swift-ui`.
- The task involves selecting SwiftUI views or modifiers, wrapping trees in `Host`, or embedding React Native components with `RNHostView`.
- You are targeting Expo SDK 55 behavior for SwiftUI integration and extension guidance.

## 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.

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

REQUIRED CONTEXT

  • user task involving @expo/ui/swift-ui for SDK 55

ROLES & RULES

  1. Use SwiftUI knowledge to decide which components or modifiers to use.
  2. When about to use a component, fetch its docs to confirm the API.
  3. When unsure about a modifier's API, refer to the docs.
  4. Every SwiftUI tree must be wrapped in `Host`.
  5. Confirm with the user before extending.
  6. Use this skill only when the task clearly matches the scope described above.
  7. Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  8. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

EXPECTED OUTPUT

Format
unknown
Constraints
  • wrap SwiftUI trees in Host
  • fetch component docs before use
  • confirm before extending via local module

SUCCESS CRITERIA

  • Apply only to SDK 55.
  • Wrap every SwiftUI tree in Host.
  • Fetch component docs before use.

EXAMPLES

Includes one example of embedding a React Native Pressable inside RNHostView within a SwiftUI tree wrapped by Host.

QUALITY

OVERALL
0.65
CLARITY
0.85
SPECIFICITY
0.90
REUSABILITY
0.25
COMPLETENESS
0.80

IMPROVEMENT SUGGESTIONS

  • Add explicit output format guidance (e.g., always show complete code examples with imports).
  • Extract the SDK version and doc URLs into placeholders to increase reusability across SDKs.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR AGENT