📱 Clawhub React Native (Expo) Master Skill

The gold standard for production-grade Expo and React Native applications.
Built with MVC-Lite architecture, RTL-first localization, and zero-compromise type safety.

Visit Repository on Clawhub.ai

---

🌟 Overview

The Clawhub Mobile Master Skill is a comprehensive architectural framework and set of intelligent workflows designed to streamline the development of high-performance mobile applications. It enforces a strict separation of concerns, ensures RTL compatibility from day one, and provides a suite of automated tools for scaffolding and infrastructure management.

🏗️ Core Architecture (MVC-Lite)

Every screen and feature in the Clawhub ecosystem follows the MVC-Lite pattern, consisting of exactly four files:

1. index.tsx (Skin): Pure JSX presentation layer.
2. controller.ts (Brain): Logic hook providing state and handlers.
3. styles.ts (Nerves): Functional styles with dynamic RTL/LTR resolution.
4. types.ts (Structure): Strict interface definitions (Zero any).

🚀 Key Features

• 🌐 RTL-First Localization: Built-in support for Arabic/English with automatic UI flipping and state persistence.
• 🛡️ Defensive Coding: Standardized mountedRef patterns to prevent memory leaks in async operations.
• 🎨 Functional Styling: Centralized design system using HSL tokens and the useAppStyle dynamic hook.
• 🔌 Optimized Services: Production-ready API clients, secure token storage, and Sentry-integrated logging.
• 📦 Automated Scaffolding: Command-driven generation of projects, screens, and components.

⌨️ Workflow & Slash Commands

Automate your development with these built-in workflows:

Command	Purpose	When to Use
/provision-app	Initialize Project	Starting a new app with full auth and standard modules.
/setup-api	API & Observability	Adding a production-grade apiClient.ts and logger.ts.
/setup-navigation	Router Setup	Scaffolding Root (Auth) and Main (Dynamic Tab) navigators.
/make-screen	Feature Scaffolding	Creating a new screen using the 4-file MVC-Lite pattern.
/make-component	UI Scaffolding	Creating a new Shared, Regular, or Local component.

📁 Directory Structure

.
├── app/                         # Expo Router (routes & layouts)
├── screens/                     # Feature-specific implementations (MVC-Lite)
├── components/                  # Distributed Atom/Molecule components
├── services/                    # Infrastructure (API, Auth, Firebase, Storage)
├── store/                       # State Management (Redux Power Slices)
├── hooks/                       # Custom logical hooks (@hooks)
├── styles/                      # Design Token System (@styles)
├── i18n/                        # Localization assets (@i18n)
└── assets/                      # Media & Fonts (@assets)

🔗 Documentation

• Clawhub Repository: clawhub.ai/yahongie2014/react-native-clean-pattern
• Master Skill Guide: SKILL.md

For detailed execution standards, execution workflows, and dependency matrices, please refer to the documents above.

---

👨‍💻 Author

yahongie2014

• Clawhub: @yahongie2014
• GitHub: yahongie2014
• Website: coder79.me

---

Generated by Clawhub Assistant