Patterns: Quick Reference

Detailed rules live in docs/patterns/*.md. Load the matching context group (patterns-styling, patterns-components, patterns-review) from docs/AI_INDEX.md when you need the full rules.

Task	Approach
Add spacing	Use utility class: className="mb-4 px-2" (n * 4px)
Use a color	Use utility class: className="text-primary bg-success"
Set font size	Use utility class: className="fs-lg fw-bold"
Add a border	Use utility class: className="bordered border-bottom"
Make something flex	className="d-flex align-items-center justify-content-between"
Apply dynamic style	style={{ width: computedValue }} with useTheme() for tokens
Customize an antd component	Add to antd-overrides.less or use existing modifier classNames
Add a new design token	Define as @var in variables.less, add to :root block if needed in JS
Add component-specific styles	Create/extend a .less file in components/, use baseClassName pattern
Define a new constant	Add to the appropriate file in src/constants/, UPPER_SNAKE_CASE
Build conditional classes	Use classnames package: className={classNames('base', { 'modifier': condition })}
Fetch data	RTK Query: add endpoint to the domain's *Api.js, use generated hook
Manage local state	useState (always), never useReducer
Create a form	Form.useForm() with Ant Design's <Form> and <Form.Item>