AgentSkillsCN

defining-mobile-architecture

为 React Native Expo 移动应用定义标准架构、文件夹结构与开发原则。在新建项目时，或在验证是否严格遵循架构标准时，这一技能将发挥重要作用。

SKILL.md
--- frontmatter
name: defining-mobile-architecture
description: Defines the standard architecture, folder structure, and development principles for React Native Expo mobile applications. Use when setting up a new project or validating adherence to architectural standards.

Mobile App Architecture Guidelines

When to use this skill

  • •When initializing a new React Native Expo project.
  • •When creating new features or modules to ensure they fit the established structure.
  • •When refactoring existing code to align with architectural standards.
  • •When you need to check where a specific file type (service, model, etc.) belongs.

Framework

  • •Framework: React Native with Expo
  • •Target Platforms: iOS, Android, Web

Architecture Pattern

  • •Pattern: Clean Architecture / MVVM (Model-View-ViewModel)
  • •Core Rule: Separate business logic from UI components.
  • •Modularity: Components must be modular and reusable.

Folder Structure

Strictly adhere to this directory layout in /src:

code
/src
  /components    # Reusable UI components (Buttons, Cards, Inputs)
  /screens       # Screen/page components (Home, Profile, Settings)
  /services      # API calls, external services, data fetching
  /utils         # Pure helper functions, formatters, validators
  /models        # TypeScript interfaces, types, data models
  /navigation    # Navigation configuration and navigators
  /state         # State management (Redux, Context, Zustand)
  /assets        # Images, fonts, static files
  /config        # Environment configurations, constants
  /hooks         # Custom React hooks

Key Principles

  1. •Type Safety: All code must be written in TypeScript. Strict typing is required.
  2. •Single Responsibility: Each component, function, or service should have exactly one responsibility.
  3. •Environment Variables: Never hardcode API keys or endpoints. Use the /config directory and environment variables.
  4. •Reusable Components: If a UI element is used more than once, extract it to /components.
  5. •State Management: Keep local state local. Use global state (/state) only for data shared across multiple screens.

Instructions for implementation

  1. •Check Structure: When evaluating code, verify it lives in the correct folder based on the structure above.
  2. •Verify Types: Ensure interface or type definitions exist in /models for all data structures.
  3. •Review Logic: Ensure business logic (calculations, API calls) is NOT inside UI components (screens), but in hooks or services.