LowFile-scope

Prefer the company design system over hand-rolled UI styles

Avoid re-creating existing UI components or duplicating styles (CSS/Tailwind) when the company design system already provides an official component. If the PR touches UI and a design system entry point is referenced (e.g., `ui/index.ts`, `design-system.md`), use it as the source of truth and suggest the equivalent official component.

Add to Mesrai Open workspace

Why this matters

Improves visual consistency, reduces duplicate code, and speeds up future UI changes.

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

<button className="px-4 py-2 rounded bg-blue-600">Pay</button> // custom copy

Prefer

import { Button } from "@company/ui";
<Button variant="primary">Pay</Button>

More snippets

Bad

New bespoke button/card styles duplicating DS

Good

Use official design system component

Related rules

From the same buckets as this rule.

High
Add cleanup mechanisms for resource management
Ensure close/stop/dispose is called for resources (clients, channels, scopes) using use{} or try/finally; cancel coroutines on shutdown.
maintainabilityui-robustness
High
Add dispose methods to prevent memory leaks
Dispose controllers, focus nodes, animations, timers, and cancel subscriptions in `dispose()`.
stack-flutterui-robustness
High
Avoid array indexes as keys in React lists
Ensure that React list items do not use array indexes as keys. This practice can cause reordering issues and unexpected behavior. Recommend using unique identifiers instead.
performance-efficiencystack-react+1

Why this matters

Bad vs. good

More snippets

Related rules

Add cleanup mechanisms for resource management

Add dispose methods to prevent memory leaks

Avoid array indexes as keys in React lists

Why this matters

Bad vs. good

More snippets

Related rules

Add cleanup mechanisms for resource management

Add dispose methods to prevent memory leaks

Avoid array indexes as keys in React lists