claude-code-reactnative-expo-agent-system
🥈SilverAI-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 2mo ago
Intermediate30min to implementautomation
Saves ~180 min per use
Quick InstallView Source
git clone https://github.com/senaiverse/claude-code-reactnative-expo-agent-system.gitWorks with:
Claude
Overview
About This Skill
This AI agent system provides automated development workflows for React Native and Expo mobile apps through 7 specialized agents covering design systems, accessibility compliance, security, performance, and testing. Built for Claude Code v2.0.5 and later, it works across Windows, macOS, and Linux environments with Expo SDK 50+ and React Native 0.74+. The system addresses common production issues like design inconsistencies, WCAG accessibility violations, package version conflicts, and performance regressions by automating code review tasks and compliance checks. Developers install the agents project-wide or globally via interactive scripts, then invoke them through Claude Code commands to catch issues before code review. The toolkit includes configuration files, installation scripts, and documentation for both quick setup and comprehensive customization.
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., `[email protected]`)"}]
Use Cases
Enforce design token consistency across React Native component libraries
Automatically verify WCAG 2.2 accessibility compliance for App Store submissions
Scan dependencies for security vulnerabilities and version conflicts
Monitor performance regressions and maintain performance budgets
Tags
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-systemRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
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.Apply to these tools
Browse all toolsExpo
Build iOS and Android apps with JavaScript
Automa
Automate your browser workflows effortlessly
Claude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan