react

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of conventions and patterns for building React 19 applications, ensuring consistency, maintainability, and adherence to best practices.

Core Features & Use Cases

  • Component Architecture: Enforces function components, single responsibility, and composition over inheritance.
  • Hooks Usage: Details core hooks, rules of hooks, and custom hook creation.
  • State Management: Guides on local, complex, shared, and external state management solutions.
  • Routing: Specifies React Router v7 usage with loaders and actions.
  • Build & Tooling: Outlines Vite configuration, environment variables, and path aliases.
  • Testing: Recommends React Testing Library and Vitest, emphasizing user behavior testing.
  • Common Pitfalls: Lists critical "NEVER" rules to avoid common mistakes.

Quick Start

Follow the React 19 conventions and patterns outlined in this skill for your project.

Frequently Asked Questions about react

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

FAQPage Schema
What are the standard conventions for structuring components and hooks in React 19?

React 19 conventions mandate functional components, composition over inheritance, and specific hook usage patterns. State management is guided through Context API for shared state, while Zustand and Jotai handle complex external state management scenarios.

How do I configure routing and build tooling for a React 19 application?

React 19 routing conventions specify React Router v7 with loaders and actions. Build tooling configuration uses Vite, handling environment variables and path aliases to establish the application development workflow.

What is the best way to manage complex state in React 19?

The best way to manage complex state in React 19 involves using Zustand or Jotai for external state management. Context API handles shared state, while local state relies on standard built-in hooks.

Does React 19 testing require specific libraries for component behavior validation?

React 19 testing conventions require React Testing Library and Vitest for component behavior validation. This approach emphasizes testing user behavior rather than internal implementation details to ensure robust application validation.

What common pitfalls should I avoid when building React 19 web applications?

Common pitfalls in React 19 include violating rules of hooks and improper state management. The conventions define critical NEVER rules to avoid these frequent mistakes and ensure consistent frontend web development practices.

Can I use TypeScript with these React 19 component architecture patterns?

Yes, TypeScript is a core keyword for these React 19 conventions and patterns. The component architecture, hooks usage, and state management solutions are designed to integrate seamlessly with TypeScript web development.