Instruction file imported from bluerobotics/bluePLM (.cursor/rules/react.mdc). Copyright stays with the author.

React Architecture

State Management (Zustand-First)

See zustand.mdc for complete Zustand patterns and slice creation.

Prop Drilling: Max 2 levels. Beyond that → Zustand selector.

// ✅ GOOD: grab what you need from store
const files = usePDMStore(state => state.files)

// ❌ BAD: passing props through 3+ components
<Parent files={files}> → <Child files={files}> → <GrandChild files={files}>

// ❌ NEVER select entire store
const store = usePDMStore()  // Re-renders on ANY state change

Adding state? → Create a slice, not a new store. See zustand.mdc.

Component Rules

• Single responsibility: one reason to change
• Composition over configuration: small, composable pieces
• Props interface: explicit types, no any
• Named export, one primary component per file

Styling (Tailwind Only)

• Theme tokens: pdm-bg, pdm-fg, pdm-accent, pdm-border
• Status: pdm-success, pdm-warning, pdm-error, pdm-info
• Sidebar text: always text-left
• No inline styles, no CSS modules

Import Order

1. External (react, zustand)
2. Internal (@/lib, @/stores, @/components)
3. Relative (./, ../)