Skip to content
Get packs

Guide · Agent skill

How to use the React Native from Stitch Designs agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

This guide explains the React Native from Stitch Designs agent skill (skill name stitch::react-native). It is for mobile developers and designers who already have a Stitch design and want an agent to rebuild it as React Native screens. By the end you will know what the skill does, how to install it, how to ask for it in plain language, and what it needs to run.

React Native from Stitch Designsgoogle-labs-code/stitch-skills · Apache-2.0

Quick start

  1. 1Install the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings, Capabilities, Skills.
  2. 2Connect the Stitch MCP server. Make sure the agent can reach your Stitch project so it can call get_screen and get_project.
  3. 3Check the tools. Confirm curl and Node.js with npm are available on your machine.
  4. 4Make a request. Ask for a named screen from your Stitch project, such as converting your Login screen to React Native components.
  5. 5Answer the refresh question. If designs were downloaded before, the agent will ask whether to refresh them from Stitch or reuse the local files. Only a confirmed refresh re-downloads.
  6. 6Review the output. Check the generated components, theme file and screenshots against the design, then run the validator with npm run validate.
  7. 7Test on devices. Run the app on real devices, since the generated code still needs testing.

What is an agent skill and what does this one do?

An agent skill is a folder of instructions, and sometimes scripts, that an AI agent such as Claude loads when a task matches it. This skill covers one job: converting designs exported from Google's Stitch design tool into React Native components.

The agent takes Stitch HTML designs and rebuilds them with React Native primitives such as View, Text and Pressable, styled with StyleSheet, instead of HTML and Tailwind. It downloads each screen's HTML and screenshot with a bundled script, pulls colour and typography tokens into a theme file, and can update existing native components when the Stitch design changes.

  • Retrieves screen HTML and screenshots through scripts/fetch-stitch.sh.
  • Extracts tokens from the tailwind.config in each design's head into src/theme.ts.
  • Maps HTML elements to React Native components and converts styles to StyleSheet.create().
  • Organises output into atoms, molecules and organisms, with logic moved into hooks.
  • Runs scripts/validate.js to check components against its architectural rules.

How do you install the React Native Stitch skill?

Download the skill ZIP from this page and unzip it. To make it available to all your projects, unzip it into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder.

If you use the Claude apps instead, open Settings, then Capabilities, then Skills, and upload the ZIP there.

The skill's README also lists a command-line install using the skills tool from the google-labs-code/stitch-skills repository, with the --global flag. Use it only if you are comfortable running that tool.

npx skills add google-labs-code/stitch-skills --skill react-native --global

What do you need before you start?

The skill has several requirements. Check them before you ask for a conversion, because the workflow fails without them.

  • A Stitch MCP server connection, used for get_screen and get_project calls.
  • curl, which scripts/fetch-stitch.sh uses to download files.
  • Node.js with npm, for the validate script and its @swc/core dependency.
  • A React Native project for the output to go into.
  • A Stitch project with the screens you want to convert.

How do you trigger the skill with a natural request?

You do not need a special command. Describe the screen you want in plain language and name the Stitch project. The README gives this example prompt.

To update existing native components, say so directly, for example that the Stitch design changed and the matching components should be re-aligned. The skill's description covers both creating new components and syncing existing ones.

  • Convert my Login screen in my Stitch Project to React Native components.
  • Sync the native components for my Home screen with the latest Stitch design.
  • Convert all screens in my Stitch project to React Native and extract the theme.

What happens during a conversion?

The skill runs in phases, and each phase has a gate that must be met before the next one starts. The gates are written as mandatory, so the agent should not skip them.

First it retrieves every screen with get_screen and downloads the files. If files from an earlier run already exist in .stitch/designs/, the agent must ask whether to refresh them or reuse them. It then views each screenshot. Next it extracts theme tokens into src/theme.ts and avoids hardcoded hex colours inside component styles. Last it maps elements to React Native components and follows the architectural rules, which the validator checks.

  • Output lives in src/components/ (atoms, molecules, organisms), src/hooks/ and src/data/mockData.ts.
  • Text must sit inside Text components, and interactive elements use Pressable.
  • Monolithic screen files are not allowed.

What are the safety notes for scripts and network use?

This skill runs scripts and uses the network. Its own description says so. The download script calls curl against Google Cloud Storage URLs taken from your Stitch project metadata, and the validate script runs through npm.

Read SKILL.md and the scripts before you install a skill from any source. Run conversions in a project under version control so you can review every change the agent makes.

  • scripts/fetch-stitch.sh makes network requests with curl.
  • scripts/validate.js and its @swc/core dependency are run with Node.js.
  • The allowed tools include Bash, Read, Write, and web_fetch, plus Stitch MCP tools.

What people use it for

  • Turning a Stitch login or onboarding prototype into a first-pass React Native screen for a developer to refine.
  • Re-aligning existing native components after a designer updates the Stitch design.
  • Extracting colour and typography tokens from a Stitch project into a shared src/theme.ts.
  • Giving a designer a faithful native preview of a web prototype for review.

Frequently asked questions

Is the React Native Stitch skill free?

The skill is published under the Apache-2.0 licence. The source does not cover pricing for Stitch or Claude, so check those services directly.

What do I need to use the stitch react native skill?

You need a Stitch MCP server connection, curl, Node.js with npm, a React Native project and a Stitch project with screens. The skill also runs scripts and uses the network.

How do I install a Claude agent skill from a ZIP?

Unzip the download into ~/.claude/skills/ for all projects or into a project's .claude/skills/ folder for one project. In the Claude apps, upload the ZIP under Settings, Capabilities, Skills.

Does the skill write production-ready code?

Not on its own. The generated code still needs testing on real devices, and the skill's steps can drift from the design, so human review is needed before production use.

Does this skill work with Flutter or plain web projects?

No. The workflow is specific to Stitch designs and React Native, so projects using other frameworks or no Stitch designs will not benefit.

Why does the skill ask before re-downloading designs?

If .stitch/designs/ already has files for a page, the skill must ask whether to refresh from the Stitch project or reuse the local copies. It only re-downloads when you confirm.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are a mobile developer or designer who wants a faithful first pass from a Stitch design into React Native, or who needs existing native screens re-aligned after a design change. Pick something else if your project does not use Stitch or React Native, or if you want code that goes straight to production without review and device testing.

Download the skill