stitch-react-native

Stitch to React Native

Quick Start

1. "Convert the store appointment mockup to an iOS/Android form; first provide a locally reviewable result."
2. "Convert the operations list to a native FlatList; keep the existing scope and sources."
3. "Sync the current Stitch theme to the existing RN project; flag missing inputs and validation states."

For designers, front-end developers, and teams maintaining this workflow. Designers provide intent and assets, developers provide engineering/tooling, and the team preserves sources and acceptance status during handoff.

Capability Boundaries

✅ Good At

• Convert the store appointment mockup to an iOS/Android form.
• Convert the operations list to a native FlatList.
• Sync the current Stitch theme to the existing RN project.

⚠️ Requires Assets

• Target RN project and actual dependency versions.
• The selected Stitch screen or HTML/screenshots approved for reuse.
• Platform, navigation, and token constraints.

❌ Inapplicable Scenarios and Handoff

• React/Vite browser UI → stitch-react-components.
• Jetpack Compose or SwiftUI implementation → the corresponding platform development workflow, delivering the design mapping.
• Real payment, login, or push integration → the project business interface workflow, preserving the UI state contract.

Workflow

1. Retrieve HTML/screenshots and metadata for the user-selected screens; if the cached source is consistent and reuse is permitted, use it directly.
2. Extract the current project tokens to src/theme.ts; preserve the source and sync time.
3. Map div→View, text→Text, button→Pressable, long lists→FlatList; map using StyleSheet and the capabilities of the current RN version.
4. Split components/data/hooks according to project conventions, connect to existing native navigation, and preserve readonly Props, safe-area, and accessibility labels.
5. Use scripts for limited AST checks, then run the existing type checks; record simulator acceptance separately, and do not treat script passage as successful native execution.

Order by dependency: source verification → local artifacts → authorized external operations → validation handoff. For multiple tasks, do the current main path first; if information is missing, first output a draft with assumptions, then precisely list what is missing and what it is for, without using vague prompts like "please provide more context."

Security and Result Validation

Do not read unrelated account configurations or collect user passwords; credentials are provided only by the environment or authorized connectors. Use only demo data in examples; before uploading, replace customer names, phone numbers, and order numbers with demo values, and check HTML, screenshots, and file metadata. Do not write keys, session cookies, full base64 text, or signed download URLs into reports/repositories. Do not fabricate unverified parameters, visual effects, or business numbers; note sources, decision basis, what was actually executed, and what has not yet been verified in the output.

• No DOM elements/browser events and all text is inside Text.
• Theme tokens come from the current source, and Image has dimensions.
• Check safe-area, navigation, and keyboard states on iOS/Android.

Customizable: target iOS/Android, project path, existing navigation, theme, and refresh scope. Value-added checks: Web→Native mapping; long list selection; platform differences and accessibility checks.

FAQ

Q1: What is the main deliverable? Input: confirmation booking → confirmation booking; events are provided by the target onPress contract.

Q2: When should another entry point be used instead? React/Vite browser UI → stitch-react-components; Jetpack Compose or SwiftUI implementation → the corresponding platform development workflow, delivering the design mapping; real payment, login, or push integration → the project business interface workflow, preserving the UI state contract.

Q3: What happens if input is missing? First provide a clearly marked draft based on local assumptions, and list "needs to be supplemented: target RN project and actual dependency versions; selected Stitch screen or approved reusable HTML/screenshot; platform, navigation, and token constraints." Write operations that depend on these inputs are not performed.

Q4: How is completion determined? No DOM elements/browser events, and all text is inside Text; theme tokens come from the current source, and Image has dimensions; check safe-area, navigation, and keyboard states on iOS/Android.

Q5: How is it customized? Target iOS/Android, project path, existing navigation, theme, and refresh scope; when not provided, use existing project values and state the assumptions.

