- name
- frontend-typescript-rules
- description
- Applies React/TypeScript type safety, component design, and state management rules. Use when implementing React components.
TypeScript Development Rules (Frontend)
Frontend-specific React/TypeScript rules for implementation: review signals, boundary type safety, component/state design, error handling, and project conventions.
Prerequisite Detection
Inspect TypeScript, bundler/framework, lint/format, path-alias, React compiler, and representative component configuration before applying a project convention. Treat a convention as observed when configuration or an established repository pattern supports it; label a conclusion from limited examples as inferred. When conflicting patterns affect public behavior, compatibility, or component boundaries, stop and name the required source or decision.
Design Review Signals
Use these as review prompts, not pass/fail thresholds. Existing project conventions and the component's responsibility take precedence.
- Prop drilling through 3+ levels: review lifting to Context or state management
- Component over 300 lines: review whether it mixes responsibilities
- Props count over 10: review ownership or splitting
- Optional props over 50%: review defaults or ownership
- Props nesting deeper than 2 levels: review flattening
Type Safety at Boundaries
Receive untrusted or unavailable types as unknown and narrow them with a type guard. Use as only when a runtime/framework invariant proves the asserted type and record that invariant in a nearby comment. Existing generated or third-party declarations that contain any are boundary inputs to wrap, not justification for spreading any into application contracts.
Inside the app, React Props/State are type-guaranteed — no unknown needed. At every external boundary, receive as unknown and narrow with a type guard before use: API responses, localStorage/sessionStorage, URL parameters, parsed JSON. Controlled-component form input stays type-safe through React synthetic events.
const raw: unknown = await (await fetch(url)).json()
if (!isUser(raw)) throw new ValidationError('invalid user')
const user = raw // narrowed to User
Component and State Design
- Class components are allowed solely for Error Boundaries (no hook equivalent exists)