React & TypeScript coding standards

This skill applies company coding standards expressed as Avoid (anti-patterns) and Prefer (recommended patterns) to in-code patterns only. For file and folder naming and structure, use react-files-structure-standards.

Source of truth (priority order)

When resolving standards, use this order:

1. Project tooling: ESLint config (eslint.config.js / .eslintrc*), TypeScript config (tsconfig.json, tsconfig.app.json). Run yarn lint or npm run lint; fix auto-fixable issues first.
2. Rule references in references/ (see Reference categories below) for the canonical Avoid/Prefer matrix.
3. Worked examples in coding-examples/ for concrete before/after snippets and explanations.
4. Reference codebase (if provided): e.g. a frontend app under the same org — use it to infer naming, structure, and patterns (hooks returning data only, FunctionComponent + destructured props, *.utils.ts / *.store.ts, test style with Vitest or Jest).

Reference categories

Standards are split between:

• references/ for the canonical Avoid/Prefer rules.
• coding-examples/ for detailed examples and rationale.