Rules Hub
Coding Rules Library
Use configuration constants for conditional visibility
Avoid hardcoding specific values in conditionals inside JSX; use configuration arrays or sets to define business rules.
Prefer max-width over width for fluid media
Using 'width: 100%' forces images to stretch, whereas 'max-width: 100%' allows them to retain their natural size while remaining responsive.
Prefer clsx over manual string concatenation for classes
Avoid manual string interpolation for class names to prevent spacing bugs and improve readability.
Use aspect-ratio on images to prevent layout shifts
Define an explicit aspect-ratio for images to reserve space before the asset loads, minimizing Cumulative Layout Shift (CLS).
Match alt text to the text shown in the image
For images containing text (logos, banners), the `alt` attribute should mirror the visible text exactly.
Avoid moving code unless necessary
Do not move code blocks unless dictated by logic or dependencies to keep git diffs clean and reviewable.
Centralize and reuse shared configuration
Avoid duplicating identical configuration data across different environments or files. Define shared data once to prevent drift and reduce maintenance.
Use 'as const' on literals to prevent type widening
Prevents TypeScript from widening string literals to the generic 'string' type in conditional expressions, preserving strict union types.
Optimize SVG assets using SVGO
Always run SVG assets through an optimizer like SVGO to remove unnecessary metadata and reduce file size before committing.
Use a serializer or mapper to shape API responses
Avoid returning raw internal objects or mutating data ad-hoc in controllers; use a configurable serializer layer to shape responses.
Prefer React Context over global DOM events for component communication
Avoid using window.dispatchEvent and addEventListener to coordinate state between components. Use React Context or proper state management instead.
Extract data fetching logic into custom hooks
Avoid fetching data directly inside components; encapsulate the logic in reusable hooks to handle loading and error states cleanly.