stitch::react-nativeby Google Labs

Stitch React Native Skill.

A Claude Code and Codex skill for mobile app design: converts or syncs Stitch HTML designs to React Native components.

Mobile Apps
UI code

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-native/SKILL.mdSKILL.md

--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps

Front matter and section headings read from the upstream file on 2026-09-14 · 12,389 characters in full

01 What it does

What the stitch::react-native Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill turns Stitch HTML/CSS web designs into production-ready React Native components using StyleSheet, and can also sync existing native components back to the latest Stitch designs. It runs in four gated phases: download every screen with scripts/fetch-stitch.sh and visually audit each screenshot, extract tailwind.config tokens into src/theme.ts, map HTML elements and CSS onto React Native primitives under strict architectural rules, then draft components from resources/component-template.tsx.

Components follow Atomic Design folders under src/components/, logic lives in src/hooks/, content in src/data/mockData.ts, and every component file exports a readonly [ComponentName]Props interface. Validation via npm run validate and tsc --noEmit is optional and requires the user's permission.

What it produces

src/theme.ts, a TypeScript token file holding the colors, spacing and typography extracted from the design's tailwind.config.
src/data/mockData.ts, holding all static text, image URLs and lists so no content is hardcoded in components.
Custom hooks under src/hooks/ that absorb event handlers, API calls and business logic, leaving components to render only.
A .stitch/metadata.json file written inside the app folder and mirrored in the workspace root.

See the example prompt ↗

How It Works

01
Discover the MCP Namespace
Run list_tools to find the Stitch MCP prefix, then reuse that prefix for every later call in the session.
02
Download Through the Script
Internal fetch tools can fail on Google Cloud Storage domains, so HTML and screenshots come down via scripts/fetch-stitch.sh, which handles redirects and security handshakes.
03
Audit Each Screenshot
Open the downloaded PNG to confirm design intent and layout details rather than assuming what the design looks like.
04
Extract the Theme
Read the tailwind.config object inside each HTML head script block for colors, fonts, spacing, radii and typography, then write them to src/theme.ts as TypeScript constants.
05
Draft from the Template
Start each component from resources/component-template.tsx and find and replace every instance of the placeholder component name.
06
Record Sync Metadata
Save project configuration to .stitch/metadata.json with a Last Sync Time field matching the current sync execution time.

02 Find your fit

When to Use the stitch::react-native Skill

Use the stitch::react-native skill in Claude Code or Codex when the job is mobile app design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

An existing React Native app whose components have drifted and need to be brought back in line with the newest Stitch designs.
A multi-screen Stitch project that needs a NavigationContainer with a stack or tab navigator wired up in App.tsx.
A design whose shadows must look correct on both platforms, handled with Platform.select for iOS shadow props and Android elevation.
Teams that want the output run against a written architecture checklist before calling the work finished.

Know the Boundaries

Designs that rely on CSS hover, transition or animation effects: hover and transition have no equivalent and animations belong in react-native-reanimated.
Dropdown or select fields from the web design, since React Native ships no built-in select and needs a third-party picker or custom modal.
Web image expectations: a React Native Image has no intrinsic size, so width and height or an aspectRatio must always be given.

What to Provide

The Stitch project and its MCP prefixThe agent runs list_tools to find the Stitch MCP prefix and reuses it for all get_screen and get_project calls.
The screen's width valueScreenshot URLs need =w{width} appended using the width from the screen metadata, because Google's CDN otherwise serves low-res thumbnails.
Consent for validation and running the appPermission is required before starting the packager or kicking off visual simulator audits to check the app renders on a device.

03 Inside the skill

Rules the stitch::react-native Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

No Shortcutting Retrieval
Phase 1 only counts as complete once all screens are downloaded through the script and visually audited; reading local design files without calling the MCP get_screen first is prohibited.
Ask Before Refreshing Designs
If .stitch/designs/{page}.html and .png already exist, the agent must ask whether to refresh from the Stitch project or reuse the local files, and only re-download on confirmation.
No Raw Colors in Components
Color hex codes and rgba strings are banned from component files; every color, spacing and font size value must come from src/theme.ts.
Export a Readonly Props Interface
Every component file, screens included, must export an interface named [ComponentName]Props with readonly modifiers, or validation fails.
Safe Areas from the Right Package
Top-level screens wrap in SafeAreaView from react-native-safe-area-context, not the default one shipped by react-native.
Split into Atomic Design Files
Components go into src/components/atoms/, molecules/ and organisms/; putting the whole UI in one page or screen file is forbidden.
Leave Google Headers Out
Generated components follow the target project's conventions and must not carry Google license headers.
Permission Before Testing
Validation scripts, packagers and simulator audits are never started unilaterally; the agent must ask the user's permission first.

04 Put it to work

Install stitch::react-native in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch::react-native to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

Generic skills CLI form for plugins/stitch-build/skills/react-native/SKILL.md; the repository may document its own path.

Give the Skill a First Mobile App Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Run the validator against every .tsx file in components and screens to report component validity.
Run the TypeScript compiler in no-emit mode to confirm the project still compiles.
Confirm the colors and fonts in src/theme.ts really match what came out of the HTML design.
Check that no raw text sits outside a Text component, because React Native crashes on that.

In OpenDesign import stitch::react-native from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill file: plugins/stitch-build/skills/react-native/SKILL.md Content checksum recorded at verification; commit 0337446
License: Apache-2.0 From LICENSE.
Repository stars: 8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::react-native.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Phase 1: Retrieval and networkingFind the MCP prefix, fetch every screen, download HTML and screenshots by script, audit visually, save metadata.
Phase 2: Theme extractionPull tailwind.config color, font, spacing, radius and typography tokens into src/theme.ts.
Phase 3: Architectural rules and HTML mappingMap HTML tags to primitives, convert CSS to StyleSheet, follow Atomic Design, hook, theme and accessibility rules.
Phase 4: Execution stepsInstall dependencies, build theme, data and components from the template, wire navigation, then optionally validate with permission.
TroubleshootingFixes for fetch errors, validation failures, unwrapped text, image sizing and VirtualizedList warnings.

The Skill's Own Description

“- Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.”

Front-matter description from SKILL.md. The full file is about 12,389 characters. Read the full file on GitHub.

06 Before you install

Questions About the stitch::react-native Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Can I skip the Stitch MCP and just hand it the local HTML files?

No. Phase 1 requires every screen to be fetched through get_screen and downloaded with scripts/fetch-stitch.sh before anything is read, and reading the local design HTML directly without calling get_screen first is listed as an anti-pattern.

Does this only scaffold new screens, or can it update an app I already have?

It does both. Alongside converting fresh Stitch HTML into components, the skill syncs and updates existing native components so they match the latest Stitch designs.

Will it launch a simulator or packager on its own to check the result?

Not by default. Phase 4 verification, audits and simulator or packager testing are optional, and the agent has to get your permission before running validation scripts, starting a packager or starting simulator audits.

Stitch React Native

Run stitch::react-native on a Real Mobile App Design Task.

Download OpenDesign, import stitch::react-native from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills