react-native-design

Organize React Native UI guidance for styling, navigation, animations, and responsive layouts.

Updated May 16, 2026

Search Tags:#typescript #styling #navigation #mobile #react-native #gestures #reanimated

Ready to run

npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill react-native-design-p-o-ke-nae

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-native-design
Source: https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory/tree/main/.github/skills/react-native-design
Command: npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill react-native-design-p-o-ke-nae

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement polished React Native user interfaces without guessing at styling, navigation, or animation patterns.

Core Features & Use Cases

Styling Systems: Build consistent layouts with StyleSheet, theme tokens, responsive spacing, and platform-specific styling.
Navigation Patterns: Set up type-safe stack, tab, drawer, and deep-link flows for real mobile app navigation.
Motion and Interaction: Add smooth Reanimated 3 animations, gestures, shared transitions, and animated feedback.
Use Case: Ideal for creating a product screen with adaptive layouts, a tab-based app shell, and interactive cards that feel native on iOS and Android.

Quick Start

Ask for a React Native screen or component that uses typed navigation, responsive styling, and a Reanimated interaction pattern for your app.

Frequently Asked Questions about react-native-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up type-safe navigation in React Native with TypeScript?▼

Type-safe React Native navigation requires defining typed route params across stack, tab, and drawer flows. This Skill guides you through React Navigation setup with TypeScript-aware component structure and deep-link flows for real mobile app navigation.

What's the best way to structure responsive styling and layouts in React Native?▼

Responsive styling in React Native benefits from StyleSheet conventions, theme tokens, and responsive spacing. This Skill provides performance-conscious styling patterns and platform-specific presentation to keep iOS and Android layouts consistent.

How do Reanimated 3 worklets handle gestures and shared transitions in React Native?▼

Reanimated 3 worklets drive gesture-driven interactions and animated feedback on the UI thread. This Skill covers smooth animations, shared transitions, and interactive cards that feel native on both iOS and Android platforms.

Can I build a cross-platform mobile UI shell with tabs and safe-area handling in React Native?▼

Yes, cross-platform mobile UI shells can be built using tab navigation, safe-area handling, and screen composition. This Skill organizes React Native app design guidance for adaptive layouts and interactive components that feel native.

Why does my React Native screen composition need platform-specific presentation patterns?▼

Platform-specific presentation patterns ensure React Native components feel native on iOS and Android. This Skill guides adaptive layouts, performance-conscious styling conventions, and safe-area handling to maintain cross-platform mobile UI consistency.

Do I need TypeScript to use this React Native design guidance for animations and navigation?▼

Yes, TypeScript-aware component structure is required for this React Native design guidance. It supports type-safe navigation setup, Reanimated 3 worklets, and performance-conscious styling conventions across cross-platform mobile UI work.