# Build Expo DOM Components

Expo teams often need web libraries inside native apps without rewriting them. This skill guides Claude, Codex, and Claude Code through safe DOM component patterns.

## Install

```bash
npx skillstore add expo/use-dom
```

## Metadata

- Status: approved
- Slug: expo-use-dom
- Version: 1.0.0
- Author version: 1.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: ea37bfd220ca1ef965839f5ca5e16e924688af9acd23783b220986b73ab9ffcd
- Author: expo
- GitHub username: expo
- License: MIT
- Repository: https://github.com/expo/skills/tree/main/plugins/expo-app-design/skills/use-dom/
- Ref: 30c73eac2afe762f6aa9c4553158769369d47351
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, filesystem
- Quality score: 80
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/expo-use-dom
- Manifest: https://skillstore.pages.dev/api/skills/expo-use-dom/manifest

## Capabilities

- Explains when Expo DOM components fit web-only libraries and complex HTML layouts.
- Shows the required use dom directive and single default export pattern.
- Documents typed DOMProps usage for WebView configuration and sizing.
- Guides async native actions passed from native screens into DOM components.
- Covers Expo Router behavior, route params, CSS isolation, and bundled assets.

## Use Cases

- Embed Web Charts: Add charting libraries that depend on DOM APIs to an Expo app while keeping native screens around them.
- Migrate React Web UI: Move existing React web components into a native Expo app in small, isolated steps.
- Document DOM Boundaries: Create clear implementation guidance for routing, props, assets, and platform behavior before development starts.

## Prompt Templates

### Create a Basic DOM Component

```
Create an Expo DOM component for [web library or UI]. Include the use dom directive, typed DOMProps, serializable props, and native usage guidance.
```

### Migrate a Web Component

```
Help migrate this React web component into an Expo DOM component. Identify prop changes, CSS handling, asset handling, and native screen integration.
```

### Wire Native Actions

```
Design a DOM component that receives async native actions as props. Keep inputs serializable and explain error handling across the WebView boundary.
```

### Review a DOM Integration Plan

```
Review this Expo DOM component plan for performance, routing, WebView sizing, platform differences, and cases where native components are better.
```

## Limitations

- It does not generate or run a full Expo project by itself.
- It does not replace native React Native components for simple or performance-critical UI.
- It cannot guarantee identical rendering across iOS, Android, and web without testing.
- It depends on Expo DOM component support in the target project.

## Best Practices

- Keep each DOM component focused on one web-only capability.
- Pass only serializable data and async functions across the native boundary.
- Test DOM components on iOS, Android, and web before release.

## Anti Patterns

- Do not use DOM components for simple UI that React Native can render efficiently.
- Do not place layout routes or whole navigation shells inside DOM components.
- Do not depend on direct shared state between native code and the WebView context.

## Security Audit

- Audited at: 2026-07-05T15:31:28.063\+00:00
- Summary: The static alerts are false positives in Markdown documentation examples. Dynamic import patterns are TypeScript type imports, backtick alerts are formatting, and the path traversal alert is a static bundled asset example. No prompt injection, data exfiltration, command execution, or host reconnaissance intent was found.

## Stats

- Views: 143
- Downloads: 7
- Favorites: 0
- Popularity score: 0