writing-react-ts-code
Writing React/TypeScript Code
This is the authoritative standard for all React/TypeScript code. Every file you write or modify must conform to these rules. They are not suggestions.
1. TypeScript Strict Configuration
ESLint Flat Config
Use typescript-eslint with strict + type-checked presets, plus additional rules. Some rules use warnInDevModeErrorInProd() — warn during development, error in CI/production.
Key enforced rules (beyond the strict preset):
// Zero tolerance for type escape hatches
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/no-unsafe-assignment': 'error',
'@typescript-eslint/no-unsafe-call': 'error',
More from quick-brown-foxxx/coding_rules_ts
testing-react-ts
React/TypeScript testing with Vitest and Playwright: philosophy, component tests, integration tests, e2e tests, test infrastructure. Use when writing tests or setting up test infrastructure. ALWAYS load this for working with tests in react.
2managing-state
State management patterns: Zustand stores, React Context, URL state, form state. Use when creating stores, managing component state, or choosing state patterns. ALWAYS load this skill when writing any react code!
2building-ui-components
UI component patterns: shadcn/ui, component organization, variant system. Use when building or modifying React UI components. ALWAYS load this skill when working with react code.
2building-api-clients
Type-safe API clients: HTTP client, Zod validation, Result pattern, Swagger codegen. Use when creating API integrations or working with backend services. ALWAYS load this skill when working with APIs in react clients
2setting-up-nextjs-projects
Next.js project setup: directory structure, configuration, tooling, environment validation. Use when bootstrapping new projects or understanding project layout.
2