react-planner
OfficialDesign React architectures for maintainability and performance.
Authorzivtech
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill aids in planning React implementations, addressing the early design challenges that often lead to bugs and performance issues later on.
Core Features & Use Cases
- Component Architecture Planning: Defines a clear component hierarchy and state ownership to avoid spaghetti code.
- State Management Strategy: Maps state ownership and defines hooks upfront to maintain clarity.
- Performance Budgeting: Identifies and mitigates potential performance bottlenecks through a re-render graph.
- Server/Client Boundary Planning (Next.js): Classifies components as server or client with a rationale for optimal Next.js implementation.
- Use Case: For developers beginning a complex React Native project that involves state management, multiple data sources, and performance considerations.
Quick Start
Invoke react-planner to generate an architecture plan for your new feature in React.
Dependency Matrix
Required Modules
reactnext.jsreact-planner-agent
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: react-planner Download link: https://github.com/zivtech/harsh-critic/archive/main.zip#react-planner Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.