How does it handle styling and dark mode?

It uses native StyleSheet.create for performance and includes a hook-based token system that automatically responds to the user's system color scheme.

Can I convert desktop designs to mobile components?

No, this skill requires designs generated with deviceType: MOBILE to ensure proper layout translation. Desktop designs should be regenerated for mobile first.

Are the generated components accessible?

Yes, the skill automatically applies accessibility labels, roles, and hitSlop properties to ensure components are usable with screen readers and meet touch target standards.

Does this skill work with bare React Native projects?

This skill is specifically optimized for Expo (SDK 50+) and uses Expo Router for navigation conventions rather than bare React Native.

React Native & Expo Design Converter

Name: React Native & Expo Design Converter
Author: gabelul

bygabelul

•

Mobile Development

Converts mobile-first Stitch designs into production-ready React Native and Expo components using TypeScript and StyleSheet.

This skill empowers Claude to translate visual design specifications from Stitch into high-quality, cross-platform mobile application code. It systematically maps HTML/CSS layouts to native components, implements system-aware dark mode using design tokens, and utilizes Expo Router for modern file-based navigation. By focusing on mobile-specific constraints like safe areas, touch targets, and density-independent pixels, it ensures that AI-generated mobile interfaces feel native on both iOS and Android platforms.

主な機能

01Automatic HTML/CSS to React Native layout mapping

0223 GitHub stars

03Platform-aware safe area and keyboard handling

04Accessibility-first component generation with proper ARIA roles

05Expo Router integration for file-based navigation

06Dynamic dark mode support with useColorScheme and theme tokens

ユースケース

01Prototyping iOS and Android screens with native performance from visual prompts

02Translating a Stitch mobile mockup into a functional Expo application

03Building reusable React Native UI components from design system specs

主な機能

01Automatic HTML/CSS to React Native layout mapping

0223 GitHub stars

03Platform-aware safe area and keyboard handling

04Accessibility-first component generation with proper ARIA roles

05Expo Router integration for file-based navigation

06Dynamic dark mode support with useColorScheme and theme tokens

ユースケース

01Prototyping iOS and Android screens with native performance from visual prompts

02Translating a Stitch mobile mockup into a functional Expo application

03Building reusable React Native UI components from design system specs