AI-powered React Native development workflow with compounding engineering principles. Build high-quality iOS and Android apps with 16 specialized agents, 4 workflow skills, and 6 commands. Includes bundled MCP servers for Figma, iOS Simulator, Android testing, and API integration.
Installation
npx claude-plugins install @shivrajkumar/traya-plugin/traya-react-native
Contents
Folders: agents, commands, skills
Files: README.md
Documentation
AI-powered React Native development workflow with compounding engineering principles. This plugin provides specialized agents, skills, and commands for building high-quality iOS and Android applications.
Overview
The Traya React Native plugin brings comprehensive React Native development capabilities to Claude Code. It includes 16 specialized AI agents, 4 workflow skills, and 6 commands that leverage 6 bundled MCP servers to provide end-to-end support for mobile app development.
Philosophy: Compounding Engineering Each unit of engineering work should make subsequent units of work easier—not harder.
Components
16 Specialized Agents
Core Development (4 agents):
rn-developer- React Native component development with best practicesrn-typescript-reviewer- TypeScript code review with RN-specific type safetyrn-architecture-strategist- React Native architecture and design decisionsrn-best-practices-researcher- Research RN community best practices
Specialized Development (5 agents):
rn-navigation-specialist- React Navigation implementationrn-state-management-expert- State management (Redux, Zustand, Context)rn-native-module-specialist- Native iOS/Android module integrationrn-styling-expert- StyleSheet optimization and responsive designrn-animation-specialist- Reanimated and Animated API implementation
Quality & Testing (4 agents):
rn-performance-analyzer- FPS, bundle size, memory optimizationrn-testing-specialist- Jest, Testing Library, Detox E2E testsrn-accessibility-auditor- VoiceOver/TalkBack compliancern-security-auditor- Secure storage, API security, permissions
Platform Operations (3 agents):
ios-simulator-specialist- iOS Simulator automation via MCPandroid-device-specialist- Android device/emulator automation via MCPrn-pattern-recognition- Identify patterns and anti-patterns
4 Workflow Skills
rn-ui-developer - Complete UI development workflow
- Figma design extraction
- Codebase pattern analysis with Serena
- Component implementation
- Visual verification on iOS Simulator and Android devices
- Iterative refinement until pixel-perfect
rn-api-integrator - Comprehensive API integration
- Postman API testing
- Service layer implementation
- React Native integration with React Query/SWR
- End-to-end data flow verification
- Offline support implementation
rn-app-tester - Thorough testing and validation
- Functional testing on both platforms
- Visual regression testing
- Performance analysis (FPS, memory, startup time)
- Accessibility auditing (VoiceOver, TalkBack)
- Network condition testing
rn-code-reviewer - Dual-layer code review
- Task completion verification
- Technical quality assessment
- React Native best practices validation
- Security audit
- Documentation review
6 Commands
/plan- Create structured GitHub issues for React Native features/work- Execute work plans with automatic skill invocation/review- Comprehensive code review/triage- Issue triage and prioritization/resolve_todo_parallel- Parallel TODO resolution/generate_command- Create custom commands
Bundled MCP Servers
The plugin automatically configures 6 MCP servers:
- iOS Simulator MCP - iOS app testing and automation
- Mobile Device MCP - Android device/emulator testing
- Figma MCP - Design extraction from Figma
- Postman MCP - API testing and validation
- Context7 MCP - React Native library documentation
- Serena MCP - Codebase pattern analysis
Installation
1. Install the Plugin
From Claude Code:
/plugin marketplace add [email protected]:trayalabs1/traya-plugin.git
/plugin install traya-react-native
2. Setup Requirements
iOS Simulator MCP (for iOS testing):
- macOS with Xcode installed
- iOS Simulator configured
Mobile Device MCP (for Android testing):
- Android device connected or emulator running
- ADB configured
Figma MCP (for design extraction):
- Figma Desktop App installed
- Designs prepared in Figma
Postman MCP (for API testing):
- APIs documented or Postman collections available
Context7 MCP:
- Automatically configured (no setup required)
Serena MCP:
- Automatically configured
- Optionally index your project:
uvx --from git+https://github.com/oraios/serena serena project index
Usage
Quick Start Workflow
Plan your React Native feature:
claude /plan "Create user profile screen with avatar upload"Execute the plan:
claude /work path/to/plan.mdThe
/workcommand automatically:- Detects task type (UI development, API integration)
- Invokes appropriate skills (rn-ui-developer → rn-api-integrator → rn-app-tester → rn-code-reviewer)
- Tests on both iOS and Android
- Provides iterative refinem
Included Skills
This plugin includes 4 skill definitions:
rn-api-integrator
Comprehensive API integration workflow for React Native applications. Use this skill when connecting frontend components to backend APIs, implementing data fetching, handling authentication, and testing API interactions. Uses Postman MCP for API testing, Context7 for documentation, Serena for pattern analysis, and iOS Simulator/Mobile Device MCPs for integration verification.
View skill definition
RN API Integrator
Overview
This skill provides a complete API integration workflow for React Native applications. The process includes API discovery, testing with Postman, implementing service layers, integrating with React components, handling authentication, error management, and verifying end-to-end data flow on both platforms.
Core Workflow
Phase 1: API Discovery & Testing
1. Analyze API Requirements
Identify integration needs:
- API endpoints to integrate
- Authentication requirements (JWT, OAuth, API keys)
- Request/response formats
- Error handling requirements
- Rate limiting considerations
- Real-time data needs (WebSockets, polling)
2. Test API with Postman MCP
Use Postman MCP for API exploration:
mcp__postman__postman - Test API endpoints
Test scenarios:
- Valid requests with proper authentication
- Invalid requests (missing params, wrong types)
- Edge cases (empty data, large payloads)
- Error responses (4xx, 5xx)
- Rate limiting behavior
- Response time and performance
3. Analyze Existing Patterns
Use Serena MCP to find similar integrations:
mcp__serena__search_for_pattern - Search for API service patterns
mcp__serena__find_symbol - Find existing API services
mcp__serena__get_symbols_overview - Understand service structure
Focus on:
- API client configuration
- Request interceptors
- Error handling patterns
- Token management
- Response transformation
- Caching strategies
4. Gather Documentation
Use Contex
rn-app-tester
Comprehensive testing and validation workflow for React Native applications. Use this skill after UI development and API integration are complete to perform functional testing, visual regression testing, performance analysis, accessibility auditing, and platform-specific behavior validation on both iOS and Android using iOS Simulator and Mobile Device MCPs.
View skill definition
RN App Tester
Overview
This skill provides comprehensive testing and validation for React Native applications. The workflow includes functional testing, visual verification, performance analysis, accessibility auditing, network condition testing, and platform-specific behavior validation on both iOS Simulator and Android devices.
Core Workflow
Phase 1: Functional Testing
1. Test User Flows on iOS
Use iOS Simulator MCP for functional testing:
mcp__ios-simulator__launch_app
mcp__ios-simulator__ui_describe_all
mcp__ios-simulator__ui_tap
mcp__ios-simulator__ui_type
mcp__ios-simulator__ui_swipe
Test scenarios:
- Login/logout flow
- Navigation between screens
- Form submissions
- Data CRUD operations
- Search functionality
- Filter and sort operations
- Pull-to-refresh
2. Test User Flows on Android
Use Mobile Device MCP for functional testing:
mcp__mobile-device__mobile_launch_app
mcp__mobile-device__mobile_list_elements_on_screen
mcp__mobile-device__mobile_click_on_screen_at_coordinates
mcp__mobile-device__mobile_type_keys
mcp__mobile-device__mobile_swipe_on_screen
mcp__mobile-device__mobile_press_button
Test same scenarios as iOS plus:
- Back button behavior
- Hardware button interactions
- Deep link handling
3. Cross-Platform Parity Check
Verify functional consistency:
- Same features work on both platforms
- Navigation patterns are consistent
- Data persistence works identically
- Error handling is uniform
- Performance is com
rn-code-reviewer
Dual-layer code review workflow for React Native applications. Use this skill after all development and testing are complete to perform comprehensive code review including task completion verification, technical quality assessment, React Native best practices validation, performance optimization review, security audit, and documentation verification using Serena MCP for codebase analysis.
View skill definition
RN Code Reviewer
Overview
This skill provides comprehensive dual-layer code review for React Native applications. The review process verifies task completion against requirements, evaluates technical quality, ensures React Native best practices, validates TypeScript usage, checks performance optimization, audits security, and verifies documentation completeness.
Core Workflow
Layer 1: Task Completion Verification
1. Review Requirements
Verify all requirements met:
- Original task/issue requirements
- Acceptance criteria fulfilled
- User stories completed
- Design specifications matched
- API integration requirements
- Performance targets met
2. Functional Verification
Confirm functionality:
- Feature works as described
- All user flows complete
- Edge cases handled
- Error states implemented
- Loading states present
- Empty states designed
3. Platform Parity
Verify both platforms:
- Feature works on iOS
- Feature works on Android
- Platform differences intentional
- Both platforms tested
- Screenshots captured
- Visual consistency verified
Layer 2: Technical Quality Assessment
4. Code Structure Review
Use Serena MCP to analyze:
mcp__serena__find_symbol - Find components/functions
mcp__serena__find_referencing_symbols - Check usage
mcp__serena__search_for_pattern - Find anti-patterns
Evaluate:
- Component structure (functional, single-responsibility)
- File organization (feature-based)
- Import organization
- Code duplicati
rn-ui-developer
Comprehensive UI development workflow for React Native applications. Use this skill when building new screens or components from Figma designs. The skill implements an iterative design-matching process using Figma MCP to extract design specifications, Serena MCP to analyze existing codebase patterns, Context7 MCP for library documentation, and iOS Simulator/Mobile Device MCPs for visual verification on both platforms.
View skill definition
RN UI Developer
Overview
This skill provides a complete UI development workflow that bridges Figma designs to production-ready React Native code. The workflow uses an iterative design-matching loop: extract design specifications from Figma, analyze existing codebase patterns, implement code following React Native best practices, verify visual accuracy on iOS Simulator and Android devices, and refine until the implementation matches the design perfectly on both platforms.
Core Workflow
Follow this sequential workflow for all React Native UI development tasks:
Phase 1: Design Analysis & Planning
1. Extract Design Specifications
Use Figma MCP to analyze the design:
mcp__figma-dev-mode-mcp-server__get_design_context
mcp__figma-dev-mode-mcp-server__get_variable_defs
mcp__figma-dev-mode-mcp-server__get_screenshot
Focus on:
- Component structure and hierarchy
- Colors, typography, spacing
- Platform-specific designs (iOS vs Android)
- Interactive states (pressed, disabled, focused)
- Responsive behavior for different screen sizes
- Animations and transitions
- Design tokens and variables
2. Analyze Existing Codebase
Use Serena MCP to understand current patterns:
mcp__serena__search_for_pattern - Search for similar components
mcp__serena__get_symbols_overview - Get overview of relevant files
mcp__serena__find_symbol - Find reusable components
mcp__serena__find_referencing_symbols - Understand component usage
Focus on:
- Existing componen