google-labs-code · ademakdogan · Jun 2, 2026
diff --git a/skills/react-native/SKILL.md b/skills/react-native/SKILL.md
@@ -15,7 +15,7 @@ You are a mobile engineer focused on transforming Stitch web designs into clean,
 
 ## Retrieval and networking
 1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
-2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.
+2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON. See `resources/stitch-api-reference.md` for the metadata schema and React Native-specific mapping rules.
 3. **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. Only re-download if the user confirms.
    - **If files do not exist**: Proceed to step 4.
@@ -78,7 +78,7 @@ CSS and Tailwind classes do not work in React Native. Convert all styles to `Sty
 - `z-index` works but only between sibling views.
 - `opacity` works. `visibility: hidden` does not exist; use conditional rendering or `opacity: 0`.
 
-**Color extraction**: Extract the Tailwind config from the HTML `<head>`. Map color tokens to a `theme.ts` constants file instead of hardcoding hex values in StyleSheet.
+**Color extraction**: Extract the Tailwind config from the HTML `<head>`. Map color tokens to a `theme.ts` constants file instead of hardcoding hex values in StyleSheet. Use `resources/style-guide.json` as the starting set of design tokens (colors, spacing, typography, border radii) and sync the extracted values into it before generating the theme.
 
 ### Platform-specific code
 When the design requires different behavior on iOS and Android:

diff --git a/skills/react-native/resources/stitch-api-reference.md b/skills/react-native/resources/stitch-api-reference.md
@@ -0,0 +1,15 @@
+# Stitch API reference
+
+This document describes the data structures returned by the Stitch MCP server, with notes specific to the React Native target.
+
+### Metadata schema
+When calling `get_screen`, the server returns a JSON object with these key properties:
+* **htmlCode**: Contains a `downloadUrl`. This is a signed URL that requires a system-level fetch (`scripts/fetch-stitch.sh`) to handle redirects and security handshakes.
+* **screenshot**: Includes a `downloadUrl` for the visual design. Append `=w{width}` to the URL (using the screen's `width` value) before downloading, since the CDN serves low-res thumbnails by default. Use the screenshot to verify layout intent that the raw HTML does not make obvious.
+* **width**: The base layout width of the design. Treat this as a reference for proportions only — do not hardcode it. React Native uses density-independent pixels, so derive responsive sizes from `useWindowDimensions()` or `Dimensions.get('window')` rather than the source viewport.
+* **deviceType**: May be `DESKTOP` or a mobile form factor. Regardless of value, the generated output targets native mobile primitives and a flexible, single-column-first layout.
+
+### Technical mapping rules
+1. **Element tracking**: Preserve `data-stitch-id` attributes as comments in the TSX to allow for future design synchronization.
+2. **Asset handling**: Treat background images and remote URLs in the HTML as dynamic data. Extract them into `src/data/mockData.ts` and pass them to `Image` via `source={{ uri }}` rather than hardcoding them into `StyleSheet`.
+3. **Style extraction**: The HTML `<head>` contains a localized `tailwind.config`. Tailwind classes do not run in React Native, so map these tokens into `resources/style-guide.json` (and a generated `src/theme.ts`) instead of merging a web config. Reference the theme constants from `StyleSheet.create()` so colors like `primary` and `background.dark` render consistently across iOS and Android.
diff --git a/skills/react-native/resources/style-guide.json b/skills/react-native/resources/style-guide.json
@@ -0,0 +1,45 @@
+{
+  "theme": {
+    "colors": {
+      "primary": "#19e66f",
+      "background": {
+        "light": "#f6f8f7",
+        "dark": "#112118",
+        "elevated": "#1A1A1A"
+      },
+      "accent": {
+        "purple": "#8A2BE2",
+        "lavender": "#D0A9F5"
+      },
+      "text": {
+        "primary": "#1A1A1A",
+        "secondary": "#6B7280",
+        "inverse": "#FFFFFF"
+      },
+      "border": {
+        "default": "#E5E7EB",
+        "subtle": "rgba(255, 255, 255, 0.1)"
+      }
+    },
+    "typography": {
+      "display": ["System", "sans-serif"],
+      "body": ["System", "sans-serif"],
+      "mono": ["Courier", "monospace"]
+    },
+    "spacing": {
+      "xs": 4,
+      "sm": 8,
+      "md": 16,
+      "lg": 24,
+      "xl": 32,
+      "xxl": 48
+    },
+    "borderRadius": {
+      "sm": 4,
+      "md": 8,
+      "lg": 12,
+      "xl": 16,
+      "full": 9999
+    }
+  }
+}