react-native-expo-skills

React Native & Expo Complete Skills

The most comprehensive React Native, Expo, and React optimization skills for Claude Code. Combines 130+ rules from Callstack, Expo, and Vercel best practices.

Installation

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.

What's Included

10 Skills + 8 Agents + Templates

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

Agents

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

Agent Workflow

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.

Orchestrator Agent

The Orchestrator Agent is the master coordinator. It:

• Reads AI_CONSTRAINTS.md before any work begins
• Tracks progress in AI_PROGRESS.md
• Delegates to specialized agents based on task type
• Ensures proper agent sequencing
• Never violates constraints

Project Governance Templates

The 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:

1. Customize AI_CONSTRAINTS.md for your codebase rules
2. Update AI_PROGRESS.md as work progresses
3. Reference both in your CLAUDE.md or project instructions

The Unified react-native Skill

The crown jewel - combines Callstack profiling with Vercel code patterns: