skills.rest
clovernguyen1010-ship-it
clovernguyen1010-ship-itCOMMUNITY
Explore all skills by this author →
GitHub

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into Expo-compatible React Native components with TypeScript.

Updated Apr 12, 2026
Search Tags:#html#react-native#convert#design-system#code-generation#expo#design-tokens
One-click install
npx skills add https://github.com/clovernguyen1010-ship-it/Clover_Nguyen --skill ba-html-to-react-native-ds-code-gen-clovernguyen1010-ship-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ba-html-to-react-native-ds-code-gen
Source: https://github.com/clovernguyen1010-ship-it/Clover_Nguyen/tree/main/.agent/skills/ba-html-to-react-native-ds-code-gen
Command: npx skills add https://github.com/clovernguyen1010-ship-it/Clover_Nguyen --skill ba-html-to-react-native-ds-code-gen-clovernguyen1010-ship-it

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates HTML prototypes into Expo/React Native UI that adheres to Design Tokens and a Mobile Design System, reducing manual rewrite and design drift.

Core Features & Use Cases

  • HTML-to-RN mapping that preserves layout, typography, and design tokens.
  • Generates Expo-ready React Native components and screens with TypeScript.
  • Produces token-driven styles (colors, spacing, typography) and a DS-compliant structure.
  • Use Case: Convert a static HTML page into a mobile screen with navigation and tokens.

Quick Start

Paste the HTML prototype and request conversion to Expo-ready React Native components.

Frequently Asked Questions about ba-html-to-react-native-ds-code-gen

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

FAQPage Schema
How do I convert HTML to React Native components for Expo?▼

To convert HTML to React Native components for Expo, paste your static HTML prototype and request transformation. The tool maps HTML elements to RN primitives and outputs Expo-compatible TypeScript-ready code with token-driven styling.

How does HTML to React Native code generation handle design tokens?▼

HTML to React Native code generation extracts design tokens like colors, spacing, and typography directly from the HTML prototype. It translates these into a token-driven design system to ensure DS-compliant styling in the generated mobile UI.

Does this HTML to React Native converter output TypeScript code?▼

Yes, the HTML to React Native converter outputs TypeScript-ready code. It generates Expo-compatible React Native components and screens with a structure that adheres to a mobile design system and token-based styling.

Why convert HTML mockups to Expo React Native instead of rewriting manually?▼

Converting HTML mockups to Expo React Native reduces manual rewrite effort and prevents design drift. It translates static HTML prototypes into mobile UIs that strictly adhere to design tokens and a mobile design system.

Do I need a specific file format to convert HTML to Expo React Native UI?▼

You need to provide an HTML prototype and ensure a YAML frontmatter with name and description exists in SKILL.md. This setup allows the tool to map HTML elements to RN primitives and apply native patterns correctly.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
21

element-plus-design-border

Define Element Plus border widths, styles, colors, radii, and shadows.

Community
Intermediate
jakubciszakjakubciszak
1

react-native-expo

Implement React Native mobile app screens with Expo and TypeScript.

Community
Intermediate
theodrosyimertheodrosyimer

rn-patterns

Generate React Native UI screens using Uniwind and Expo components.

Community
Advanced
Yukine5377Yukine5377

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into React Native/Expo components with design tokens.

Community
Advanced