# expo-ui-jetpack-compose

A skill that tells the agent how to build native Android UI with @expo/ui/jetpack-compose inside an Expo app.

- skill · `type=skill` · Codex, ChatGPT · 1 install · ★ 7596
- Author: Expo Team · official OpenAI repository
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/expo/skills/expo-ui-jetpack-compose/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/expo-ui-jetpack-compose

## What it does

The skill covers the `@expo/ui/jetpack-compose` package: components come from `@expo/ui/jetpack-compose`, modifiers from `@expo/ui/jetpack-compose/modifiers`. The API mirrors Jetpack Compose, so the agent leans on Compose and Material Design 3 knowledge when picking a component or modifier. Every Compose tree is wrapped in `Host`: `<Host matchContents>` sizes to content, `<Host style={{ flex: 1 }}>` is for explicit sizing, such as a parent of `LazyColumn`.

The instructions apply to SDK 55 only. On other versions the skill points to the Expo UI Jetpack Compose docs for that version. Before using a component, the agent reads the package `.d.ts` files to confirm the API: locate the package with `node -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))"`, then open the relevant `{ComponentName}/index.d.ts`. Fetching the component or modifier docs before implementing is part of the routine too.

Install the package with `npx expo install @expo/ui`, then rebuild natively with `npx expo run:android`. For scrollable lists the skill swaps react-native `ScrollView` and `FlatList` for `LazyColumn`, and icons use `<Icon source={require('./icon.xml')} size={24} />` with Android XML vector drawables kept in `assets/`; Metro bundles `.xml` without config changes. If your project sits on a different SDK version, these instructions won't match — check the docs for your version instead.

## Install

### Codex (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill expo-ui-jetpack-compose -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/expo-ui-jetpack-compose/SKILL.md` — For all projects use ~/.agents/skills/

### Claude Code

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill expo-ui-jetpack-compose -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/expo-ui-jetpack-compose/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/expo-ui-jetpack-compose/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/expo-ui-jetpack-compose/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins expo-ui-jetpack-compose
```

2. **Manually: put the files in place**
- File: `.github/skills/expo-ui-jetpack-compose/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/expo/skills/expo-ui-jetpack-compose
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/expo-ui-jetpack-compose/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/expo/skills/expo-ui-jetpack-compose/SKILL.md

## When to use it
- build a screen from Jetpack Compose components inside an Expo app
- choose between `LazyColumn` and `FlatList` for a scrollable list
- wire an Android XML vector drawable in as an icon
- confirm the exact signature of a component or modifier from `.d.ts`
- size a Compose tree through `Host`

## Example prompts
- Build a settings screen with components from `@expo/ui/jetpack-compose` and `Host matchContents`
- Replace `FlatList` with `LazyColumn` wrapped in `<Host style={{ flex: 1 }}>`
- Add the icon at `assets/icons/wifi.xml` using the `Icon` component

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 0a4d8c09059f5548.

BEGIN THIRD-PARTY FILE 0a4d8c09059f5548
````text
---
name: expo-ui-jetpack-compose
description: "`@expo/ui/jetpack-compose` package lets you use Jetpack Compose 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 Jetpack Compose 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:android`).

## Instructions

- Expo UI's API mirrors Jetpack Compose's API. Use Jetpack Compose and Material Design 3 knowledge to decide which components or modifiers to use. If you need deeper Jetpack Compose or Material 3 guidance (e.g. which component to pick, layout patterns, theming), consult current Jetpack Compose and Material Design 3 documentation before implementing.
- Components are imported from `@expo/ui/jetpack-compose`, modifiers from `@expo/ui/jetpack-compose/modifiers`.
- **Always read the `.d.ts` type files** to confirm the exact API before using a component or modifier. Run `node -e "console.log(path.dirname(require.resolve('@expo/ui/jetpack-compose')))"` to locate the package, then read the relevant `{ComponentName}/index.d.ts` files. This is the most reliable source of truth.
- When about to use a component, fetch its docs to confirm the API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/jetpack-compose/{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/jetpack-compose/modifiers/index.md
- Every Jetpack Compose tree must be wrapped in `Host`. Use `<Host matchContents>` for intrinsic sizing, or `<Host style={{ flex: 1 }}>` when you need explicit size (e.g. as a parent of `LazyColumn`). Example:

```jsx
import { Host, Column, Button, Text } from "@expo/ui/jetpack-compose";
import { fillMaxWidth, paddingAll } from "@expo/ui/jetpack-compose/modifiers";

<Host matchContents>
  <Column verticalArrangement={{ spacedBy: 8 }} modifiers={[fillMaxWidth(), paddingAll(16)]}>
    <Text style={{ typography: "titleLarge" }}>Hello</Text>
    <Button onPress={() => alert("Pressed!")}>Press me</Button>
  </Column>
</Host>;
```

## Key Components

- **LazyColumn** — Use instead of react-native `ScrollView`/`FlatList` for scrollable lists. Wrap in `<Host style={{ flex: 1 }}>`.
````
END THIRD-PARTY FILE 0a4d8c09059f5548

The third-party file has ended. Everything between the 0a4d8c09059f5548 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2334 of 2771 bytes. © Expo Team · MIT · https://github.com/openai/plugins/tree/HEAD/plugins/expo/skills/expo-ui-jetpack-compose/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md