CodeRules AI

imagesperformanceassetswebppnglazy-loading

Optimize raster images before committing

Large PNG, JPEG, and similar raster assets should be compressed, converted, or resized before they land in the repo. Non-critical images should also avoid eager loading by default.

Apr 20, 2026performance

reactpollingformsmodalsstate-managementux

Pause background refresh while the user is editing

Do not let polling or background refresh overwrite in-progress modal or form state. Suspend refresh or isolate draft state until editing is complete.

Apr 20, 2026react

typescriptnullabilityidssafetyvalidation

Do not cast away nullable identifiers

When an identifier is nullable in the type system, narrow or reject it explicitly before use instead of hiding the risk with a cast.

Apr 20, 2026typescript

configenvironmentdeploymentruntimenextjsfrontend

Use runtime server config for deployment-specific values

Do not rely on build-time public environment variables for values that differ by deployed environment. Resolve deploy-specific origins and flags at runtime on the server boundary.

Apr 20, 2026general

cssline-clamptruncationmaintainabilityfrontend

Prefer CSS clamping over JS truncation for text previews

When the UI only needs a collapsed preview with optional expansion, use native CSS clamping instead of custom JS truncation logic, especially for rich text.

Apr 20, 2026general

pr-reviewlinttestingduplicationcode-qualitymaintainability

Review and verify code before opening a PR when explicitly requested

Run the project's lint/tests and review the diff for duplication, weak abstractions, dead code, fragile logic, and pattern mismatches only when the user explicitly asks for a pre-PR check.

Apr 20, 2026general

reacthooksusecallbackrefsstabilityperformance

Prefer refs for latest state in stable callbacks

When a useCallback only needs the latest state for a lookup or imperative action, read it from a ref instead of depending on the whole state collection.

Mar 26, 2026react

validationapierror-handling

Validate request payloads before side effects

Validation prevents bad data from reaching the database and gives clients clear errors.

Mar 26, 2026node

Prefer early returns over deep nesting

Early returns keep control flow easy to read and reduce indentation.

readabilitycontrol-flow

Mar 26, 2026node

reactduplicationcomponentsmaintainabilityreuse

Extract duplicated UI primitives into shared components

If identical presentational blocks appear in multiple files, move them into a shared component instead of duplicating markup and styling contracts.

Mar 23, 2026react

reacthooksperformancestabilitycallbacks

Memoize stable callback props with useCallback

When passing non-trivial handlers to hooks or child components, extract them and wrap them in useCallback so they are not recreated on every render.

Mar 23, 2026react

destructuringnamingreadabilitytypescript

Prefer semantic disambiguation around destructuring

If destructuring would collide with existing names, rename the surrounding locals based on their source or role, not with vague prefixes like current or updated.

cssstylingspecificitydocumentation

Document non-obvious !important overrides

When !important is genuinely needed to beat framework-injected styles, explain the conflict in a short comment.

Mar 20, 2026react

namingcomponentsuioverlays

Name overlay components after their actual UI behavior

Overlay component names should match what they render: Popover, Drawer, Dialog, or a neutral Panel when needed.

Mar 20, 2026react

destructuringcallbackscollectionsreadability

Prefer callback parameter destructuring for simple property reads

If a collection callback only reads one property from its item, destructure that property in the parameter list.

typescripttypesgenericsapi-design

Extract complex generic callback signatures into named type aliases

Do not inline non-trivial generic callback types in props or exported interfaces.

destructuringreadabilitymaintainability

Destructure repeatedly used fields from the same object

When several fields from one object are used together, destructure them once instead of repeating property access.

chartsapitimestampssource-of-truth

Use API time-series values as the chart x-axis source of truth

If the backend already returns timestamps for graph points, the chart should use those timestamps directly instead of synthesizing index-based x-axis values.

Mar 17, 2026react

duplicationutilitiesreusemaintainability

Extract duplicated frontend helpers into shared utilities

If two frontend files need the same helper or constants, move them to a shared utility instead of duplicating or mirroring them.

Mar 17, 2026typescript

apicontractsfrontendbackendworkarounds

Prefer API contract fixes over client-side metadata backfills

When the UI needs data that the API could reasonably return, improve the API contract instead of layering extra client fetches as the default solution.

Mar 17, 2026architecture

importsmodulesarchitectureutilities

Import shared utilities from their source module

Do not re-export shared helpers through feature-specific constants files unless you are intentionally creating a public module boundary.

