claude-code-reactnative-expo-agent-system

🥈Silver

AI-powered development toolkit with 7 production agents for React Native/Expo mobile apps. Automates accessibility, design systems, security, performance, and testing. Built for Claude Code v2.0.5+.

104170Updated 1mo ago

Intermediate30min to implementautomation

Saves ~180 min per use

Quick InstallView Source

git clone https://github.com/senaiverse/claude-code-reactnative-expo-agent-system.git

Works with:

Claude

Overview

About This Skill

AI-powered development toolkit with 7 production agents for React Native/Expo mobile apps. Automates accessibility, design systems, security, performance, and testing. Built for Claude Code v2.0.5+.

How to Use

[{"step":"Initialize the agent system in your project root. Run: `npx claude-code-reactnative-expo-agent-system init --project-path ./your-project`","tip":"Ensure you're using Expo SDK 50+ and React Native 0.73+. The system auto-detects project structure."},{"step":"Select an agent based on your priority area. For example: `npx claude-code-reactnative-expo-agent-system run accessibility-agent --priority critical`","tip":"Use `--dry-run` flag to preview changes without applying them. Example: `npx ... run design-system-agent --dry-run`"},{"step":"Review the generated report and code changes. The system outputs a detailed markdown report with implementation steps.","tip":"Focus on the 'Critical Issues' section first. The report includes exact file paths and line numbers for fixes."},{"step":"Apply fixes incrementally. Start with high-priority issues, then run regression tests using the testing-agent.","tip":"Use `npx expo prebuild --clean` after applying changes to ensure native modules are properly linked."},{"step":"Commit changes with a standardized message. Example: `git commit -m \"fix(accessibility): resolve WCAG contrast violations and add screen reader labels\"`","tip":"Include the agent system version in your commit message for traceability (e.g., `claude-code-reactnative-expo-agent-system@1.2.0`)"}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/senaiverse/claude-code-reactnative-expo-agent-system

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use the claude-code-reactnative-expo-agent-system to [TASK] for my React Native/Expo project at [PROJECT_PATH]. Focus on [PRIORITY_AREA: e.g., accessibility, performance, security, design system consistency]. Generate a detailed report with code changes, test cases, and implementation steps. Prioritize [CONSTRAINTS: e.g., iOS compatibility, Android parity, Expo SDK 50+].

Example Output

### React Native/Expo Accessibility Audit & Remediation Report

**Project:** *FitnessTrack v2.4.1* (Expo SDK 50.0.0, React Native 0.73.6)
**Generated:** 2024-05-15 | **Agents Used:** AccessibilityAgent, TestingAgent, CodeReviewAgent

---

#### 🔍 **Critical Issues (12 found)**
1. **Screen Reader Incompatibility** in `WorkoutScreen.js`:
   - `Image` components missing `accessible={true} alt` props
   - `Button` components using icons without `accessibilityLabel`
   - *Impact:* Screen readers fail to describe interactive elements
   - *Fix:* Added `accessible={true} accessibilityLabel="Start 30-minute HIIT workout"` to all interactive elements

2. **Color Contrast Violations** (WCAG 2.1 AA):
   - Primary button text (#FFFFFF) on gradient background (#4A90E2) → Contrast ratio: 2.1:1 (needs 4.5:1)
   - *Fix:* Updated button styles to use `#E0E0E0` text with 5.2:1 contrast

3. **Dynamic Text Scaling:**
   - `Text` components not respecting system font size changes
   - *Fix:* Added `allowFontScaling={true}` and `adjustsFontSizeToFit={true}` where needed

---

#### ✅ **Automated Fixes Applied**
- **AccessibilityAgent:** Scanned 47 components, auto-added `accessibilityRole` and `accessibilityLabel` to 32 interactive elements
- **TestingAgent:** Generated Jest snapshots for all fixed components with `axe-core` accessibility tests
- **CodeReviewAgent:** Flagged 8 potential regressions (e.g., `TouchableOpacity` wrapped in `View` without `accessible={false}`)

---

#### 📋 **Implementation Steps**
1. **Merge Branch:** `git checkout accessibility-fixes && git pull origin main`
2. **Apply Changes:**
   ```bash
   npx expo prebuild --clean
   npx expo run:android
   npx expo run:ios
   ```
3. **Verify Fixes:**
   - Run `npx @axe-core/react-native` in development mode
   - Test with VoiceOver (iOS) and TalkBack (Android)
4. **Documentation:** Update `docs/accessibility.md` with new patterns

---

#### 📊 **Performance Impact**
- Bundle size: +0.8% (added `react-native-a11y` dependency)
- Memory usage: No significant change
- Build time: +2s (due to snapshot generation)

**Recommendation:** Deploy these changes in the next patch release (v2.4.2) as they improve compliance without breaking existing functionality.