|
| 1 | +--- |
| 2 | +applyTo: "**/*.{ts,tsx,js,jsx}" |
| 3 | +--- |
| 4 | + |
| 5 | +# TypeScript And React Review Instructions |
| 6 | + |
| 7 | +## Code Quality |
| 8 | + |
| 9 | +- Flag unnecessary abstractions, one-off helpers, excessive indirection, and defensive code without a real use case. |
| 10 | +- Flag comments that restate obvious code instead of explaining non-obvious intent. |
| 11 | +- Check that changes follow existing project style, structure, naming, and local patterns. |
| 12 | + |
| 13 | +## TypeScript |
| 14 | + |
| 15 | +- Flag uses of `any`, unsafe `as` assertions, and non-null assertions (`!`) unless clearly justified. |
| 16 | +- Avoid broad types such as `object`, `Function`, `{}`, and `Record<string, unknown>` unless the broadness is intentional. |
| 17 | +- Do not accept `@ts-ignore`. |
| 18 | +- Only accept `@ts-expect-error` when it has a comment explaining why the error is expected and cannot be resolved. |
| 19 | +- Prefer simple types over complex conditional types, overloads, or type logic when simpler approaches work. |
| 20 | +- Prefer `type` aliases over `interface` unless there is a specific reason to use `interface`. |
| 21 | + |
| 22 | +## React |
| 23 | + |
| 24 | +- Check that hooks follow the Rules of Hooks. |
| 25 | +- Check dependency arrays for unstable values. |
| 26 | +- Ensure components do not perform side effects during rendering. |
| 27 | +- Avoid storing values in state when they can be derived from props or existing state. |
| 28 | +- Avoid multiple sources of truth for the same state. |
| 29 | +- Avoid `React.Children`, `cloneElement`, and reading React elements directly unless there is a strong justification. |
| 30 | +- Treat memoization as something that needs a reason: expensive calculation, stable identity requirement, or measured performance need. |
| 31 | +- Check async effects for cancellation or race conditions when relevant. |
| 32 | +- Check accessibility: labels, roles, focus order, keyboard interactions, disabled states, and loading states. |
| 33 | + |
| 34 | +## Animations And Layout |
| 35 | + |
| 36 | +- Check for unnecessary layout shifts. |
| 37 | +- Prefer animating only `transform` and `opacity` unless another property is required. |
| 38 | +- For layout transitions, verify the approach handles rapid state changes, gestures, interruption, and cancellation. |
| 39 | +- Check that duration and easing feel appropriate for the platform and interaction. |
| 40 | +- Verify text and UI elements do not overlap or overflow at supported screen sizes. |
0 commit comments