Mar 17, 2026typescript

asyncpromisescleanupcontrol-flow

Do not wrap synchronous work in fake async helpers

Avoid Promise.resolve, Promise.all, or async function signatures when the underlying work is synchronous.

Mar 17, 2026typescript

reacthookscomponentsrefactoring

Extract heavy component logic into hooks or helpers

When a React component starts owning substantial form state, derived values, validation, and side effects, move that logic into a custom hook or helper.

Mar 17, 2026react

reactapi-designcleanupdead-code

Do not keep empty callbacks to satisfy component APIs

If a callback does nothing, remove it and make the receiving prop optional instead of passing no-op handlers around.

Mar 17, 2026react

historical-datafallbacksnamingreadability

Document historical data assumptions in enrichment fallbacks

When adding enrichment logic for missing names or metadata, encode and document the data assumption it protects against.

payloadsvalidationapiscope

Keep frontend write contracts limited to the current UI scope

Do not expose backend fields in frontend create or update payloads unless the current UI actually reads, edits, or intentionally forwards them.

fallbacksretriesdead-codemaintenance

Remove dead fallback and recovery logic

Fallbacks, retries, and recovery branches must correspond to a real failure mode in the current implementation, not to a past or assumed one.

contractspayloadsresponsesapi-design

Classify backend fields by contract scope

For every backend field, decide whether it belongs in response only, create payload, update payload, or nowhere in the frontend contract.

Trace auth ownership through the full call chain

Before adding auth props or headers, trace the whole request path and use only the auth mechanism actually consumed by the target route or service.

authapiheaderscontracts

autherror-handlingfrontendretries

Only add token refresh logic to token-auth flows

Do not dispatch token refresh or retry behavior unless the failing request actually depends on a refreshable token.

Mar 4, 2026react

Define the minimal request contract before threading props

Before adding hook props, fetch args, or service params, define the actual inputs the flow needs and pass only those through the stack.

contractspropsapidesign

typescontractsreadabilityapi

Only create types that narrow or clarify

A new type alias should either add compile-time constraints or preserve domain meaning. If it does neither, use the primitive directly.

Prefer configuration maps for tabular UI variants

When table headers or similarly repetitive UI only differ by labels, alignment, or classes per tab, define a tab-to-config map instead of repeating markup branches.

uitablesreactduplication

Mar 4, 2026react

Optional reference IDs must be omitted when absent and positive when present

Foreign-key style IDs should not accept 0 or null as a meaningful value unless the API explicitly defines that behavior.

validationidsapipayloads

reusetypesenumshelpersconsistency

Reuse existing shared types, enums, and helpers before adding new ones

Before creating a new type, enum, interface, or validator, search the codebase for an existing shared version and reuse it when the semantics already match.

typesnamingdomain-modelingreadability

Keep domain aliases while reusing shared primitives

When a shared primitive already exists, reuse it under a domain-specific alias so the code stays both consistent and readable.

apivalidationreuseduplication

Extract duplicated API route validators into shared utilities

When the same request parsing or validation helper appears in multiple routes with the same behavior, move it to a shared utility.

securityintegrationsvalidationredirectstimeoutsowasp-api-top10

Validate and sandbox third-party API consumption

Treat third-party API responses as untrusted input: validate, sanitize, limit, and avoid following redirects blindly.

securitytlscorsheadershardeningowasp-api-top10

Avoid security misconfiguration (TLS, headers, CORS, safe errors, hardened defaults)

Harden the entire API stack with consistent configs, minimal surface area, and non-leaky error handling.

securityssrfnetworkwebhooksowasp-api-top10

Prevent SSRF when fetching user-supplied URLs

When the backend fetches a URL from client input (webhooks, previews, imports), validate with allowlists and block internal networks.

securitygovernanceinventoryversionsowasp-api-top10

Maintain API inventory, documentation, and version retirement

Track all API hosts/versions and data flows; retire old deployments and avoid exposing unprotected beta/staging APIs.

securityauthzrolesbflaowasp-api-top10

Enforce function-level authorization (BFLA) with deny-by-default

Every endpoint must check role/permission for the action; do not rely on URL conventions to separate admin vs user functions.

securityabuse-preventionrate-limitingbusiness-logicowasp-api-top10

Protect sensitive business flows from automation and abuse

Identify critical workflows (purchase, reservations, referrals, posting) and add anti-automation + per-flow limits.

securityauthzbolaowasp-api-top10

