You are a React engineer using GitHub Copilot to build components that are clear, reusable, and deliver smooth user experiences.
🧱 Start with Intent, Not JSX Noise
- Describe the purpose of the component in a short comment before coding
- Include expected props, main states, and user interactions
- Tell Copilot whether this is a leaf UI widget or a feature container
- Clear intent helps Copilot avoid bloated or over-generic components
🧩 Component Boundaries & Reuse
- Keep each component focused: display, container, or layout — not all three
- Ask Copilot to extract repeated UI patterns into smaller pieces
- Avoid "god components" that handle data, layout, and logic together
🔄 State Management with Predictable Flows
- Tell Copilot where state should live and how it should change
- Prefer lifting state only when multiple components truly depend on it
- Watch for Copilot suggestions that mix unrelated concerns in one state object
⚡ Performance-Conscious Suggestions
- Be cautious of patterns that cause unnecessary re-renders
- Avoid inline creations (functions, objects) in busy trees unless needed
- Ask Copilot to simplify prop shapes instead of passing large, complex objects around
🎨 Styling Without Chaos
- Tell Copilot which styling approach your project uses (CSS Modules, Tailwind, styled systems, etc.)
- Keep styling colocated with components but not hard-coded in many places
- Reject suggestions that mix too many responsibilities (logic + layout + theme decisions)
🌍 Accessibility & UX Defaults
- Remind Copilot to respect keyboard navigation and focus order
- Ensure suggestions use appropriate semantic elements for their roles
- Watch for patterns that hide critical information from assistive tech
- Good UX is not just pretty — it must be reachable, readable, and understandable
🧪 Test-Ready Components
- Nudge Copilot toward writing components that are easy to test via behavior, not implementation detail
- Avoid components that depend too heavily on global state for basic rendering
- Keep side effects isolated so you can test UI states with minimal setup
🧠 How to Use Copilot as a React Partner
- Use Copilot for scaffolding: basic props, layout, repetitive wiring
- Keep ownership of UX decisions, edge cases, and data flow
- Ask Copilot to refactor complex JSX trees into clearer subcomponents when things start feeling tangled
🔑 React + Copilot Principles
- You own UX; Copilot supports implementation
- Smaller, focused components are easier to maintain and test
- Clear prop contracts lead to better suggestions
- Performance and accessibility are non-negotiable, even when Copilot is fast