102.7K+Download
Skip to the usage guide
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
Download OpenDesignView usage guide
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 converts Stitch HTML/CSS designs into React Native components using StyleSheet, or updates native components to match newer Stitch designs. It retrieves screen metadata, downloads or explicitly reuses design files, visually audits screenshots, extracts theme tokens and maps the layouts to native primitives. Production readiness still requires project compilation and device testing.

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

  1. 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.

  2. 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.

  3. 03
    Audit Each Screenshot

    Open the downloaded PNG to confirm design intent and layout details rather than assuming what the design looks like.

  4. 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.

  5. 05
    Draft from the Template

    Start each component from resources/component-template.tsx and find and replace every instance of the placeholder component name.

  6. 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

  • Stitch project and target appProvide the Stitch project identifier, the React Native project path and the screens or update you need. Connected Stitch tools must be available; the agent discovers their namespace.
  • Existing design files, if anyPoint to local design snapshots if you have them and decide whether to refresh or reuse them when asked. Screen dimensions and download URLs come from Stitch metadata, not manual transcription.
  • 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.

  1. No Shortcutting Retrieval

    Retrieve metadata through Stitch MCP and visually audit each screen. Download missing designs through the provided script; when local files exist, ask whether to refresh them or reuse them rather than overwriting them automatically.

  2. 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.

  3. 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.

  4. Export a Readonly Props Interface

    Every component file, screens included, must export an interface named [ComponentName]Props with readonly modifiers, or validation fails.

  5. 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.

  6. 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.

  7. Leave Google Headers Out

    Generated components follow the target project's conventions and must not carry Google license headers.

  8. 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.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

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

  • With permission, run the validator against each component and screen .tsx file; report validation as unperformed if permission is not granted.
  • With permission, run the TypeScript compiler in no-emit mode. Do not describe uncompiled or untested output as production-ready.
  • 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 check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead 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

  1. Phase 1: Retrieval and networkingFind the MCP prefix, fetch every screen, download HTML and screenshots by script, audit visually, save metadata.
  2. Phase 2: Theme extractionPull tailwind.config color, font, spacing, radius and typography tokens into src/theme.ts.
  3. Phase 3: Architectural rules and HTML mappingMap HTML tags to primitives, convert CSS to StyleSheet, follow Atomic Design, hook, theme and accessibility rules.
  4. Phase 4: Execution stepsInstall dependencies, build theme, data and components from the template, wire navigation, then optionally validate with permission.
  5. 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?

The workflow still requires Stitch MCP metadata lookup; it is not a standalone local-HTML converter. If the design HTML and screenshots already exist, however, it explicitly asks whether to refresh or reuse them. Reuse does not remove the screenshot audit or metadata requirements.

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.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

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