AI Coding Rules for React

1. Carefully consider the component's purpose, functionality, and design

React Cursor Rules

Cursor rules for React: component patterns, hooks best practices, performance optimization, and clean state management conventions.

react · hooksCopy Ready

Tailwind (React, Firebase) Rules

Here are some best practices and rules to follow for creating a high-quality, mobile-first web app with excellent UI/UX using Tailwind, React, and Firebase:

React (React Query) Rules

const preferFunctionalComponents = true;

Code Style

React Claude Rules

ClaudeReact

Claude rules for React: component design, state patterns, performance, and testing conventions in CLAUDE.md.

react · claudeCopy Ready

React Native Expo Rules

const reactNativeExpoBestPractices = [

cursor · react-nativeCopy Ready

React (Chakra UI) Rules

const preferFunctionalComponents = true;

React (Styled Components) Rules

const preferFunctionalComponents = true;

Code Style

react · copilotCopy Ready

React GitHub Copilot Instructions

GitHub CopilotReact

GitHub Copilot instructions for React: hooks, patterns, and best practices for modern React apps.

Code Style

React Windsurf Rules

WindsurfReact

Windsurf rules for React: modern patterns, performance, and scalable React architecture.

react · windsurfCopy Ready

React Cline Rules

ClineReact

Cline rules for React: component patterns, performance, and modern React architecture.