AI Coding Rules

GitHub CopilotReactCode Style

React GitHub Copilot Instructions

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

.github/copilot-instructions.md

- Generate functional components with TypeScript prop types defined above the component
- Use Tanstack Query for server state; React Context for global app state
- Include keyboard navigation and ARIA attributes in all interactive components
- Generate stories (Storybook) for all shared UI components
- Apply tailwind classes with cn() helper for conditional styling
- Use React Hook Form with zod resolver for form validation
- Generate tests with React Testing Library; avoid testing implementation details
- Use Framer Motion for animations; avoid CSS transitions for complex sequences

How to use with GitHub Copilot

Create `.github/copilot-instructions.md` in your repository. GitHub Copilot uses these to customize suggestions across your whole repo.

← All GitHub Copilot rules All React rules →

#react#copilot#github#components#coding-rules

Related Rules

TypeScript GitHub Copilot Instructions

GitHub CopilotTypeScript

GitHub Copilot custom instructions for TypeScript: strict types, modern patterns, and team conventions.

typescript · copilotCopy Ready

Next.js GitHub Copilot Instructions

GitHub CopilotNext.js

GitHub Copilot custom instructions for Next.js App Router projects.

nextjs · copilotCopy Ready

Java GitHub Copilot Instructions

GitHub CopilotJava

GitHub Copilot instructions for Java 21: virtual threads, records, sealed types, and modern Spring Boot patterns.

java · springCopy Ready

Swift GitHub Copilot Instructions

GitHub CopilotSwift

GitHub Copilot instructions for Swift: SwiftUI, async/await, and modern iOS development patterns.

swift · swiftuiCopy Ready