Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By gigs-slc
Complete React Native, Expo, and React optimization guide with 130+ rules covering performance, patterns, UI, animations, state management, and more.
npx claudepluginhub gigs-slc/react-native-skills --plugin react-native-expo-completeSoftware architect agent for designing React Native/Expo implementation plans. Use BEFORE any implementation begins for features, architectural decisions, and planning.
Bug investigation agent for diagnosing React Native/Expo runtime errors. Use to identify and isolate crashes, bugs, and errors without implementing fixes.
Code review agent for validating React Native/Expo changes. Use AFTER code has been written to review diffs, validate scope, and check for issues.
Implementation agent for writing production React Native/Expo code. Use AFTER an architecture plan exists to execute the defined implementation.
Navigation specialist agent for Expo Router and React Navigation. Use when navigation behavior, routes, params, or deep links are involved.
Guidelines for creating API routes in Expo Router with EAS Hosting
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture.
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
Build and distribute Expo development clients locally or via TestFlight
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules.
Complete AI coding agent harness for React Native and Expo — 13 agents, 22 commands, 7 skills, 10 MCP integrations, autonomous worker mode, visual debugging, smart routing
React Native & Expo development workflow: skills library for Claude Code with TDD, debugging, collaboration patterns, and proven techniques
Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>
Editorial "Expo & React Native" bundle for Claude Code from Antigravity Awesome Skills.
React Native upgrade workflow covering updated templates, dependencies, and common pitfalls. Use when migrating a React Native app to a newer release.
The most comprehensive React Native, Expo, and React optimization skills for Claude Code. Combines 130+ rules from Callstack, Expo, and Vercel best practices.
In Claude Code, run:
/plugin marketplace add gigs-slc/react-native-skills
/plugin install react-native-expo-complete@react-native-expo-skills
Then restart Claude Code to load the skills.
| Skill | Source | Content | Description |
|---|---|---|---|
react-native | Callstack + Vercel | 65 files | THE ULTIMATE RN SKILL - Combined profiling + patterns |
react-best-practices | Vercel | 62 files | React patterns, hooks, performance, architecture |
composition-patterns | Vercel | 12 files | Component composition, compound components |
building-ui | Expo | 14 files | UI components, styling, animations, navigation |
data-fetching | Expo | 1 file | fetch, axios, React Query, SWR, caching |
api-routes | Expo | 1 file | API routes with Expo Router + EAS Hosting |
dev-client | Expo | 1 file | Development client builds, TestFlight |
tailwind-setup | Expo | 1 file | Tailwind CSS v4 + NativeWind v5 setup |
upgrading-expo | Expo | 4 files | SDK upgrades, React 19, New Architecture |
use-dom | Expo | 1 file | DOM components, web-to-native migration |
| Agent | Use When | Description |
|---|---|---|
orchestrator | Coordinating multi-agent workflows | Master coordinator that enforces constraints and delegates to sub-agents |
react-native-expo-architect | BEFORE implementation | Designs features, makes architectural decisions, creates implementation plans |
react-native-expo-implementation | AFTER architecture plan exists | Writes production code following the approved plan |
react-native-expo-code-review | AFTER code is written | Reviews diffs, validates scope, checks for bugs and constraint violations |
react-native-expo-bugfix | Investigating runtime errors | Diagnoses crashes, bugs, and errors without implementing fixes |
performance-re-render | Performance matters | Identifies re-renders, memory leaks, JS thread issues |
navigation-expo-router | Navigation behavior involved | Validates routes, params, deep links, platform parity |
mobile-release-gate | Before merging/shipping | Final production-readiness check - SHIP or NO SHIP decision |
The Orchestrator is the central hub - every sub-agent reports back before the next step:
User Request
↓
[Orchestrator] ─── Reads constraints, analyzes task
↓
├──→ [Architect] ─── Designs the solution
↓
[Orchestrator] ─── Reviews & approves plan
↓
├──→ [Implementation] ─── Writes the code
↓
[Orchestrator] ─── Verifies implementation matches plan
↓
├──→ [Code Review] ─── Validates the changes
↓
[Orchestrator] ─── Confirms review passed
↓
├──→ [Performance] ─── Checks performance (if needed)
↓
[Orchestrator] ─── Confirms no performance issues
↓
├──→ [Release Gate] ─── Final ship/no-ship decision
↓
[Orchestrator] ─── Updates AI_PROGRESS.md, reports to user
Key principle: No sub-agent hands off directly to another. The Orchestrator approves every transition.
The Orchestrator Agent is the master coordinator. It:
AI_CONSTRAINTS.md before any work beginsAI_PROGRESS.mdThe Orchestrator and sub-agents require these governance files. Download and customize for your project:
| Template | Purpose | Download |
|---|---|---|
AI_CONSTRAINTS.md | Define non-negotiable rules for all AI agents | Download |
AI_PROGRESS.md | Track work status, decisions, and blockers | Download |
Setup:
# Download templates to your project
mkdir -p docs
curl -o docs/AI_CONSTRAINTS.md https://raw.githubusercontent.com/gigs-slc/react-native-skills/main/templates/AI_CONSTRAINTS.md
curl -o docs/AI_PROGRESS.md https://raw.githubusercontent.com/gigs-slc/react-native-skills/main/templates/AI_PROGRESS.md
Then:
AI_CONSTRAINTS.md for your codebase rulesAI_PROGRESS.md as work progressesCLAUDE.md or project instructionsreact-native SkillThe crown jewel - combines Callstack profiling with Vercel code patterns: