skills.rest
Selfdb-io
Selfdb-ioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

use-dom

Run web code inside native Expo apps using DOM components.

Updated Feb 4, 2026
Search Tags:#frontend#migration#react-native#expo#dom#webview
One-click install
npx skills add https://github.com/Selfdb-io/StreamX --skill use-dom-selfdb-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/Selfdb-io/StreamX/tree/main/.agentone/skills/expo-app-design/skills/use-dom
Command: npx skills add https://github.com/Selfdb-io/StreamX --skill use-dom-selfdb-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web-only libraries and DOM-heavy UI often can't run directly in native Expo apps. This Skill provides a structured approach to run web code inside a native app using DOM components, enabling gradual migration while preserving behavior.

Core Features & Use Cases

  • Web code in native: Render web UI inside a native Expo app via DOM components.
  • Web libraries in native: Use libraries that rely on DOM APIs and progressively migrate to native components.
  • Migration pathway: Start with a single component per file and move toward native equivalents while preserving behavior.

Quick Start

  1. Create a new file with "use dom" at the top of the file.
  2. Build a React component that accepts and passes a dom prop to DOM-enabled code.
  3. Import and render the DOM component in a native screen, then iterate by adding more web-based UI elements gradually without rewriting existing code.

Frequently Asked Questions about use-dom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run web code inside a native Expo app?▼

To embed web code inside a native Expo app, you use DOM components by adding the "use dom" directive at the top of a file and exporting a single default React component that handles in-component CSS and serializable props.

Can I use web libraries that rely on DOM APIs in React Native?▼

Yes, you can use web libraries relying on DOM APIs in React Native by rendering them through DOM components. This allows you to embed web UI like charts or syntax highlighters directly into your native application screens.

What is the best way to migrate web code to native components gradually?▼

The best way to migrate web code to native components gradually is to start with a single web component per file using DOM components, then iteratively replace it with native equivalents while preserving the original web behavior.

Does running web UI in Expo require specific file structuring?▼

Yes, running web UI in Expo using DOM components requires specific file structuring: each file must have its own scope, include the "use dom" directive at the top, and contain a single default export with serializable props.

Why do my web components break when migrated directly to React Native?▼

Web components break when migrated directly to React Native because web-only libraries and DOM-heavy UI cannot run natively without DOM APIs. Using DOM components provides a structured approach to bridge this gap and preserve behavior during migration.

Related Skills

Explore More Software Engineering Skills→
msichtermanmsichterman

use-dom

Embed web-only code in native Expo apps using DOM components.

Community
Intermediate
baskarajatibaskarajati

use-dom

Run web code inside native apps using Expo DOM components.

Community
Intermediate
carlos3gcarlos3g
2

use-dom

Run web code in React Native apps using Expo DOM components.

Community
Intermediate
ravnhqravnhq
3

use-dom

Run web UI code inside native Expo apps via DOM components.

Official
Intermediate