What does the Stitch::React Native AI skill do?

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

Why use Stitch::React Native on TypingMind?

Because you install it once and use it with any model. Stitch::React Native is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Stitch::React Native in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-native. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Stitch::React Native?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Stitch::React Native?

As many as you like. As long as a model supports skills, you can use Stitch::React Native with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Stitch::React Native AI skill free?

Yes. It is published on GitHub by google-labs-code under the Apache-2.0 license. You only pay your own AI provider for the tokens you use.

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Stitch::React Native by google-labs-code — AI Skill for Any LLM

Stitch to React Native Components

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.

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.

Phase 1: Retrieval and networking

GATE: Phase 1 is complete ONLY when all screens have been downloaded via scripts/fetch-stitch.sh AND visually audited. Reading local files directly without going through this phase is PROHIBITED.

Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
Metadata fetch: Call [prefix]:get_screen for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen.
Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
- If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. You MUST ask — do not assume. Only re-download if the user confirms.
- If files do not exist: Proceed to step 4.
High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains. You MUST use the provided script.
- HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
- Screenshot: Append =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"
- This script handles the necessary redirects and security handshakes.
Visual audit: Review the downloaded screenshot (.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.
Project metadata tracking: Retrieve project configuration using [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, deviceType
- A Last Sync Time field matching the current sync ISO execution time
- A screens map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition.

Anti-patterns for Phase 1

❌ Reading .stitch/designs/*.html directly without calling MCP get_screen first.
❌ Skipping the fetch-stitch.sh download script.
❌ Not asking the user when existing files are found.
❌ Skipping the visual audit of .png screenshots.
❌ Failing to generate or update .stitch/metadata.json and its Last Sync Time field upon syncing.

Phase 2: Theme extraction

GATE: Phase 2 is complete ONLY when src/theme.ts has 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.

Extract tailwind.config: Open each downloaded HTML file and locate the tailwind.config object in the <head> <script> block. Extract:
- All color tokens
- Font families
- Spacing values
- Border radius values
- Font size/typography tokens
Create/Sync 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.
Verify theme: Confirm the theme colors and fonts in src/theme.ts match what you extracted from the HTML design.

Anti-patterns for Phase 2

❌ Hardcoding color hex codes or rgba strings directly inside component StyleSheet declarations.
❌ Using theme tokens from a previous project without extracting them from the new design.
❌ Skipping the creation/update of src/theme.ts.

Phase 3: Architectural rules and HTML mapping

GATE: Every component MUST satisfy ALL of the following rules. Violations will cause npm run validate to fail.

Element mapping

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.

Style mapping

CSS and Tailwind classes do not work in React Native. Convert all styles to StyleSheet.create():

Layout: Flexbox is the default layout system. 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.
Dimensions: Use numbers (not strings). width: 100 means 100 density-independent pixels.
- Percentage strings are supported: width: '100%'.
- For responsive sizing, use useWindowDimensions() from react-native.
- There is no vw/vh. Calculate from Dimensions.get('window').
Typography: All text styles must be on 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.
Borders and shadows:
- 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.
Unsupported CSS properties: Do not use hover, transition, animation (use react-native-reanimated for animations), or position: fixed (use absolute positioning instead).

Architectural Rules

Modular components (Atomic Design): Break the design into independent files. Organize components as atoms (buttons, labels, icons), molecules (input groups, cards), and organisms (headers, lists, forms). Place them in src/components/atoms/, src/components/molecules/, and src/components/organisms/. Monolithic page/screen files are PROHIBITED.
Logic isolation: Move event handlers, API calls, and business logic into custom hooks in src/hooks/. Components should only handle rendering.
Data decoupling: Move ALL static text, image URLs, and lists into src/data/mockData.ts. No hardcoded content in components.
Type safety: EVERY component file (including screens) MUST export a TypeScript interface named [ComponentName]Props with readonly property modifiers. The validator requires the interface to be exported — files without an exported Props interface will FAIL validation.
No hardcoded styles: Extract colors, spacing, and font sizes into src/theme.ts. Reference them in StyleSheet.create(). Absolutely no raw color hex codes or rgba strings are allowed in component files.
Navigation: Use React Navigation for screen transitions. Define screen types with NativeStackScreenProps or BottomTabScreenProps.
Accessibility: Every interactive element must have accessibilityLabel and accessibilityRole. Images need accessibilityLabel. Use accessibilityState for toggles and checkboxes.
Safe areas: Wrap top-level screen components with SafeAreaView from react-native-safe-area-context (not the default one from react-native).
Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated components.

Platform-specific code

When the design requires different behavior on iOS and Android:

typescript
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,
    },
  }),
});

Anti-patterns for Phase 3

❌ Putting all UI in a single monolithic screen file.
❌ Using HTML tags (like div, span, p) instead of React Native components.
❌ Inline event handlers or business logic without custom hooks.
❌ Hardcoding text, URLs, or colors in component files.
❌ Components without an exported [Name]Props interface.
❌ Using raw hex color values or rgba strings in StyleSheet.create().

Phase 4: Execution steps

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.

Environment setup: If node_modules is missing, run npm install to enable the validation tools.
Theme layer: Create src/theme.ts from the extracted Tailwind config.
Data layer: Create src/data/mockData.ts based on the design content.
Component drafting: Use 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.
Navigation wiring: If the design has multiple screens, set up a NavigationContainer with a stack or tab navigator in App.tsx.
Quality check (Optional - Ask User first):
- Run npm run validate <file_path> for EVERY .tsx file in components and screens to report component validity.
- Run tsc --noEmit to verify TypeScript compile status.
- Check output against resources/architecture-checklist.md.
- Obtain permission before starting the packager (npx react-native start or npx expo start) or starting visual simulator audits to verify the app renders correctly on a simulator/device.

Anti-patterns for Phase 4

❌ Launching packagers or simulators without user consent.
❌ Declaring task "done" without verifying code compiles.

Troubleshooting

Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles. The most common failures are missing an exported Props interface or leaving raw hex colors in StyleSheet.create().
Text outside Text component: React Native crashes if raw strings appear outside <Text>. Verify all text nodes are wrapped.
Image sizing: Unlike web <img>, React Native Image has no intrinsic size. Always specify width and height in styles or use aspectRatio.
FlatList vs ScrollView: If you see a "VirtualizedList inside ScrollView" warning, replace the outer ScrollView with a plain View or use FlatList ListHeaderComponent/ListFooterComponent.

Publisher	google-labs-code
Repository	`stitch-skills`
Skill name	`stitch::react-native`
Stars	8.3K
Forks	1.1K
Bundled files	7
License	Apache-2.0
Links	Skill source Repository Homepage

Stitch::React Native

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Stitch to React Native Components

Phase 1: Retrieval and networking

Anti-patterns for Phase 1

Phase 2: Theme extraction

Anti-patterns for Phase 2

Phase 3: Architectural rules and HTML mapping

Element mapping

Style mapping

Architectural Rules

Platform-specific code

Anti-patterns for Phase 3

Phase 4: Execution steps

Anti-patterns for Phase 4

Troubleshooting

Bundled files

Frequently asked questions

Set up your own AI workspace now

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Stitch to React Native Components

Phase 1: Retrieval and networking

Anti-patterns for Phase 1

Phase 2: Theme extraction

Anti-patterns for Phase 2

Phase 3: Architectural rules and HTML mapping

Element mapping

Style mapping

Architectural Rules

Platform-specific code

Anti-patterns for Phase 3

Phase 4: Execution steps

Anti-patterns for Phase 4

Troubleshooting

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now