afrexai-react-production
Complete methodology for building production-grade React applications with architecture decisions, component design, state management, performance optimization, testing, and deployment.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/1kalin/afrexai-react-productionWhat This Skill Does
The afrexai-react-production skill provides a battle-tested, professional engineering methodology for React development. It moves beyond standard documentation to provide decision frameworks, architecture assessment templates, and performance scoring systems. This skill helps developers assess their current project health, choose the right tech stack based on project scale and requirements, and maintain strict production standards including bundle optimization, type safety, and architectural integrity.
Installation
To integrate this methodology into your project, run the following command in your terminal within your OpenClaw environment:
clawhub install openclaw/skills/skills/1kalin/afrexai-react-production
Use Cases
- Project Kickoff: Use the provided architecture brief template to define constraints, stack choices, and goals before writing the first line of code.
- Technical Audits: Run the 'Quick Health Check' against existing codebases to identify technical debt, bottlenecks in bundle size, or architectural drift.
- Framework Selection: Use the built-in Decision Matrix to evaluate whether your project should be a Vite SPA, Next.js app, Remix route-based project, or an Astro-powered content site.
- Standardization: Establish a feature-based folder structure to ensure large teams maintain consistency as they scale.
Example Prompts
- "Analyze my current architecture using the Quick Health Check and suggest improvements for a dashboard project currently hitting 400KB bundle size."
- "Help me fill out the Architecture Brief for a large-scale SaaS product. I am deciding between Remix and Next.js and need to weigh team familiarity versus SEO requirements."
- "Review my current state management approach. We are using Redux, but I want to transition to something more lightweight like Zustand; walk me through the architectural trade-offs."
Tips & Limitations
This skill is designed as an architectural guidance tool and meta-framework. While it provides high-level structures and scoring, it does not automatically refactor your codebase. Use it as a decision-support system to guide manual engineering changes. Always prioritize the 'Zero any types' rule to maintain long-term maintainability, but acknowledge that legacy migrations may require incremental adoption. Ensure your test coverage is focused on business logic rather than implementation details for the highest ROI.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-1kalin-afrexai-react-production": {
"enabled": true,
"auto_update": true
}
}
}