agentsclimarketplace
Sign in

React native architecture

Skill ComeOnOliver/skillshub/skills/HoangNguyen0403/agent-skills-standard/react-native-architecture

Feature-first project structure and separation of concerns for React Native. Use when structuring a React Native project or applying clean architecture patterns. (triggers: src/**/*.tsx, src/**/*.ts, app.json, feature, module, directory structure, separation of concerns, Expo, React Navigation, StyleSheet.create, react-native, mobile architecture)From its SKILL.md

Install
npx -y skills add ComeOnOliver/skillshub --skill react-native-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

2.1 KB, 392 tokens by cl100k_base, as published. Nobody here has run it

React Native Architecture

Priority: P0 (CRITICAL)

Feature-first organization for scalable mobile apps.

Implementation Guidelines

  • Feature-First: Organize by feature/module, not by type.
  • Colocation: Keep related files together (screens, components, hooks within feature).
  • Separation: UI (screens/components) separate from logic (hooks/services). Example structure: features/auth/ contains screens, hooks, and services together.
  • Atomic Components: Reusable components in /components. Feature-specific in feature folder.
  • Absolute Imports: Configure tsconfig.json paths (@/components, @/features).
  • Single Responsibility: Each file has one clear purpose.
  • Expo vs CLI: Structure works for both. Expo uses app.json, CLI uses index.js.

Anti-Patterns

  • No Type-Based Folders: Avoid /containers, /screens at root. Use features.
  • No Logic in Screens: Extract to hooks or services.
  • No Circular Deps: Features should not import from each other directly.
  • No Deep Nesting: Max 3 levels deep.

Navigation Strategy

  • Expo Router: Use for new projects, web-parity, and file-based routing.
  • React Navigation: Use for complex deep-linking, legacy apps, or high-customization needs.

Verification Checklist (Mandatory)

  • Feature-First: Is the file inside a feature directory?
  • Colocation: Are hooks/services colocated with screens?
  • Logic-Free Screens: Is there any business logic in the screen component?
  • Navigation Choice: Does the project use the navigation strategy defined above?

References

See references/folder-structure.md for full directory tree, path alias config, and service layer patterns.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.