Copilot instructions

1---
2description: 'React and TypeScript specific coding instructions for frontend development.'
3applyTo: '**.tsx, **.jsx, **/components/**, **/hooks/**'
4---
5 
6# React / TypeScript Instructions
7 
8> Auto-loads when editing React files. For comprehensive standards, load the skill.
9 
10**Skill**: [.github/skills/languages/react/SKILL.md](../skills/languages/react/SKILL.md)
11 
12## Key Rules
13 
14- Functional components only, with TypeScript interfaces for props
15- Destructure props in function signature
16- Custom hooks: extract reusable logic, prefix with `use`
17- useCallback for callbacks passed to children
18- useMemo for expensive computations
19- React.memo for pure components
20- React Query / TanStack Query for server state
21- Zustand or Jotai for client state (avoid prop drilling)
22- React Testing Library -- test behavior, not implementation
23- MSW for API mocking in tests
24- Always include alt text, use semantic HTML, ensure keyboard navigation
25 
26## Critical Rules (Embedded -- Always Active)
27 
28### Testing
29- 80%+ code coverage required
30- React Testing Library: query by role/label, NEVER by test-id unless no alternative
31- Test user behavior (clicks, types, submits) not implementation details
32- Use `screen.getByRole()`, `userEvent.click()`, `waitFor()` for async
33- MSW for API mocking -- intercept at network level, not in component
34 
35### Accessibility
36- All images MUST have descriptive `alt` text
37- All interactive elements MUST be keyboard-accessible
38- Use semantic HTML (`<button>`, `<nav>`, `<main>`, `<article>`)
39- Color contrast MUST meet WCAG 2.1 AA (4.5:1 for text)
40- Test with `axe-core` or `jest-axe` in automated tests
41 
42### Security
43- Sanitize any user-generated HTML (use `DOMPurify`)
44- Never use `dangerouslySetInnerHTML` without sanitization
45- Validate all form inputs with `zod` schemas at the boundary
46- Never store secrets or tokens in client-side code
47 
48