Stitch React Native Builder
Turn Stitch HTML designs into maintainable React Native components and sync existing native screens with design updates.
The evidence shows use of Stitch MCP, Bash, Read, Write, and web_fetch, with writes to project and workspace metadata and design files. Asking before refreshing existing files and requiring permission before validation, packagers, and simulator work are positive controls. Deductions apply because permissions are broad, external downloads and all-screen retrieval are mandatory, and the skill does not explain data flows, sensitive-data handling, rollback, or dependency supply-chain risk; publisher identity is unverified.
The evidence shows a phased workflow with explicit gates, while fetch-stitch.sh performs argument checks, uses a timeout, exits on failure, and reports errors. validate.js provides parsing and several static checks. Deductions apply because static files do not establish that key paths run successfully; CI validates react-components rather than this skill, selected-skill integration tests are absent, and the claimed requirement for exported Props interfaces is not supported by a verifiable example. Under static calibration, the score is capped below 10.
The evidence shows a reasonably clear audience, input scenario, and output: converting Stitch HTML to React Native and syncing existing native components; README includes trigger examples and MCP prerequisites. Deductions apply because non-fit boundaries, abnormal inputs, and React Native/Expo version limits are unclear, Chinese-language support is absent, and the core flow depends on Stitch MCP, Google Cloud Storage downloads, and network conditions whose reachability for mainland-China users is unverified.
The evidence shows a readable structure across SKILL.md, README, package.json, scripts, resources, and a security policy, with Apache-2.0 licensing, installation instructions, dependencies, Node requirements, and a vulnerability-reporting path. Deductions apply because there is no changelog, explicit maintenance owner, or skill-specific update path; the README claims an examples directory not present in the supplied evidence; and package.json version 1.0.0 conflicts with SECURITY.md support for 0.1.x.
The evidence shows coverage of retrieval, theme extraction, HTML-to-React-Native mapping, component architecture, navigation, accessibility, and optional validation, so the core conversion goal is plausible. Deductions apply because no representative generated output, compilation result, or runtime screenshot is supplied, and the skill cannot demonstrate directly usable output when validation is not authorized; under static calibration, effectiveness is capped at 7.
The evidence includes documented procedures, committed fetch and validation scripts, and repository-level GitHub Actions material. Deductions apply because the workflow targets react-components rather than react-native, no selected-skill test suite or execution logs are provided, and there is no independent corroboration. This supports only limited static auditability and remains capped at 5.
- The core workflow requires Stitch MCP and external Google Cloud Storage URLs; retrieval may be unreliable or unavailable on mainland-China networks, and no fallback is documented.
- The skill requires exported Props interfaces, no hardcoded colors, and validation, but the supplied CI does not cover this skill; verify these rules in the target project.
- The skill writes design files and .stitch/metadata.json; confirm target paths, overwrite behavior, and backup or rollback procedures before use.
- Do not assume download URLs, design content, or project metadata are non-sensitive; the skill defines no redaction or credential-protection workflow.
What does this skill do, and when should you use it?
This skill is the React Native-focused member of the Stitch Skills collection. It converts Stitch HTML designs into components built with React Native primitives and StyleSheet, and can synchronize existing native components with updated Stitch designs. Its workflow covers screen retrieval, reliable asset downloads, screenshot review, theme extraction, component architecture, data separation, and navigation. It is best suited to mobile engineering teams that already use Stitch and can provide a configured Stitch MCP server.
Discovers the Stitch MCP namespace and retrieves metadata for every screen in a project. It uses scripts/fetch-stitch.sh to download HTML and width-adjusted PNG screenshots, requires a visual audit of every screenshot, and records project metadata in .stitch/metadata.json. It extracts colors, typography, spacing, fonts, and radii from each HTML file’s Tailwind configuration into src/theme.ts, then creates mock data, modular React Native components, and navigation when needed. It enforces exported TypeScript Props interfaces, StyleSheet-based styling, accessibility attributes, safe areas, and React Native element mappings. npm install, npm run validate, and tsc --noEmit are optional checks; packager startup and simulator audits require user permission.
- A mobile engineer needs to turn Stitch screens into React Native screens and reusable components.
- A team needs to synchronize an existing native implementation after the Stitch project changes.
- A developer must translate HTML/CSS layouts into React Native primitives such as View, Text, Image, Pressable, and TextInput.
- A product team wants generated code to use design tokens extracted from the current Stitch project rather than hardcoded styling values.
What are this skill's strengths and limitations?
- Provides an end-to-end workflow from Stitch screen retrieval to React Native component generation.
- Sets explicit rules for theme tokens, modular architecture, data separation, TypeScript Props interfaces, and accessibility.
- Covers platform-specific behavior, responsive sizing, list selection, shadows, and safe-area handling.
- Supports synchronizing existing native components with updated Stitch designs.
- Requires a configured and running Stitch MCP server, network access, and local filesystem access.
- Downloading and visually auditing every screen is mandatory and may make runs longer.
- Validation, packager startup, and simulator review are not fully automatic and require permission at the relevant stages.
- The source does not specify a React Native version range, provide a test-suite description, or list verified device platforms.
How do you install this skill?
The README does not document a dedicated single-skill installation directory. Its documented selective installation command is npx skills add google-labs-code/stitch-skills; Codex users can also add google-labs-code/stitch-skills as a plugin marketplace and install the stitch-build plugin. Before use, configure and run the Stitch MCP server with the required environment variables and credentials.
How do you use this skill?
In a coding agent with Stitch MCP configured, use a prompt such as Convert the Stitch design to React Native components with proper theme and navigation. or Sync the app to the last updates of the Stitch project 13039335308618232534. If .stitch/designs/{page}.html and .png already exist, the workflow asks whether to refresh them from Stitch or reuse the local files. Validation scripts, packager startup, and simulator audits follow the permission requirements described by the skill.