React

What This Skill Does

The React skill for OpenClaw is an advanced engineering framework for building high-performance, maintainable web applications. It enforces modern React 19 standards, including Server Components, Actions, and optimized state management patterns. This skill is designed to guide users through the entire development lifecycle, from architectural decision-making and component design to testing and production deployment. By adhering to the strictly defined 'Component Rules' and 'State Management' hierarchy, the skill ensures that codebases remain clean, readable, and performant as they scale. It provides built-in patterns for TanStack Query for server-side data, Zustand for client-side state, and Zod for schema validation, preventing common anti-patterns like mixing server and UI state.

Installation

To integrate this skill into your agent, run the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/react

Use Cases

• Refactoring legacy class components into modern, functional React 19 components using hooks and Server Components.
• Architecting new greenfield applications with clear separation between server state, global client state, and local component state.
• Debugging performance bottlenecks and rendering issues in high-traffic applications, such as infinite re-renders or stale closures.
• Implementing complex form validation workflows using React Hook Form and Zod for robust data integrity.
• Migrating existing projects to the Next.js App Router paradigm.

Example Prompts

1. "Create a UserCard component following the latest React 19 patterns. It needs to accept a user object as a prop, use TanStack Query for the data fetching, and handle the edit state using a local hook."
2. "Review this component code and tell me if I am violating the 'state management' rule. I am currently using Zustand for data I fetched from an API, and I think I should switch to TanStack Query."
3. "Help me refactor this 200-line file into smaller, modular components and ensure I am using proper naming conventions and exported interfaces for all props."

Tips & Limitations

To maximize the value of this skill, always prioritize the architectural decision table provided. Avoid the temptation to use Context for high-frequency state updates; prefer Zustand selectors to ensure components only re-render when their specific slice of state changes. Remember that this skill focuses on professional engineering: all components should be modular, testable, and under 300 lines of code. If you find your JSX exceeding 50 lines, treat it as a mandatory refactor signal to split the component further. The skill is specifically tuned for modern ecosystems (Next.js/React 19), so older patterns like Redux or class-based components may be discouraged in favor of more performant, modern alternatives.