skills.rest
khulnasoft-bot
khulnasoft-botCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitch::react-native

Convert Stitch HTML designs into React Native components with StyleSheet styling.

Updated Jun 27, 2026
Search Tags:#typescript#react native#design to code#stylesheet#stitch#html conversion#mobile components
One-click install
npx skills add https://github.com/khulnasoft-bot/scalify --skill stitch-react-native-khulnasoft-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::react-native
Source: https://github.com/khulnasoft-bot/scalify/tree/main/skills/plugins/stitch-build/skills/react-native
Command: npx skills add https://github.com/khulnasoft-bot/scalify --skill stitch-react-native-khulnasoft-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @swc/core, and includes scripts (resource) components.

What problem does it solve? Translating web designs from Stitch into native mobile code requires manually mapping HTML elements and CSS to React Native primitives, which is error-prone and slow. This Skill automates the design-to-native pipeline, from fetching Stitch screens to generating validated TypeScript components. ## Core Features & Use Cases - Design Retrieval: Downloads Stitch HTML and full-resolution screenshots from Google Cloud Storage via a curl-based script that handles redirects and security handshakes. - HTML-to-Native Mapping: Converts HTML elements to React Native primitives (View, Text, Pressable, Image, FlatList) and CSS/Tailwind to StyleSheet.create() calls with theme token extraction. - Automated Validation: Runs an AST-based check to catch missing Props interfaces, hardcoded color values, and leftover HTML elements, then audits against an architecture checklist. - Use Case: Ask the agent to convert a Stitch Login screen into React Native components, and it will scaffold Atomic Design components with typed props, theme constants, mock data, and accessibility labels. ## Quick Start Convert my Login screen in my Stitch project to React Native components.

Frequently Asked Questions about stitch::react-native

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

FAQPage Schema
How do I convert Stitch designs to React Native components?▼

Provide the Stitch screen to the agent, which fetches the HTML and screenshot via the Stitch MCP, maps HTML elements to React Native primitives like View, Text, and Pressable, and generates typed components organized by Atomic Design with StyleSheet styling.

How to convert CSS and Tailwind styles to React Native StyleSheet?▼

CSS and Tailwind classes do not work in React Native, so all styles are converted to StyleSheet.create() calls. Flexbox properties map directly, colors are extracted from the Tailwind config into a theme.ts file, and shadows use Platform.select() for iOS and Android differences.

Does React Native support HTML elements like div and img?▼

No, React Native has no HTML elements. The mapping rules convert div to View, text elements to Text, img to Image, button to Pressable, and input to TextInput. The validation script fails if any HTML tags remain in generated components.

Why does the Stitch design download fail with internal fetch tools?▼

Internal AI fetch tools can fail on Google Cloud Storage domains due to redirects and security handshakes. The skill uses a curl-based bash script with redirect following and compression to reliably download the HTML and full-resolution screenshots.

What does the component validation script check for?▼

The AST validator parses TypeScript with SWC and checks three rules: an exported Props interface ending in 'Props', no hardcoded hex or rgba color values, and no HTML elements used as JSX tags. It exits with an error if any check fails.

When should I use FlatList instead of ScrollView in React Native?▼

Use FlatList for long or dynamic lists since it virtualizes rendering, and reserve ScrollView for short static content. Nesting a FlatList inside a ScrollView triggers a VirtualizedList warning, so use ListHeaderComponent instead.

Related Skills

Explore More Software Engineering Skills→
tranhoainam298tranhoainam298
1

design-md

Analyzes Stitch project screens and generates a semantic DESIGN.md design system document.

Community
Intermediate
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
alejandro-technologyalejandro-technology

accessibility

Enforce accessibility best practices in React Native apps via lint and runtime checks.

Community
Advanced
Javeria-JavaidJaveria-Javaid

gradient-design

Implements animated gradient backgrounds, gradient text, and gradient borders across web and mobile frameworks.

Community
Intermediate