use-dom

Run web React components and HTML/CSS layouts in Expo apps via DOM components.

Updated Feb 16, 2026
One-click install
npx skills add https://github.com/json-choi/yogiya --skill use-dom-json-choi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/json-choi/yogiya/tree/main/apps/mobile/.agents/skills/use-dom
Command: npx skills add https://github.com/json-choi/yogiya --skill use-dom-json-choi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often need to reuse existing web‑only React libraries or complex HTML/CSS layouts in native Expo applications, which normally requires rewriting components for React Native.

Core Features & Use Cases

  • Allows web code to run verbatim inside a webview on iOS and Android while rendering unchanged on the web.
  • Supports migration of existing web components, charts, syntax highlighters, rich text editors, and other DOM‑dependent libraries.
  • Provides a dom prop to configure webview behavior such as scrolling, size, and safe‑area handling.

Quick Start

Create a component file that begins with the phrase use dom, export a single React component, and import it in a native screen to display web content.

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 libraries in a React Native Expo app?

Migrate web components into native Expo apps by creating a component file that starts with use dom and exports a single React component. This renders the web code verbatim inside a webview on iOS and Android.

What is the best way to migrate web React components to Expo without rewriting them?

Migrate web React components to Expo without rewriting them by using DOM components. This approach allows existing web code to run unchanged inside a native webview while rendering normally on web builds.

Can I use complex HTML and CSS layouts in an Expo project?

Use complex HTML and CSS layouts in an Expo project by leveraging DOM components. This enables you to incorporate charts, syntax highlighters, and rich text editors without converting them to React Native primitives.

How do I configure webview behavior for DOM components in Expo?

Configure webview behavior for DOM components in Expo by receiving a dom prop in your component. This prop allows you to manage settings such as scrolling, size, and safe-area handling within the native application.

Does migrating web charts to Expo require rewriting the code for React Native?

Migrating web charts to Expo does not require rewriting code for React Native. By using DOM components, your charting libraries run verbatim inside a native webview, preserving the original DOM-dependent logic.

When should I not use DOM components for Expo migration?

Avoid using DOM components for Expo migration when your web code does not rely on DOM-dependent libraries or complex HTML/CSS layouts. For simple UI elements, standard React Native components offer better native performance.