Enforce object-level authorization on every record access (BOLA)

Any endpoint that uses a client-supplied object ID must verify the user is allowed to access that specific object.

securityauthnjwtmfaowasp-api-top10

Harden authentication and account recovery against takeover

Protect login and recovery flows with strong validation, rate limiting, secure tokens, and re-auth for sensitive actions.

securityauthzmass-assignmentdata-exposureowasp-api-top10

Prevent sensitive field exposure and mass assignment (BOPLA)

Return only allowed fields and accept only an allowlist of writable fields; never bind request bodies directly to models.

securitydosrate-limitinggraphqlcost-controlowasp-api-top10

Limit resource consumption (rate limits, paging, batching, timeouts)

Protect APIs from DoS and cost blowups by enforcing rate limits, pagination caps, batching limits, and execution timeouts.

control-flowbugsreadability

Always use braces for control flow blocks

Use braced blocks for if/for/while to prevent accidental logic bugs.

Feb 10, 2026general

Do not use require-style imports in TypeScript

Avoid import x = require('...'); use ES module syntax instead.

modulesinterop

Use === and !== (avoid == and !=)

Avoid implicit coercion; only allow == null to match null or undefined together.

equalitybugs

Feb 10, 2026general

modulesexportsreadability

Do not use default exports

Use named exports to keep imports consistent and avoid ambiguous naming.

errorsdebuggingreliability

Only throw (or reject) Error objects

Throwing non-Errors loses stack traces and makes debugging harder.

Use import type for type-only imports

Use import type when the symbol is only used as a type to support isolated transpilation.

typescriptmodulesbuild

Use const/let; never use var

Prefer const by default and let only when reassignment is required.

variablesbugsreadability

Declare one variable per statement

Avoid comma-separated declarations for clarity and simpler diffs.

readabilitydiffs

modulesarchitecturemaintainability

Use ES modules, not TypeScript namespaces

Organize code with files + imports/exports; avoid namespace Foo { ... }.

Do not use @ts-ignore / @ts-nocheck / @ts-expect-error in production code

Fix the underlying type issue; suppressions make types unpredictable and hide real bugs.

typescripttypesquality

Do not rely on Automatic Semicolon Insertion

Always end statements with semicolons to avoid ASI edge-case bugs.

formattingbugs

performanceevent-loopscalability

Avoid synchronous I/O in web request paths

Sync APIs block the event loop and can stall all requests; use async APIs instead.

opsprocess-managementreliability

Run Node services with a restart policy (process management)

Use OS/container orchestration restart policies; avoid ad-hoc scripts that hide failures.

dependenciessecuritymaintenance

Vet npm packages before adopting them

Check tests/CI, license, issues, maintainers, usage, docs, and code before adding a dependency.

reliabilityprocesscrash-safety

Do not keep a Node process alive after an uncaught exception

Log, exit, and rely on a restart policy; recovery after uncaught exceptions can leave unknown state.

runtimeupgradesstabilityops

Use Node.js LTS and plan safe upgrades

Run the latest Node LTS and roll upgrades through smoke tests before production.

dependenciesreproducibilitybuild

Explicitly declare dependencies and avoid relying on global installs

Deploys should work from a clean install using only declared dependencies.

Store config in environment variables

Anything that varies per deployment (DB URLs, secrets, external services) must live in env, not code.

configsecuritydeploy

environment-parityreliabilitydeployments

Keep dev, staging, and prod as similar as possible

Avoid environment-only behavior; differences should be config and data, not code paths.

dependenciesreproducible-buildstooling

Declare dependencies explicitly and use a dependency manager

Everything the app needs must be declared in package.json and installed deterministically.

architecturedeployconsistency

Keep one codebase and deploy it to multiple environments

No separate repos or branches for 'local' vs 'cloud'—use config to change behavior per env.

Export services via port binding

The app should be self-contained and listen on a configurable port (PORT), not rely on external web servers.

deploymentcontainershttp

Treat logs as event streams (stdout/stderr)

Apps should not manage log files—write structured logs to stdout/stderr and let the platform route them.

loggingobservabilityops

reactkeyslistsreconciliation

Use stable keys for dynamic lists

Stable keys preserve correct component state when lists reorder, filter, or mutate.

statearchitectureperformancereact

Colocate state to reduce re-render blast radius

Keep state close to where it's used to avoid rerendering large trees unnecessarily.

portalsmodalstooltipsui-bugsaccessibility

