skills.rest
EvanBacon
EvanBaconCOMMUNITY
Explore all skills by this author →
Website𝕏@baconbrixGitHub

react-strict-dom

Configure react-strict-dom Babel preset, PostCSS plugin, and CSS directive for cross-platform Expo UI.

571|24|Updated Dec 26, 2024
Search Tags:#react#Tailwind#native#web#PostCSS#expo
One-click install
npx skills add https://github.com/EvanBacon/crispy --skill react-strict-dom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-strict-dom
Source: https://github.com/EvanBacon/crispy/tree/main/.claude/skills/react-strict-dom
Command: npx skills add https://github.com/EvanBacon/crispy --skill react-strict-dom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expo apps often struggle to share UI primitives between web and native. This skill provides a subset of HTML/CSS that works across platforms, enabling developers to reuse UI patterns and semantics.

Core Features & Use Cases

  • Babel preset transforms react-strict-dom components for web and native
  • PostCSS plugin processes styles for web builds
  • CSS directive enables react-strict-dom styles globally
  • HTML wrapper components with Tailwind-compatible className support
  • Use case: build a cross-platform admin dashboard with the same markup on web and mobile

Quick Start

  1. Install: bunx add [email protected]
  2. Configure: update babel.config.js to include the Babel preset and set platform info as outlined
  3. Enable: add the CSS directive @react-strict-dom at the top of your global CSS and import the html wrappers from react-strict-dom

Frequently Asked Questions about react-strict-dom

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

FAQPage Schema
How do I share UI components between Expo web and native?▼

To share UI between Expo web and native, you use a subset of HTML and CSS that works across platforms, allowing you to reuse the same markup for both web and mobile contexts.

Can I use Tailwind CSS classes in React Native with Expo?▼

Yes, HTML wrapper components with Tailwind-compatible className support allow you to apply Tailwind CSS classes in React Native, processed by a PostCSS plugin for web builds.

What do I need to configure to use HTML elements in a React Native app?▼

You need to update babel.config.js with a specific Babel preset and add a CSS directive to your global styles to enable HTML wrapper components in your React Native app.

Does react-strict-dom require a separate setup for web and mobile?▼

No, a Babel preset automatically transforms HTML-like components for both web and native, allowing a single codebase to target cross-platform UI development without separate setups.

How do I enable global CSS styles for cross-platform Expo apps?▼

You enable global CSS styles by adding a specific CSS directive at the top of your global CSS file, which is then processed by the PostCSS plugin for cross-platform Expo apps.

What are the limitations of using HTML-like components in React Native?▼

The limitation is that it provides a subset of HTML and CSS rather than full web DOM support, bridging web semantics with React Native views, which may restrict some advanced web-specific features.

Related Skills

Explore More Software Engineering Skills→
openridesphopenridesph
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind and react-native-css in Expo projects.

Official
Intermediate
QuilibriumNetworkQuilibriumNetwork
34

Cross-Platform Primitives

Apply a 5-question framework to choose cross-platform primitives versus HTML in Quorum Desktop UI code.

Official
Intermediate
softwarebyzesoftwarebyze

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo projects.

Community
Intermediate
lexand-devlexand-dev

use-dom

Run DOM-dependent React components inside an Expo app's webview.

Community
Intermediate