mobile-development

Provide code patterns for React Native and Flutter mobile app development.

33|5|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/Sir-chawakorn/power-ranger-toolkit --skill mobile-development-sir-chawakorn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-development
Source: https://github.com/Sir-chawakorn/power-ranger-toolkit/tree/main/src/skills/mobile-development
Command: npx skills add https://github.com/Sir-chawakorn/power-ranger-toolkit --skill mobile-development-sir-chawakorn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides pre-built patterns and guidance for developing cross-platform mobile applications using React Native and Flutter, streamlining the creation of UIs, navigation, and platform-specific features.

Core Features & Use Cases

  • React Native Components: Reusable UI components like Card and navigation setup using React Navigation.
  • Flutter Widgets: Reusable UI widgets like MyCard and navigation setup using go_router.
  • Platform-Specific Code: Examples for handling differences between iOS and Android.
  • State Management: Overview of state management solutions for both frameworks.
  • Use Case: Quickly scaffold a new mobile app feature by leveraging provided component patterns and navigation structures for either React Native or Flutter.

Quick Start

Use the mobile-development skill to generate a React Native Card component.

Frequently Asked Questions about mobile-development

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

FAQPage Schema
What are the best practices for cross-platform mobile app development using React Native and Flutter?

Cross-platform mobile app development best practices include using reusable UI components like React Native Cards or Flutter Widgets, implementing structured navigation with React Navigation or go_router, and applying consistent state management solutions across iOS and Android.

How do I handle platform-specific code differences between iOS and Android in Flutter?

To handle platform-specific code differences between iOS and Android in Flutter, you can implement conditional rendering patterns that adapt UI widgets and navigation structures to target specific platform behaviors while maintaining a unified codebase.

How do I set up navigation in a cross-platform mobile app?

You can set up navigation in a cross-platform mobile app by using React Navigation for React Native projects or go_router for Flutter applications, both of which provide structured routing patterns for iOS and Android interfaces.

Can I use the same state management solutions for both React Native and Flutter?

While React Native and Flutter require framework-specific state management implementations, this skill provides an overview of state management solutions for both environments to help you maintain consistent data flow across your cross-platform mobile application.

How do I quickly scaffold a new UI component for a mobile app feature?

You can quickly scaffold a new mobile app feature by leveraging provided pre-built component patterns, such as generating a React Native Card component or a Flutter MyCard widget, to rapidly develop iOS and Android interfaces.