Cross-platform mirror
Translate web components to React Native (and back) with consistent tokens.
The MCP get_platform_mirror tool translates JSX/TSX between platforms
while reusing your design tokens for color, spacing, and font sizes.
Translation runs entirely locally in the CLI/MCP — your source code
never leaves your machine.
Mappings
Elements
| Web | Mobile |
|---|---|
<div> / <section> / <article> | <View> |
<span> / <p> / <h1…h6> | <Text> |
<button> | <Pressable> |
<a href> | <Pressable> (paired with Linking.openURL) |
<img src> | <Image source={{ uri }}> |
<input> / <textarea> | <TextInput> |
Handlers
onClick ↔ onPress, onMouseDown ↔ onPressIn, onSubmit ↔
onSubmitEditing.
Tailwind utilities
Common classes (p-*, m-*, flex, bg-*, rounded-*, text-*,
font-*) translate to style={{ … }} blocks. Color and radius classes
look up the project's token tree first; defaults from Tailwind's scale
serve as a fallback.
Anything not handled is left as-is and surfaced in notes for manual
review.
Notes
The translator is best at the structural layer — element renames, event handler renames, simple Tailwind utilities. Animations, gradients, focus rings, and platform-specific APIs still need a human eye.
Because translation is local-only, the token tree it reads is the
manifest the CLI has already pulled — run windcraft sync first so the
mirror resolves against your latest tokens.