react

Define React 19 development conventions for components, hooks, state, routing, and testing.

1|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/george-popescu/bee-dev --skill react-george-popescu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/george-popescu/bee-dev/tree/main/plugins/bee/skills/stacks/react
Command: npx skills add https://github.com/george-popescu/bee-dev --skill react-george-popescu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized set of conventions and patterns for developing React 19 applications, ensuring consistency and best practices across projects.

Core Features & Use Cases

  • Component Architecture: Enforces function components, single responsibility, and composition over inheritance.
  • Hooks Usage: Details best practices for core hooks (useState, useEffect, etc.) and custom hook creation.
  • State Management: Guides on using Context API, Zustand, and Jotai for efficient state handling.
  • Routing: Specifies React Router v7 conventions for data loading and mutations.
  • Testing: Recommends React Testing Library and Vitest for robust testing strategies.
  • Use Case: A new developer joins a React project and needs to understand the established coding standards for components, hooks, and state management. This Skill provides the definitive guide.

Quick Start

Follow the React 19 conventions for building a new component.

Frequently Asked Questions about react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for React 19 component architecture and hooks?

React 19 conventions enforce functional components, single responsibility, and composition over inheritance. Hook usage follows strict rules for core hooks like useState and useEffect, alongside specific patterns for custom hook creation.

How do I manage state in a React 19 application using Zustand and Jotai?

State management in React 19 uses the Context API, Zustand, and Jotai for efficient state handling. These libraries are applied following specific conventions to ensure strict rules for state mutation and functional component integration.

What conventions should I follow for routing and data loading with React Router v7?

React Router v7 conventions specify standardized patterns for data loading and mutations within React 19 applications. Following these routing rules ensures consistency and best practices across your project's navigation structure.

Does this React 19 pattern guide require TypeScript and specific testing libraries?

Yes, React 19 development conventions enforce TypeScript interfaces and recommend using React Testing Library and Vitest. These tools provide robust testing strategies and ensure type-safe component architecture and hook usage.

When should I avoid inheritance in React 19 component design?

You should avoid inheritance when building React 19 components because the conventions enforce function components and composition over inheritance. This ensures single responsibility and standardized architectural patterns across the application.