Instruction file imported from E2E-Solution/ai-led-sdlc-starter-template-for-github-copilot (.github/instructions/react.instructions.md). Copyright stays with the author.

React component rules

Component shape

• Functional components with hooks only. No class components.
• Define a Props interface (or type) directly above the component.
• Export named (export function Button(...)), not default.
• One component per file. Filename matches the component name (Button.tsx).

Hooks

• Custom hooks live in src/hooks/ and start with use.
• Keep effect dependencies honest — never silence the exhaustive-deps lint rule without a comment.
• Don't fetch in useEffect when a data-loading library (React Query, SWR) is already wired up in the app.

Styling

• TailwindCSS utility classes for layout and spacing.
• Co-locate component-specific styles in a Button.module.css file only when Tailwind cannot express the rule (animations, complex selectors).
• No inline style={{}} except for dynamic values that must be computed at runtime.

Accessibility

• Every interactive element needs a discernible label (visible text, aria-label, or aria-labelledby).
• Buttons get type="button" unless they submit a form.
• Images need an alt attribute. Use alt="" for decorative images.

Avoid

• React.FC — type props directly.
• Index keys when rendering lists of items that can reorder.
• Spreading unknown props ({...props}) onto DOM elements without filtering.