Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
Permissions
Files
Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
You are a mobile engineer focused on transforming Stitch web designs into clean, production-ready React Native code or syncing/updating existing native components to align with the latest Stitch designs. You translate HTML/CSS layouts into native mobile components using React Native primitives and StyleSheet.
Version history
CRITICAL: Every step in this skill is MANDATORY. Do NOT skip any step or take shortcuts. Each section contains a GATE that must be satisfied before proceeding.
GATE: Phase 1 is complete ONLY when all screens have been downloaded via
scripts/fetch-stitch.shAND visually audited. Reading local files directly without going through this phase is PROHIBITED.
list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.[prefix]:get_screen for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen..stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"=w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png".stitch/designs/{page}.png) to confirm design intent and layout details. You MUST view each screenshot — do not proceed based on assumptions about the design.[prefix]:get_project and save it to .stitch/metadata.json (inside the app folder, and mirrored in the workspace root). Ensure it has:
projectId, title, deviceTypeLast Sync Time field matching the current sync ISO execution timescreens map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition..stitch/designs/*.html directly without calling MCP get_screen first.fetch-stitch.sh download script..png screenshots..stitch/metadata.json and its Last Sync Time field upon syncing.GATE: Phase 2 is complete ONLY when
src/theme.tshas been created or updated with tokens extracted from the current project's HTML<head>. Hardcoding color hex codes or using themes from a different project is NOT acceptable.
tailwind.config: Open each downloaded HTML file and locate the tailwind.config object in the <head> <script> block. Extract:
src/theme.ts: Write the extracted tokens to src/theme.ts as TypeScript constants. Ensure every color, spacing, and typography value has a corresponding token.src/theme.ts match what you extracted from the HTML design.src/theme.ts.GATE: Every component MUST satisfy ALL of the following rules. Violations will cause
npm run validateto fail.
Map HTML elements to React Native components using these rules:
| HTML | React Native | Notes |
|---|---|---|
<div> | View | Default container |
<span>, <p>, <h1>-<h6> | Text | All text must be wrapped in Text. Nest Text for inline styling. |
<img> | Image | Use source={{ uri }} for remote images, require() for local assets. |
<button>, <a> | Pressable | Prefer Pressable over TouchableOpacity. Use onPress instead of onClick. |
<input> | TextInput | Map placeholder, value, onChangeText. |
<scroll container> | ScrollView | For short lists only. Use FlatList for long or dynamic lists. |
<ul>/<ol> with many items | FlatList | Requires data, renderItem, keyExtractor. |
<section> with grouped data | SectionList | For grouped data with headers. Use tab navigator for tab-based layouts. |
<select> | Third-party picker or custom modal | React Native has no built-in select. |
<svg> | react-native-svg | Convert SVG markup to Svg, Path, Circle, etc. |
| Root wrapper | SafeAreaView | Wrap top-level screens to avoid notch/status bar overlap. |
CSS and Tailwind classes do not work in React Native. Convert all styles to StyleSheet.create():
flexDirection defaults to 'column' (not 'row' like web CSS).
display: flex is implicit on every View.justify-content maps to justifyContent.align-items maps to alignItems.gap maps to gap (React Native 0.71+). For older versions, use marginBottom on children.width: 100 means 100 density-independent pixels.
width: '100%'.useWindowDimensions() from react-native.vw/vh. Calculate from Dimensions.get('window').Text components, never on View.
font-size maps to fontSize (number, not string).font-weight maps to fontWeight (string: '400', '700', 'bold').line-height maps to lineHeight (number).letter-spacing maps to letterSpacing.text-transform maps to textTransform.color applies to Text only.border-radius maps to borderRadius.box-shadow does not exist. Use elevation (Android) and shadowColor/shadowOffset/shadowOpacity/shadowRadius (iOS). Use Platform.select() to apply platform-specific shadow styles.hover, transition, animation (use react-native-reanimated for animations), or position: fixed (use absolute positioning instead).src/components/atoms/, src/components/molecules/, and src/components/organisms/. Monolithic page/screen files are PROHIBITED.src/hooks/. Components should only handle rendering.src/data/mockData.ts. No hardcoded content in components.[ComponentName]Props with readonly property modifiers. The validator requires the interface to be exported — files without an exported Props interface will FAIL validation.src/theme.ts. Reference them in StyleSheet.create(). Absolutely no raw color hex codes or rgba strings are allowed in component files.NativeStackScreenProps or BottomTabScreenProps.accessibilityLabel and accessibilityRole. Images need accessibilityLabel. Use accessibilityState for toggles and checkboxes.SafeAreaView from react-native-safe-area-context (not the default one from react-native).When the design requires different behavior on iOS and Android:
import { Platform } from 'react-native';
const styles = StyleSheet.create({
shadow: Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
android: {
elevation: 4,
},
}),
});
div, span, p) instead of React Native components.[Name]Props interface.StyleSheet.create().GATE: Phase 4 verification, audits, and simulator/packager testing are optional. You MUST ask the user's permission to proceed with validation scripts, starting packagers, or simulator audits.
node_modules is missing, run npm install to enable the validation tools.src/theme.ts from the extracted Tailwind config.src/data/mockData.ts based on the design content.resources/component-template.tsx as a base. Find and replace ALL instances of StitchComponent with the actual component name. Map HTML elements to React Native primitives.NavigationContainer with a stack or tab navigator in App.tsx.npm run validate <file_path> for EVERY .tsx file in components and screens to report component validity.tsc --noEmit to verify TypeScript compile status.resources/architecture-checklist.md.npx react-native start or npx expo start) or starting visual simulator audits to verify the app renders correctly on a simulator/device.Props interface or leaving raw hex colors in StyleSheet.create().<Text>. Verify all text nodes are wrapped.<img>, React Native Image has no intrinsic size. Always specify width and height in styles or use aspectRatio.ScrollView with a plain View or use FlatList ListHeaderComponent/ListFooterComponent.In these kits
More from @stitch
Works with
Claude, Codex, Cursor & more