Q6: Does it automatically upload, install, or go live? Only perform actions covered by the current request and existing authorization; without a remote receipt, do not claim upload success, and without runtime verification, do not claim it is live. Additional installation or scope expansion requires explaining the specific impact first.

Reference as needed

• When performing detailed mapping, API, or templates, read extended workflow。
• When encountering failures/invalid input, read anti-patterns and gotchas。
• When edge cases, compatibility, customization, and authorization are involved, read in-depth FAQ。
• When complete input/output and verification scenarios are needed, read local application examples。
• The basis for local implementation is the current skill's accompanying source code and fixed upstream snapshot; the structure follows the Agent Skills specification. The tool's current behavior is subject to the actual schema; when not connected, do not claim to have verified online behavior.

When to use

Load this skill when the user needs to select and execute a verifiable, recoverable professional workflow for the current request . First extract the goal, input, constraints, delivery format, and acceptance criteria from the request; the description summary is: convert Stitch screens to React Native or synchronize existing native components; triggers when the target is View, Text, StyleSheet, and native navigation for iOS/Android. React DOM or Vite web pages use stitch-react-components..

Rules

• Read before write: first confirm the current state and real capabilities, then perform actions that change external state.
• Least privilege: use only the files, tools, accounts, and network scope required to complete the current step.
• Evidence first: when run results, resource IDs, versions, hashes, or test outputs are missing, clearly mark them as NOT_VERIFIED。
• Idempotency first: retain the request identifier and stage status; when the result is unclear, query first and do not blindly retry.
• Privacy and security: logs, examples, receipts, and error messages must not contain tokens, cookies, keys, or personally sensitive data.

Workflow

Step 1: Clarify intent

Confirm whether this skill matches the goal; if it is only an adjacent need, hand it off to a more precise skill.

Step 2: Perform preflight

Confirm the goal, inputs, constraints, available tools, success criteria, and failure boundaries; if any key condition is unknown, stop at the read-only stage.

Step 3: Form a plan

List the tools to be invoked, the objects that will be changed, the success criteria, and the safe exit method after failure.

Step 4: Execute actions

Execute in minimal sufficient steps, and record evidence at key state changes; retain an associable state or receipt for every external call.

Step 5: Verify delivery

Output the results, verification evidence, unfinished items, risks, and clear next steps, and state facts, inferences, and unverified items separately.

Validation checklist

• The skill trigger conditions are consistent with user intent, and adjacent tasks were not misrouted to this skill.
• The inputs, target objects, versions, and output locations are all clear, and no guessed values were used in place of required values.
• All write, paid, publish, or irreversible actions are within the scope authorized by the user.
• The results have been verified with independent checks; "command succeeded" or "file exists" alone does not count as complete acceptance.
• The output includes actual evidence, failed/skipped items, remaining risks, and executable next steps.

Gotchas

1. Treating a plan as a result: Documentation or prompts are not equal to actual execution; the actual execution level must be indicated.
2. Retrying after an error: A timeout or lost response may already have produced remote state; query first before deciding whether to retry.
3. Implicit scope expansion: Batch, full-scale, publish, overwrite, and paid operations are not natural extensions of ordinary reads and writes.
4. Version drift: When referencing external resources, record the version, tag, or commit; do not treat a mutable branch as release evidence.
5. Stale evidence: Caches, old screenshots, and historical tests cannot prove the current environment; refresh key evidence before delivery.

Non-applicability and boundaries

Do not exceed the scope given by the user; write, paid, publish, and irreversible actions require explicit authorization. If the request requires another skill, do not copy its body; hand off by skill name and preserve the current task context.

Progressive disclosure

• When inputs/outputs, states, and authorization points need to be determined, read references/workflow-contract.md。
• When a pre-delivery self-check is needed, read references/validation-checklist.md。
• When encountering timeouts, partial success, or recovery scenarios, read references/error-recovery.md。
• For first runs, refusal of overreach, and failure recovery, refer respectively to examples/happy-path.md、examples/boundary-refusal.md、examples/failure-recovery.md。