Skip to content

Add React Native skill#42

Open
yuvrajangadsingh wants to merge 2 commits intogoogle-labs-code:mainfrom
yuvrajangadsingh:add-react-native-skill
Open

Add React Native skill#42
yuvrajangadsingh wants to merge 2 commits intogoogle-labs-code:mainfrom
yuvrajangadsingh:add-react-native-skill

Conversation

@yuvrajangadsingh
Copy link
Copy Markdown

Adds a react-native skill that converts Stitch HTML designs into React Native components with StyleSheet.

Closes #41, relates to #19.

What it does

  • Maps HTML elements to React Native primitives (View, Text, Pressable, Image, FlatList, etc.)
  • Converts CSS/Tailwind to StyleSheet.create() with theme token references
  • Handles platform-specific code (Platform.select() for shadows, SafeAreaView for notch handling)
  • Uses Atomic Design for component organization (atoms/molecules/organisms)
  • Includes accessibility (accessibilityLabel, accessibilityRole, accessibilityState)
  • Decouples data into mockData.ts, logic into custom hooks
  • Provides AST validation that catches HTML elements, missing Props interfaces, and hardcoded hex values

Skill structure

skills/react-native/
├── SKILL.md                              — Core instructions & workflow
├── README.md                             — Install & usage
├── package.json                          — Validator dependencies
├── scripts/fetch-stitch.sh               — Stitch asset downloader
├── scripts/validate.js                   — AST validator (Props, hex, HTML element checks)
├── resources/architecture-checklist.md   — Quality gate checklist
├── resources/component-template.tsx      — Starter template
└── examples/gold-standard-card.tsx       — Reference implementation

Modeled after the existing react-components skill, adapted for React Native's different primitives, styling system, and platform constraints.

@davideast
Copy link
Copy Markdown
Collaborator

Another one! Thank you @yuvrajangadsingh! I'm finding time to review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add Skill for React Native

2 participants