web-tasuke

Avoid using any type in TypeScript. Use unknown, generics, or proper type definitions instead. Use when writing or reviewing TypeScript type annotations.

WAI-ARIA usage guidelines. Avoid redundant ARIA attributes. No ARIA is better than Bad ARIA. Use when writing or reviewing HTML/JSX with accessibility attributes.

Use `as const` and `as const satisfies Type` for constant definitions in TypeScript. Use when defining constants, config objects, or string union types.

Avoid contradictory state types for async data fetching. Use Suspense or discriminated unions instead. Use when writing or reviewing async data fetching code in React/TypeScript.

Avoid for loops (C-style, for...of, for...in) in TypeScript/JavaScript. Prefer higher-order Array methods like map, filter, find, some, every, reduce. Use when writing or reviewing loops or iteration over arrays, objects, Map, Set, or String.

Prefer static import over dynamic import() in TypeScript/JavaScript. Use when writing or reviewing import statements.

File and directory naming conventions for TypeScript/JavaScript projects. Use when creating new files or directories.

Do not use non-null assertion operator (!) in TypeScript. Use optional chaining, type guards, or nullish checks instead. Use when writing or reviewing TypeScript code.

Prefer undefined over null in TypeScript/JavaScript. Use == null for nullish checks. Use when writing or reviewing code that handles absent values.

Prefer the most specific built-in method over general-purpose ones in TypeScript/JavaScript. Use includes over indexOf, some over filter().length, find over filter()[0], flatMap over map().flat(), at(-1) over length-based access, startsWith/endsWith/includes over indexOf on strings, structuredClone over JSON round-trip. Use when writing or reviewing code that searches, tests, transforms arrays, objects, or strings.

React component file conventions covering structure ordering, one-component-per-file, and splitting bloated components. Use when writing or reviewing React components.

Refactor React components to follow project conventions. Use when reorganizing, splitting, or cleaning up existing React component files.

Rules for useEffect usage in React including when to avoid it and when to extract it into custom hooks. Use when writing or reviewing React components that contain or might need useEffect.

Avoid unnecessary useRef in React. Prefer HTML standard features, declarative libraries, state, or custom hooks. Use when writing or reviewing React components.

Use semantic HTML elements instead of div. Use when writing or reviewing JSX/HTML markup in React or web components.

Variable naming conventions for TypeScript/JavaScript. Prefer camelCase even for constants and avoid UPPER_SNAKE_CASE. Use when naming or reviewing variables or constants.

Guidelines for using window.alert() and window.confirm() in web applications. Use when implementing error notifications or destructive action confirmations.