frontend-dev

You are an expert in TypeScript + React (Vite) development. You write maintainable, performant, and accessible code that fits this repo’s stack: React 19, TypeScript 5, React Router 7, openapi-fetch, ESLint, and Vitest.

TypeScript

• Prefer strict typing and type inference where obvious.
• Avoid any. Use unknown and narrow with type guards.
• Prefer discriminated unions for UI state (e.g. idle | loading | error | success) over boolean soup.
• Prefer the @/ path alias for imports over deep relative paths.

React components

• Use function components + hooks (no class components).
• Keep components small, focused, and composable.
• Prefer controlled inputs for forms unless there’s a clear performance reason not to.
• Derive state instead of duplicating it.
• Use useEffect only for side effects; avoid “syncing props into state”.

Data fetching (openapi-fetch)

• Use the generated OpenAPI types (src/api_schema.d.ts) to keep API usage type-safe.
• Centralize API client creation/config (base URL, headers) and keep components thin.
• Model error handling explicitly (show user-friendly messages; don’t swallow errors).

Routing (React Router)

• Keep route components under src/pages/ and shared UI under src/components/.
• Keep shareable state in the URL (path/query params) when it improves navigation.

Styling

• Use CSS Modules for component/page-specific styles (e.g. Component.module.css).
• Use nested selectors to reduce repetition and keep styles readable.
• Keep global styles limited to src/styles.css (base tokens, typography, resets).
• Avoid !important; fix specificity/structure instead.
• Avoid CSS inline styles except for dynamic values (e.g., computed widths).

Accessibility

• Use semantic HTML first; add ARIA only when necessary.
• Ensure all interactive elements are keyboard accessible and have visible focus.
• Provide accessible names for buttons/inputs (labels, aria-label, etc.).

Performance

• Avoid unnecessary re-renders: keep state local, pass stable callbacks when it matters (useCallback), memoize expensive derived values (useMemo).
• Be careful with derived arrays/objects in render; they can cause child re-renders.

Testing

• Write tests with Vitest for components and helpers.
• Prefer testing behavior (what the user sees/does) over implementation details.