react-native-architecture
Structure React Native projects with feature-first organization and separation of concerns. 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)
Best use case
react-native-architecture is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Structure React Native projects with feature-first organization and separation of concerns. 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)
Teams using react-native-architecture should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react-native-architecture/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react-native-architecture Compares
| Feature / Agent | react-native-architecture | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Structure React Native projects with feature-first organization and separation of concerns. 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)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# React Native Architecture ## **Priority: P0 (CRITICAL)** Feature-first organization for scalable mobile apps. ## Organize by Feature - **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). See [folder structure reference](references/folder-structure.md) for full directory tree and path alias configuration. - **Atomic Components**: Reusable components in `/components`. Feature-specific in feature folder. - **Absolute Imports**: Configure tsconfig.json paths for clean imports. - **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](references/folder-structure.md) for full directory tree, path alias config, and service layer patterns.
Related Skills
spring-boot-architecture
Structure Spring Boot 3+ projects with feature packaging and clean layering. Use when structuring Spring Boot 3 projects, defining layers, or applying architecture patterns. (triggers: pom.xml, build.gradle, structure, layering, dto, controller, @RestController, @Service, @Repository, @Entity, @Bean, @Configuration)
react-typescript
Type React components and hooks with TypeScript patterns. Use when typing React props, hooks, event handlers, or component generics in TypeScript. (triggers: **/*.tsx, ReactNode, FC, PropsWithChildren, ComponentProps)
react-tooling
Configure debugging, bundle analysis, and ecosystem tools for React applications. Use when setting up Vite/webpack build tooling, analyzing bundle size, debugging re-renders with React DevTools, or configuring ESLint and StrictMode for React projects. (triggers: package.json, devtool, bundle, strict mode, profile)
react-testing
Test React components with RTL and Jest/Vitest. Use when writing React component tests with React Testing Library, Jest, or Vitest. (triggers: **/*.test.tsx, **/*.spec.tsx, render, screen, userEvent, expect)
react-state-management
Select and implement local, global, and server state patterns in React. Use when choosing or implementing state management (Context, Zustand, Redux, React Query) in React. (triggers: **/*.tsx, **/*.jsx, state, useReducer, context, store, props)
react-security
Prevent XSS, secure auth flows, and harden React client-side applications. Use when preventing XSS, securing auth flows, or auditing third-party dependencies in React. (triggers: **/*.tsx, **/*.jsx, dangerouslySetInnerHTML, token, auth, xss)
react-performance
Optimize React rendering, bundle size, and data fetching performance. Use when optimizing React rendering performance, reducing re-renders, or improving bundle size. (triggers: **/*.tsx, **/*.jsx, waterfall, bundle, lazy, suspense, dynamic)
react-hooks
Write efficient React functional components and hooks. Use when writing custom hooks, optimizing useEffect, or working with useMemo/useCallback in React. (triggers: **/*.tsx, **/*.jsx, useEffect, useCallback, useMemo, useState, useRef, useContext, useReducer, useLayoutEffect, custom hook)
react-component-patterns
Build modern React component architecture with composition patterns. Use when designing reusable React components, applying composition patterns, or structuring component hierarchies. (triggers: **/*.jsx, **/*.tsx, component, props, children, composition, hoc, render-props)
react-native-testing
Test React Native components with Jest and React Native Testing Library. Use when writing Jest or React Native Testing Library tests for React Native components. (triggers: **/*.test.tsx, **/*.spec.tsx, __tests__/**, test, testing, jest, render, fireEvent, waitFor)
react-native-styling
Style React Native apps with StyleSheet API, Flexbox, theming, and responsive design. Use when implementing React Native styles, theming, Flexbox layouts, or responsive design. (triggers: **/*.tsx, **/*.ts, StyleSheet, style, theme, responsive, flexbox)
react-native-state-management
Implement local and global state with Context, Zustand, and Redux Toolkit in React Native. Use when choosing or implementing state management in React Native with Context, Zustand, or Redux. (triggers: **/*.tsx, **/*.ts, useState, useContext, zustand, redux, state-management)