Skip to content

feat: add react-native-components skill#47

Open
ademakdogan wants to merge 1 commit intogoogle-labs-code:mainfrom
ademakdogan:feat/react-native-skill
Open

feat: add react-native-components skill#47
ademakdogan wants to merge 1 commit intogoogle-labs-code:mainfrom
ademakdogan:feat/react-native-skill

Conversation

@ademakdogan
Copy link
Copy Markdown

Summary

Introduces a new react-native-components skill for converting Stitch designs into modular React Native components.

Closes #41

What's Included

File Purpose
SKILL.md Core instructions with HTML→RN mapping tables, platform-specific guidelines, StyleSheet styling approach, and performance best practices
README.md Install command, skill overview, and integration points
examples/gold-standard-card.tsx ActivityCard ported from react-components using native primitives (View, Text, Image, Pressable, StyleSheet, React.memo)
resources/component-template.tsx Boilerplate template using View/StyleSheet instead of div/className
resources/architecture-checklist.md Quality gate with native primitive, platform handling, and performance checks
resources/style-guide.json Theme tokens with RN-compatible unitless numeric values
scripts/fetch-stitch.sh Shared Stitch asset retrieval script

Key Features

  • HTML → React Native mapping: Complete element and CSS-to-StyleSheet conversion tables
  • Platform handling: Platform.select(), SafeAreaView, KeyboardAvoidingView guidelines
  • Performance patterns: FlatList virtualization, React.memo(), useCallback best practices
  • Styling approach: StyleSheet.create() with theme tokens, NativeWind support option
  • Architecture checklist: Quality gate covering native primitives, type safety, platform handling, and performance

Structure Consistency

Follows the same SKILL.md + README.md + examples/ + resources/ + scripts/ structure used by react-components and other skills in this repository. Uses the same allowed-tools frontmatter pattern.

Add a new skill for converting Stitch designs into modular React Native
components. Includes:

- SKILL.md with HTML-to-RN mapping tables, platform-specific guidelines,
  StyleSheet styling approach, and performance best practices
- Component template using View/StyleSheet instead of div/className
- Gold-standard ActivityCard example ported from react-components
- Architecture checklist with native primitive and platform handling checks
- Style guide with RN-compatible unitless numeric values
- Shared fetch-stitch.sh script for asset retrieval

Closes google-labs-code#41
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

1 participant