skills.rest
salafidurus
salafidurusOFFICIAL
Explore all skills by this author →
GitHub

use-dom

Integrate React web components and DOM APIs into native apps via webview context.

1|Updated Jan 19, 2026
Search Tags:#react#native integration#web components#expo#dom#webview
One-click install
npx skills add https://github.com/salafidurus/salafi-audios --skill use-dom-salafidurus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/salafidurus/salafi-audios/tree/main/apps/mobile/.opencode/skills/use-dom
Command: npx skills add https://github.com/salafidurus/salafi-audios --skill use-dom-salafidurus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to seamlessly integrate web-only libraries and existing React web components into their native Expo applications, bridging the gap between web and mobile development.

Core Features & Use Cases

  • Web-only Libraries: Utilize libraries like recharts, react-syntax-highlighter, or any DOM-dependent React library directly within your native app.
  • Code Migration: Migrate existing React web components to native platforms without extensive refactoring.
  • Complex Layouts: Implement intricate HTML/CSS layouts that might be challenging with React Native components alone.
  • Use Case: Embed a complex charting library like Recharts into your Expo app to visualize data, or use a rich text editor component that relies on DOM APIs.

Quick Start

Create a new file with the 'use dom'; directive at the top to define a DOM component.

Frequently Asked Questions about use-dom

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

FAQPage Schema
How do I use web-only React libraries like Recharts in an Expo native app?▼

To use web-only React libraries in an Expo native app, you can execute web code within a webview context. This approach supports DOM APIs and CSS, allowing libraries like Recharts to render directly on native platforms.

What is the best way to migrate a React web codebase to native without extensive refactoring?▼

The best way to migrate a React web codebase to native without extensive refactoring is to run web components directly within a native webview context. This enables incremental migration by supporting existing DOM APIs and CSS functionalities.

Can I run complex HTML and CSS layouts in React Native using a webview?▼

Yes, you can run complex HTML and CSS layouts in React Native by executing web code inside a webview. This allows you to implement intricate layouts that might be challenging to build with standard React Native components alone.

Does React Native webview integration support DOM-dependent components like rich text editors?▼

React Native webview integration supports DOM-dependent components like rich text editors by executing web code natively. It bridges web and mobile development by providing the necessary DOM API support within the native application environment.

Do I need special directives to define a web component for native integration?▼

Yes, you need to include the 'use dom'; directive at the top of a new file to define a web component for native integration. Component definition also requires serializable props to ensure proper communication between native and web contexts.

Related Skills

Explore More Software Engineering Skills→
Asymmetric-alAsymmetric-al
417

use-dom

Execute web-only React components in Expo webview contexts.

Official
Intermediate
luke-h1luke-h1
13

use-dom

Run web-only React components in Expo apps via webview.

Community
Intermediate
nawab69nawab69

use-dom

Run web React components inside Expo apps via a webview-backed DOM component.

Community
Intermediate
treesus6treesus6
1

use-dom

Integrate web code into Expo apps using DOM components in a WebView.

Community
Intermediate