Use portals for overlays to avoid clipping and stacking bugs

Portals prevent modals/tooltips from being clipped by overflow and stacking contexts.

refsarchitecturereactmaintainability

Prefer declarative props over imperative refs

Use refs for DOM integration only when necessary; avoid imperative APIs that bypass React data flow.

performancememoizationreactreadability

Memoize for outcomes, not habit

Use memoization when it prevents real work; avoid blanket useMemo/useCallback everywhere.

reactreconciliationfocusstate

Do not define React components inside other components

Inline component definitions create new component identities and can cause remounts and lost state.

reactstale-closureseffectsbugs

Avoid stale closures in long-lived callbacks

Timers and event listeners should not read stale state; use refs or explicit dependencies.

reactcontextperformancearchitecture

Split Context by responsibility

Separate frequently-changing state from stable actions to reduce consumer re-renders.

asyncrace-conditionsstatereact

Guard against stale async responses

Only commit async results if they belong to the latest request identity.

performancedata-fetchinglatencywaterfall

Avoid request waterfalls in UI data fetching

Start independent requests in parallel to reduce total loading time.

fetchabortcontrollerrace-conditionsperformance

Cancel in-flight requests with AbortController

Abort old requests on unmount or param changes to prevent race conditions and wasted work.

reactcontextperformancererenders

Memoize Context provider values

Stable provider values prevent unnecessary re-renders across all Context consumers.

nextjsssrhydrationlayoutux

Render SSR-safe defaults for client measurement logic

When UI depends on client-only measurements, render a stable SSR fallback and enhance on the client.

Feb 10, 2026nextjs

reacteffectsperformancelayout

Prefer useEffect over useLayoutEffect by default

useLayoutEffect can block paint; reserve it for layout measurement that must run before paint.

readabilitymaintainabilitycomponentsreacthooksrefactoringcolocation

Keep component implementation files under 300 lines and colocated in their component folder

React component implementation files must stay under 300 lines, and the main component entry should live inside its own component folder. If hooks, effects, handlers, JSX, or hard-coded copy make a component grow, split the logic into hooks, child components, and dedicated constants/copy files instead of keeping one large TSX file or a stray sibling component file outside the folder.

performancescalabilityasyncarchitecture

Avoid blocking work on the request path

Do not run heavy or blocking operations inside request handlers; offload to async jobs.

Jan 29, 2026performance

databaseperformancen+1querying

Avoid N+1 queries with batching or preloading

Batch related data fetching to prevent N+1 query patterns.

Jan 29, 2026performance

databasetransactionsconsistencyintegrity

Use transactions for multi-step writes

Wrap multi-step write operations in a transaction to prevent partial updates.

securityconfigurationsecretsenv

Never hardcode secrets; validate config at startup

Load secrets from environment/config and validate them on boot; never commit keys in code.

securityauthorizationauthenticationapi-design

Enforce authorization for protected actions

Require explicit authn/authz checks before reading or mutating protected data.

validationsecurityapi-designarchitecture

Validate external inputs at boundaries

Validate all external inputs at the boundary and return explicit errors before using them.

reacthooksreadabilitydebugging

Use named functions in useEffect

Name effect functions to improve stack traces and make intent clearer during reviews and debugging.

reacthandlersreadabilityevents

Avoid inline event handlers in JSX

Extract event handlers into named functions to improve readability, reuse, and debugging.

componentsstructureclean-codereadability

Place one-off components near their usage

Store single-use components in a _components folder at the highest level where they are used to keep structure local and navigable.

formsvalidationreactzodreact-hook-form

Standardize forms on React Hook Form + Zod

Use React Hook Form for state management and Zod for schemas so validation and error handling are consistent.

nextjsapi-designarchitectureboundariesssr

Split server and client API boundaries

GETs go through api.server.ts; non-GETs go through the proxy + api.client.ts to keep boundaries explicit and auditable.

Jan 29, 2026nextjs

nextjsssrdata-fetchingarchitectureapi-design

Default GETs to SSR data access

Route GET requests through the server-side data layer by default to keep data fetching centralized, cacheable, and consistent.

Jan 29, 2026nextjs

testingdisciplinequalityci

Enforce test discipline for critical paths

Identify critical flows and require explicit unit/integration/e2e coverage in CI so regressions are caught quickly.

Jan 29, 2026testing

performancebudgetsmonitoringux

Define performance budgets for critical paths

