📘 Complete Guide: Claude Code Agent System for Expo/React Native

📘 Complete Guide: Claude Code Agent System for Expo/React Native

**🌟 Created by SenaiVerse** *Claude Code Agent System for Expo/React Native Development*

---

**The definitive reference for your AI-powered development workflow**

---

Table of Contents

1. System Architecture
2. How Agents Work
3. The 20 Agent Library
4. Slash Commands Reference
5. Hook System & Automation
6. Enhanced Prompt Integration
7. Best Practices & Patterns
8. Advanced Multi-Agent Workflows
9. Customization Guide
10. Troubleshooting
11. Team Collaboration
12. Performance & Metrics

---

System Architecture

Overview

This system provides **20 specialized AI agents** for Expo/React Native development, organized into three tiers:

┌─────────────────────────────────────────────┐
│         TIER S: Meta Orchestration          │
│         Grand Architect (Conductor)         │
└─────────────────┬───────────────────────────┘
                  │
      ┌───────────┴───────────┐
      │                       │
┌─────▼──────┐        ┌──────▼──────┐
│  TIER 1:   │        │  TIER 2:    │
│   Daily    │        │   Power     │
│  Workflow  │        │   Agents    │
│  (5 agents)│        │  (5 agents) │
└─────┬──────┘        └──────┬──────┘
      │                      │
      └──────────┬───────────┘
                 │
         ┌───────▼────────┐
         │   TIER 3:      │
         │  Specialized   │
         │  (10 agents)   │
         └────────────────┘

File Structure

**Project-Scoped (Recommended for Teams):**

your-expo-project/
├── .claude/                  # Project agents (version controlled)
│   ├── agents/               # HIGHEST PRIORITY
│   │   ├── tier-1-daily/
│   │   ├── tier-2-power/
│   │   └── tier-s-meta/
│   ├── commands/             # Project slash commands
│   ├── hooks/                # Project automation (optional)
│   └── settings.json         # Project settings
├── CLAUDE.md                 # Project context
└── package.json              # Your project

**Global (Personal Use):**

~/.claude/
├── agents/                   # Global agents (lower priority)
│   ├── tier-1-daily/
│   ├── tier-2-power/
│   └── tier-3-specialized/
├── commands/                 # Global slash commands
├── hooks/                    # Global automation (optional)
└── settings.json            # Global configuration

**Hybrid Approach (Best of Both):**

You can use BOTH! Claude Code checks project agents first, then falls back to global:

Priority order:
1. your-project/.claude/agents/design-token-guardian.md  (USED)
2. ~/.claude/agents/design-token-guardian.md             (ignored)

If agent only exists globally:
1. ~/.claude/age