From e54ed7172f6a94ce4e7dafe941c2df6da3ac23a9 Mon Sep 17 00:00:00 2001 From: Adem Date: Tue, 31 Mar 2026 04:04:40 +0300 Subject: [PATCH] feat: add react-native-components skill 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 #41 --- skills/react-native-components/README.md | 49 ++++++ skills/react-native-components/SKILL.md | 108 ++++++++++++ .../examples/gold-standard-card.tsx | 158 ++++++++++++++++++ .../resources/architecture-checklist.md | 33 ++++ .../resources/component-template.tsx | 43 +++++ .../resources/style-guide.json | 54 ++++++ .../scripts/fetch-stitch.sh | 30 ++++ 7 files changed, 475 insertions(+) create mode 100644 skills/react-native-components/README.md create mode 100644 skills/react-native-components/SKILL.md create mode 100644 skills/react-native-components/examples/gold-standard-card.tsx create mode 100644 skills/react-native-components/resources/architecture-checklist.md create mode 100644 skills/react-native-components/resources/component-template.tsx create mode 100644 skills/react-native-components/resources/style-guide.json create mode 100755 skills/react-native-components/scripts/fetch-stitch.sh diff --git a/skills/react-native-components/README.md b/skills/react-native-components/README.md new file mode 100644 index 0000000..cc42fb2 --- /dev/null +++ b/skills/react-native-components/README.md @@ -0,0 +1,49 @@ +# Stitch to React Native Components Skill + +Converts Stitch designs into modular React Native components with platform-aware styling, performance best practices, and automated validation. + +## Install + +```bash +npx skills add google-labs-code/stitch-skills --skill react-native-components --global +``` + +## Example Prompt + +```text +Convert my Dashboard screen in my Fitness Stitch Project to a React Native component system. +``` + +## Skill Structure + +This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, validation scripts, and design tokens. + +```text +skills/react-native-components/ +├── SKILL.md — Core instructions & workflow +├── README.md — This file +├── scripts/ — Networking & validation +├── resources/ — Style guides & API references +└── examples/ — Gold-standard code samples +``` + +## How it Works + +When activated, the agent follows a high-fidelity engineering pipeline: + +1. **Retrieval**: Uses a system-level `curl` script to bypass TLS/SNI issues on Google Cloud Storage. +2. **Mapping**: Cross-references Stitch metadata with the local `style-guide.json` to ensure token consistency. +3. **Conversion**: Maps HTML/CSS primitives to React Native equivalents (`
` → ``, `` → ``, etc.). +4. **Generation**: Scaffolds components using native primitives with `StyleSheet.create()` styling. +5. **Platform Handling**: Applies `Platform.select()` for iOS/Android differences, safe area wrapping, and keyboard handling. +6. **Audit**: Performs a final self-correction check against the architecture checklist. + +## Works With + +- **`stitch-design` skill**: Generate and refine designs before converting to React Native components. +- **`design-md` skill**: Extract the design system for consistent theming across screens. +- **`stitch-loop` skill**: Autonomous multi-screen generation with React Native output. + +## Learn More + +See [SKILL.md](./SKILL.md) for complete instructions. diff --git a/skills/react-native-components/SKILL.md b/skills/react-native-components/SKILL.md new file mode 100644 index 0000000..47bde24 --- /dev/null +++ b/skills/react-native-components/SKILL.md @@ -0,0 +1,108 @@ +--- +name: react-native-components +description: Converts Stitch designs into modular React Native components with platform-aware styling, performance best practices, and automated validation. +allowed-tools: + - "stitch*:*" + - "Bash" + - "Read" + - "Write" + - "web_fetch" +--- + +# Stitch to React Native Components + +You are a mobile engineer focused on transforming Stitch designs into clean, performant React Native code. You follow a modular approach, handle platform-specific concerns, and use automated tools to ensure code quality. + +## Retrieval and Networking +1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls. +2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON. +3. **Check for existing designs**: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist: + - **If files exist**: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms. + - **If files do not exist**: Proceed to step 4. +4. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains. + - **HTML**: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"` + - **Screenshot**: Append `=w{width}` to the screenshot URL first, where `{width}` is the `width` value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: `bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"` + - This script handles the necessary redirects and security handshakes. +5. **Visual audit**: Review the downloaded screenshot (`.stitch/designs/{page}.png`) to confirm design intent and layout details. + +## Architectural Rules +* **Modular components**: Break the design into independent files under `src/components/`. Avoid large, single-file outputs. +* **Logic isolation**: Move event handlers and business logic into custom hooks in `src/hooks/`. +* **Data decoupling**: Move all static text, image URLs, and lists into `src/data/mockData.ts`. +* **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`. +* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React Native components. +* **Native primitives**: Use React Native core components (`View`, `Text`, `Image`, `ScrollView`, `FlatList`, `Pressable`, `TextInput`) instead of HTML elements. +* **Style mapping**: + * Extract the design tokens from the Stitch HTML ``. + * Sync these values with `resources/style-guide.json`. + * Use `StyleSheet.create()` with theme-mapped values instead of arbitrary inline styles. + +## Platform-Specific Guidelines +* **Platform handling**: Use `Platform.select()` or `Platform.OS` conditionals for iOS/Android differences. +* **Safe areas**: Wrap top-level screens with `SafeAreaView` from `react-native-safe-area-context`. +* **Keyboard handling**: Use `KeyboardAvoidingView` with `behavior` set to `padding` on iOS and `height` on Android for screens with text inputs. +* **Touch targets**: Ensure all interactive elements have a minimum touch target of 44×44 points. +* **Status bar**: Account for status bar height differences across platforms. + +## Performance Best Practices +* **FlatList over ScrollView**: Use `FlatList` or `SectionList` for dynamic lists to enable virtualization. +* **Memoization**: Apply `React.memo()` to pure display components and `useMemo`/`useCallback` for expensive computations and callbacks. +* **Image optimization**: Use `resizeMode` and provide explicit `width`/`height` props on `Image` components. +* **Avoid anonymous functions**: Do not pass anonymous arrow functions directly to `onPress` or `renderItem` — extract them to named functions or use `useCallback`. + +## Styling Approach +* **StyleSheet.create()**: Define all styles using `StyleSheet.create()` at the bottom of each component file. +* **Theme tokens**: Reference design tokens from `resources/style-guide.json` for colors, spacing, and typography. +* **No hardcoded values**: Never use raw hex colors or magic numbers — map everything to theme constants. +* **NativeWind support**: If the project uses NativeWind (Tailwind CSS for React Native), use `className` props instead of `StyleSheet`. Check the project's configuration before deciding. +* **Dark mode**: Support dark mode via `useColorScheme()` hook or theme provider pattern. + +## Execution Steps +1. **Environment setup**: Verify the React Native project structure exists. If starting from scratch, ensure `package.json` includes `react-native` and `typescript` dependencies. +2. **Data layer**: Create `src/data/mockData.ts` based on the design content. +3. **Theme setup**: Create or update `src/theme/tokens.ts` with colors, spacing, and typography from the Stitch design. +4. **Component drafting**: Use `resources/component-template.tsx` as a base. Find and replace all instances of `StitchComponent` with the actual name of the component you are creating. +5. **Application wiring**: Update the project entry point or navigation to render the new components. +6. **Quality check**: + * Verify the output against the `resources/architecture-checklist.md`. + * Ensure all components use native primitives (no `
`, ``, `

` elements). + * Check that platform-specific code is properly handled. + * Start the dev server with `npx react-native start` or `npx expo start` to verify the live result. + +## Stitch HTML to React Native Mapping + +When converting Stitch designs (which output HTML/CSS), apply these mappings: + +| HTML Element | React Native Equivalent | +|:---|:---| +| `

` | `` | +| ``, `

`, `

`–`

` | `` (with appropriate styles) | +| `` | `` | +| `