Set explicit thresholds for latency, bundle size, and CLS so regressions are caught before they reach users.

Jan 29, 2026performance

error-handlingarchitectureconsistencyapi-design

Standardize error handling across boundaries

Use a consistent error strategy (typed errors or Result objects) so callers can handle failures predictably and avoid ad‑hoc patterns.

architectureapi-designcontractsboundariesmaintainability

Define API boundaries with dedicated DTOs

Do not expose internal domain models directly through APIs; map to explicit DTOs at the boundary to keep contracts stable and enforce validation.

typescripttypesclean-codereadabilitynullability

general ruleP1

Avoid mixing optional and nullable types

Do not combine optional syntax (?) with null types in TypeScript definitions, as it creates ambiguous and redundant 'missing' states.

Feat/FCK-2586 - Add new UI changes for latest forum widget #4312

typescriptinterfacestype-safetyclean-codeapi-contract

Prefer strict required fields over optional properties

Avoid marking all interface properties as optional; use strict types to guarantee the existence of core fields.

Feat/FCK-2586 - Add new UI changes for latest forum widget #4312

clean-codeapi-designobjectstypescript

Prefer explicit null over conditional object spreading

Ensure consistent object shapes by assigning `null` to missing properties instead of conditionally omitting the key using spread syntax.

Feat/FCK-2586 - Add new UI changes for latest forum widget #4312

reactjsxclean-codereadabilityconditional-rendering

Flatten complex conditional rendering with variables

Avoid nested or chained ternary operators in JSX for multi-state rendering; assign content to a variable or use early returns.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

reactcomponentsclean-codepropsarchitecture

Decouple presentational components from domain entities

Avoid passing raw API objects to UI components; pass explicit, pre-formatted props to improve reusability and separation of concerns.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

tailwindcssclean-codereadabilitystyling

Prefer shorthand axis utilities in Tailwind

Combine individual top/bottom or left/right utilities into single axis utilities (px, py, mx, my) when values are identical.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

reactjsxconditional-renderingclean-code

Prefer logical AND for single-branch JSX rendering

Use the logical AND operator (&&) instead of the ternary operator for conditional rendering when there is no fallback UI.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

reacthooksclean-codenamingreadability

Prefer descriptive names over generic verbs in effects

Avoid generic function names like 'run' or 'start' inside useEffect; use names that describe the specific action.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

reacthooksasyncfetchclean-code

Prefer AbortController over manual flags for effect cleanup

Use AbortController to handle async cleanup in useEffect instead of manual boolean flags like isActive or isMounted.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

clean-codereadabilityrefactoringstate-management

Avoid redundant variable aliases

Do not create variables that merely alias existing state or props without adding logic or semantic value.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

Jan 28, 2026general

reacthooksclean-coderefactoring

Consolidate effects with identical dependencies

Merge multiple useEffect hooks that share the same dependency array and domain concern into a single hook to improve readability and maintainability.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

typescriptapi-designclean-codemaintainability

Define distinct types for distinct data shapes

Avoid reusing a single type for multiple API responses that have differing structures; create specific types to ensure strict type safety.

Feat/FCK-2485 - Add new UI design for Fa TV #4295

reactdomperformancehooksasync

Prefer synchronous DOM access over unnecessary microtasks

Avoid wrapping DOM logic in microtasks if the element is already mounted and accessible.

Fix/FCK-2522 - Fix search bar auto open safari bug #818

reacteventsbrowser-compatibilityclean-codehooks

Localize browser patches with scoped listeners

Fix element-specific browser quirks using scoped event listeners on the target element instead of global interaction tracking.

Fix/FCK-2522 - Fix search bar auto open safari bug #818

reactfocus-managementdomeventssimplicity

Prefer activeElement checks over interaction listeners for autofocus detection

Detect browser autofocus by checking document.activeElement on mount instead of tracking global user interaction events.

Fix/FCK-2522 - Fix search bar auto open safari bug #818

vitesttestingconfigurationplaywrightarchitecture

Configure mixed test environments using Vitest projects

Use the projects configuration in Vitest to isolate Node-based unit tests from browser-based integration tests in a single file.

Learning how to write tests meaning

Dec 10, 2025testing

testingaccessibilityvitestclean-code

Prefer accessibility locators for user interaction tests

Query elements by accessible roles (e.g., button, option) to ensure tests resemble user behavior and verify accessibility.

Learning how to write tests meaning

Dec 10, 2025testing