skilld
All skills
google-labs-code avatar

/react-native

@ec43edb official
by Google Labs Codegoogle-labs-code/stitch-skills8.4k stars
1,105

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

  • 9 files
  • 33.5 KB
  • Updated 3 months ago
  • GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/google-labs-code/stitch-skills/react-native

This session only. Nothing lands on disk.

resourcesarchitecture-checklist.md

≈515 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Architecture Quality Gate

Structural integrity

  • Components organized by Atomic Design: atoms, molecules, organisms in src/components/.
  • Logic extracted to custom hooks in src/hooks/.
  • No monolithic files. Each component in its own file.
  • All static text, image URIs, and list data moved to src/data/mockData.ts.

Type safety and syntax

  • Every component exports a [ComponentName]Props interface with readonly property modifiers.
  • File is syntactically valid TypeScript (no parse errors).
  • Placeholders from template (e.g., StitchComponent) have been replaced with actual names.
  • Navigation screen params are typed with NativeStackScreenProps or equivalent.

React Native primitives

  • No HTML elements (div, span, p, img, button). Only React Native components.
  • All text wrapped in Text components. No raw strings inside View.
  • Pressable used for interactive elements (not TouchableOpacity or TouchableHighlight).
  • FlatList used for dynamic/long lists (not ScrollView with .map()).
  • Image components have explicit width and height or aspectRatio.

Styling

  • All styles defined via StyleSheet.create() at the bottom of the file.
  • No inline style objects (use StyleSheet references).
  • No hardcoded hex values. Colors referenced from src/theme.ts.
  • Shadows use Platform.select() for iOS/Android differences.
  • flexDirection explicitly set where row layout is needed (default is column).

Accessibility

  • Interactive elements have accessibilityLabel and accessibilityRole.
  • Images have descriptive accessibilityLabel.
  • Toggle/checkbox elements use accessibilityState.

Platform handling

  • Top-level screens wrapped with SafeAreaView from react-native-safe-area-context.
  • Platform-specific code uses Platform.select() or Platform.OS checks.
  • Responsive dimensions use useWindowDimensions() (not hardcoded pixel values for screen-relative sizing).

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at ec43edb. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 days ago.

Steadyupdated 3 months ago

Capability

What it can do
Runs commands Reads files Edits files
All 5 allowed tools
stitch*:*BashReadWriteweb_fetch

Topics

  • TypeScript
  • react-native
  • stitch
  • html-to-native
  • component-generation
  • stylesheet
  • mobile
  • design-system

README badge

README badge for google-labs-code/stitch-skills/react-native

What it does

Converts Stitch web designs to React Native components using StyleSheet, mapping HTML elements to React Native primitives and extracting Tailwind styles into theme files. Handles design retrieval via Stitch MCP, HTML-to-component translation, platform-specific code, and navigation setup for multi-screen apps.

Generated from the current SKILL.md.

Frequently asked

Does this skill work with Expo or bare React Native?
The skill supports both. It uses React Navigation and standard React Native primitives. The execution steps mention `npx expo start` and `npx react-native start` as valid options for verification.
What Stitch designs can this convert?
The skill converts Stitch HTML designs (web layouts) to React Native components. It requires the design to be available via the Stitch MCP and downloads both the HTML and screenshot for reference.
Does this handle animations and transitions?
No. CSS animations and transitions are not supported. For animations in React Native, you must manually add `react-native-reanimated` and implement them separately.
How does this handle responsive design?
The skill uses Flexbox (the default layout system in React Native) and `useWindowDimensions()` for responsive sizing. Percentage widths and the atomic design approach support adaptive layouts, but there are no viewport units (`vw`/`vh`).
Does this generate navigation between multiple screens?
Yes, if the design has multiple screens, the skill sets up a `NavigationContainer` with a stack or tab navigator in `App.tsx` using React Navigation.

Generated from the current SKILL.md. These answers refresh after source changes.