afrexai-react-production
Complete methodology for building production-grade React applications with architecture decisions, component design, state management, performance optimization, testing, and deployment.
Best for Production React applicatio…Works with GitHub
⌘source
- author
@LeoYeAI- language
- Python
★2kstars
306forks
May 6, 2026
✦overview.md
Key Features
- ·Architecture assessment with health score
- ·Component design and state management guidance
- ·Performance optimization checklist
- ·Testing coverage criteria
- ·Deployment methodology
Use Cases
- →Evaluate a React project's production readiness
- →Build a new production-grade React application from scratch
- →Refactor an existing React codebase to meet production standards
- →Compare React frameworks for a specific project scale
Best for
- ✓Production React applications
- ✓Startup engineering teams
- ✓React codebase audits
Not ideal for
- !Small one-off projects
- !Non-React frontends
- !Projects without TypeScript
name
afrexai-react-production
description
Complete methodology for building production-grade React applications with architecture decisions, component design, state management, performance optimization, testing, and deployment.
React Production Engineering
Complete methodology for building production-grade React applications. Covers architecture decisions, component design, state management, performance optimization, testing, and deployment — not just API reference, but engineering methodology with decision frameworks, templates, and scoring systems.
Phase 1: Architecture Assessment
Quick Health Check (score /16)
- Component tree depth < 6 levels (+2)
- No prop drilling past 2 levels (+2)
- Bundle size < 200KB gzipped (+2)
- LCP < 2.5s on 4G (+2)
- Test coverage > 70% on business logic (+2)
- Zero
anytypes in production code (+2) - No direct DOM manipulation (+2)
- Consistent error boundaries (+2)
Architecture Brief
project:
name: ""
type: "" # spa | ssr | hybrid | static
framework: "" # next | remix | vite-spa | astro
scale: "" # small (<20 routes) | medium (20-100) | large (100+)
team_size: "" # solo | small (2-5) | medium (6-15) | large (15+)
current_state:
react_version: "" # 18 | 19
typescript: true
router: "" # react-router | next-app | tanstack-router
$install
1-click copynpx skills add LeoYeAI/openclaw-master-skills --skill afrexai-react-productionSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.