Instruction file imported from devmuhammadaziz/planx (.cursor/rules/planx-ui-ux.mdc). Copyright stays with the author.

PlanX UI/UX Rules

Clickable affordance (REQUIRED)

Every interactive control must look and feel clickable:

• Use cursor-pointer (hand) on buttons, links, cards, tabs, toggles, menu items, checkboxes, and any element with onClick / selectable state.
• Disabled controls use cursor-not-allowed and reduced opacity.
• Selectable onboarding/option cards are buttons: pointer cursor, clear hover state, and clear selected state.
• Never leave clickable cards/rows with the default arrow cursor — users must recognize they can click.

Interaction polish

• Hover states should change border, background, or elevation enough to feel responsive.
• Primary actions stay visually dominant; secondary actions stay quieter.
• Keep focus rings visible for keyboard users (focus-visible / focus ring tokens).
• Prefer full-bleed layouts for auth/onboarding; avoid nested “card inside padded page frame” unless interaction requires a card.

Consistency

• Follow bright violet / blue product colors from planx-brand rule (Violet / Sky Blue / Soft Gray).
• Keep motion purposeful (Framer Motion / View Transitions), not noisy.
• All user-facing copy goes through i18n (en / ru / uz).
• Sidebar must respect light/dark theme tokens and support collapse to icons-only.