agent coding skill risk: low
Expo SDK 55 SwiftUI Integration Guide
Instructs the model on using @expo/ui/swift-ui to build iOS-native UI in Expo SDK 55, covering installation, component and modifier selection, Host and RNHostView usage, documentat…
SKILL 1 file
SKILL.md
---
name: antigravity-awesome-skills-expo-ui-swift-ui-3eaf81b7
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
- task involving @expo/ui/swift-ui or SwiftUI views/modifiers in Expo SDK 55
OPTIONAL CONTEXT
- specific component names
- need to embed React Native views
ROLES & RULES
- When about to use a component, fetch its docs to confirm the API
- When unsure about a modifier's API, refer to the docs
- Every SwiftUI tree must be wrapped in Host
- Confirm with the user before extending if a required modifier or View is missing
- 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
EXPECTED OUTPUT
- Format
- unknown
- Constraints
- follow provided installation steps
- wrap SwiftUI trees in Host
- fetch component docs before use
- ask before extending via custom module
SUCCESS CRITERIA
- Apply instructions only to Expo SDK 55 SwiftUI tasks
- Wrap every SwiftUI tree in Host
- Fetch component docs before use
- Ask user before extending missing APIs
FAILURE MODES
- May be applied outside SDK 55 scope
- May skip fetching latest component docs
EXAMPLES
Includes one JSX example demonstrating RNHostView embedding a React Native Pressable inside a SwiftUI VStack wrapped by Host.
CAVEATS
- Dependencies
- Requires Expo SDK 55
- Requires access to https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/
- Missing context
- Desired output format or code style conventions
- Ambiguities
- The instruction 'When about to use a component, fetch its docs' does not specify the mechanism or whether the AI should actually perform a fetch.
QUALITY
- OVERALL
- 0.65
- CLARITY
- 0.80
- SPECIFICITY
- 0.85
- REUSABILITY
- 0.35
- COMPLETENESS
- 0.75
IMPROVEMENT SUGGESTIONS
- Add an explicit 'Output Format' section specifying how code examples and explanations should be structured.
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
- Rapid App MVP Prototyperagentcoding
- AI-First Design Handoff Specs Generatoragentcoding
- Test-Driven Development Workflow Rulesagentcoding
- Structured Autonomy Implementation Agentagentcoding
- PROGRESS.md Manager for Agentic Codingagentcoding
- Hard Bug Diagnosis Disciplineagentcoding
- Git Development Branch Finisheragentcoding
- Code Review Feedback Reception Protocolagentcoding
- Systematic Debugging Process Guideagentcoding
- Matplotlib Python Plotting Guideagentcoding
- LaTeX Paper PDF Compileragentcoding
- Full Output Enforcement for Code Generationagentcoding
- PyTorch Geometric GNN Implementation Guideagentcoding
- Premium React UI Design Architectagentcoding
- Astropy Python Astronomy Library Guideagentcoding
- Book SFT Style Transfer Pipelineagentcoding
- Event Sourcing and CQRS Architectagentcoding
- FluidSim Python CFD Simulation Guideagentcoding
- NetworkX Python Graph Analysis Toolkitagentcoding
- Phase-Gated Debugging Protocol Enforceragentcoding
- SimPy Discrete-Event Simulation Guideagentcoding
- Phase-Gated Code Debugging Protocolagentcoding
- Biopython Molecular Biology Toolkit Guideagentcoding
- Haskell Advanced Type Systems Expertagentcoding
- Anime.js Complex Animation Workflowagentcoding