What is the stitch-react-native skill?
The stitch-react-native skill is one of the Stitch skills in google-labs-code/stitch-skills. It makes an AI coding agent download Stitch screens through the Stitch MCP server, pull theme tokens from the Tailwind config inside each HTML file, and rebuild every screen as React Native components styled with StyleSheet.
The stitch-react-native skill lives in the stitch-build plugin of Google's stitch-skills repository. Its SKILL.md casts the agent as a mobile engineer who translates HTML and CSS from Stitch into React Native primitives and StyleSheet, or syncs components that already exist.
It needs the Stitch MCP server. The work runs in four phases, retrieval, theme extraction, architecture rules and execution, and each phase ends with a gate that must be satisfied before the agent moves on.
What changes in your agent's output
- Screens arrive through the skill's fetch-stitch.sh script, not the agent's own fetch tools, and the agent must look at each downloaded screenshot before it writes code.
- Colors, fonts, spacing and radii come from the tailwind.config block in each HTML head and land in src/theme.ts. Raw hex codes in components are not allowed.
- Components are split into atoms, molecules and organisms, with logic in custom hooks and static content in src/data/mockData.ts.
- Every component file exports a readonly [ComponentName]Props interface, and every interactive element gets an accessibilityLabel and accessibilityRole.
- A .stitch/metadata.json file records the project, its screens and a Last Sync Time, so a later sync knows what changed.
How HTML maps to React Native
| HTML | React Native | Rule from the skill |
|---|---|---|
| div | View | Default container |
| span, p, h1 to h6 | Text | All text must sit inside Text |
| button, a | Pressable | Preferred over TouchableOpacity, with onPress |
| ul or ol with many items | FlatList | Needs data, renderItem and keyExtractor |
| svg | react-native-svg | Convert markup to Svg, Path and Circle |
| Root wrapper | SafeAreaView | From react-native-safe-area-context |
Who the stitch-react-native skill is for
Best for
- Teams that already design screens in Stitch and want a mobile codebase that follows one structure.
- Projects that need to re-sync components after the Stitch design changes.
- Developers who want theme tokens in one file instead of hex codes scattered through StyleSheet blocks.
Not for
- Web React output. The same README lists stitch-react-components for React component systems.
- Designs that did not come from a Stitch project, because the first phase pulls screens through the Stitch MCP server.
- Deciding how a native app should feel. Related: building-native-ui.
Use it with UiChemy
This skill produces a mobile codebase, not WordPress output. If a web version of the same design should end up as an editable WordPress site, UiChemy can take it in through Figma, Composer or AI to WordPress. Click Get Started on uichemy.com.
How to install Stitch React Native Skill: Turn Stitch Designs into Native Components
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeSet up the Stitch MCP server
The skills need the Stitch MCP server registered in your agent with its credentials. Follow the Stitch MCP setup guide at https://stitch.withgoogle.com/docs/mcp/setup/ first.
Install the plugins
For Claude Code, run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. For Cursor, change the flags to--scope workspace --target cursor. This skill sits in the stitch-build plugin.Install through Codex instead
Codex users add the repository as a plugin marketplace with
codex plugin marketplace add google-labs-code/stitch-skills --ref main, then install the stitch-build plugin.Run it on a project
Ask your agent to convert a Stitch project to React Native components with a theme and navigation. The skill's own example prompt is to sync the app to the latest updates of a Stitch project.
Check that it loaded
Ask the agent to convert one Stitch screen. It should list the MCP tools to find the Stitch prefix, call get_screen, download the screen with fetch-stitch.sh and then write src/theme.ts.
Key features
- Four gated phasesRetrieval, theme extraction, architecture rules and execution each end with a gate. The SKILL.md marks every step as mandatory, so the agent cannot skip ahead.
- Scripted screen downloadScreens are fetched with scripts/fetch-stitch.sh because the skill says internal fetch tools can fail on Google Cloud Storage domains. The screenshot URL gets a width suffix for full resolution.
- Ask before reusing filesIf .stitch/designs already holds a page, the agent must ask whether to refresh it from the Stitch project or reuse the local copy.
- Theme from the designTokens come from the tailwind.config object in each HTML file and are written to src/theme.ts as TypeScript constants. Tokens from a previous project are an anti-pattern.
- Element and style mappingThe skill maps div to View, text tags to Text and inputs to TextInput. CSS shadows become elevation on Android and shadow props on iOS through Platform.select.
- Atomic component structureAtoms, molecules and organisms live in separate folders under src/components. A single monolithic screen file is listed as prohibited.
- Typed props and mock dataEach component exports a readonly Props interface, and all static text, image URLs and lists move into src/data/mockData.ts.
- Accessibility propsInteractive elements need accessibilityLabel and accessibilityRole, images need accessibilityLabel, and toggles use accessibilityState.
- Optional validationThe agent can run npm run validate on every component file and tsc --noEmit, but it must ask your permission before validation, packagers or simulator audits.
Frequently asked questions
What is the stitch-react-native skill?
It is a skill in the stitch-build plugin of google-labs-code/stitch-skills. It tells an AI coding agent to convert Stitch HTML designs into React Native components that use StyleSheet, a shared theme file and typed props, or to sync existing components with the latest Stitch designs.
How do I install the stitch-react-native skill?
Register the Stitch MCP server, then run the repository's plugin install command, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repository as a plugin marketplace instead. The skill ships in the stitch-build plugin.
Does the skill need the Stitch MCP server?
Yes. The README lists the Stitch MCP server as a prerequisite, and the first phase of the skill calls get_screen and get_project through it. Without that server the agent cannot retrieve screens or project metadata, so nothing downstream can run.
Which AI coding agents can use the stitch-react-native skill?
The repository README says the skills are compatible with agents such as Codex, Antigravity, Gemini CLI, Claude Code and Cursor, with OpenCode supported through a manual install. OpenCode also needs the skill renamed to lowercase kebab-case, because the stitch:: prefix is not accepted there.
What does the skill do with colors and fonts?
It reads the tailwind.config object in the head of each downloaded HTML file and writes colors, font families, spacing, radii and font sizes into src/theme.ts. Components must then reference those tokens. Hardcoded hex codes and rgba strings in StyleSheet blocks are listed as anti-patterns.
How does the skill handle later design changes?
It keeps a .stitch/metadata.json with the project ID, screens and a Last Sync Time. The README's example prompt asks the agent to sync the app to the latest updates of a Stitch project, and the skill describes syncing existing native components to match.
Does the skill run the app on a simulator?
Not by default. Validation, tsc checks, starting a packager and simulator audits are optional, and the skill says the agent must ask your permission before any of them. It does tell the agent not to call the task done without checking that the code compiles.
What is the difference between stitch-react-native and stitch-react-components?
Both start from Stitch screens. The react-native skill targets native mobile code with View, Text and StyleSheet, while the README describes stitch-react-components as the route to React component systems for the web. Pick by where the app will run.