diff --git a/.cursor/commands/review.md b/.cursor/commands/review.md new file mode 100644 index 00000000..f538e9da --- /dev/null +++ b/.cursor/commands/review.md @@ -0,0 +1,109 @@ +# Code Review Checklist + +Review every point below carefully to ensure files follow consistent code style and best practices. + +--- + +## Function Signatures & Parameters + +- [ ] Every function accepts a single object parameter with destructuring in the signature (for readability and future extensibility) + - Exception: tiny one-liner callbacks (e.g. `array.find(x => ...)`, `map`, `filter`, `sort`) do not need destructuring if it hurts readability + + ```tsx + // ❌ wrong + function formatTime(seconds: number, fps: number) { ... } + + // ✅ correct + function formatTime({ seconds, fps }: { seconds: number; fps: number }) { ... } + ``` + +## TypeScript & Type Safety + +- [ ] No `any` references +- [ ] General interfaces are in the `types` folder, not scattered in components + - Example: `TimelineTrack` interface belongs in `src/types/timeline.ts`, not `src/components/timeline/index.tsx` + +## JSX & Components + +- [ ] JSX is clean — no comments explaining what each part does +- [ ] Complex/reusable JSX is extracted into sub-components (placed below the main component) +- [ ] Components shared across multiple files are in separate files +- [ ] File order: constants specific to file (top) -> utils specific to file -> main component → sub-components (bottom) +- [ ] Components render UI only — domain logic lives in hooks, utilities, or managers + - Simple interaction logic (gestures, modifier keys) can stay if not complex + +## Code Organization & File Structure + +- [ ] Each file has one single purpose/responsibility + - Example: `timeline/index.tsx` should not define `validateElementTrackCompatibility` — that belongs in a lib file + - Example: `lib/timeline-utils.ts` should not declare `TRACK_COLORS` — that belongs in `constants/` +- [ ] Business logic lives in either `src/lib`, `src/core` or `src/services` folder + +## Comments + +- [ ] No AI comments — only human comments that explain _why_, not _what_ + - Bad: changelog-style comments, explaining readable code, using more words than necessary +- [ ] All comments are lowercase + +## Naming Conventions + +- [ ] Readability over brevity — use `element` not `el`, `event` not `e` +- [ ] Booleans are named `isSomething`, `hasSomething`, or `shouldSomething` — not `something` +- [ ] No title case in text/UI — use `Hello world` not `Hello World` + +## Tailwind & Styling + +- [ ] Use `gap-*` instead of `mb-*` or `mt-*` for consistent spacing +- [ ] Use `size-*` instead of `h-* w-*` when width and height are the same +- [ ] When using `size-*` on icons inside ` + ``` + +## State Management (Zustand) + +- [ ] React components never use `someStore.getState()` — use the `useSomeStore` hook instead +- [ ] Store/manager methods are not passed as props — sub-components access them directly + + ```tsx + // ❌ wrong + function Parent() { + const { selectedElements } = useTimelineStore(); + return ; + } + + // ✅ correct + function Parent() { + return ; + } + function Child() { + const { selectedElements } = useTimelineStore(); + } + ``` + +- [ ] Components and hooks should use the `useEditor` hook. Only use `EditorCore.getInstance()` if you are outside of a react component/hook. Eg: in a utility function, event handler. + +## Code Quality + +- [ ] Code is scannable — use variables and helper functions to make intent clear at a glance +- [ ] Complex logic is extracted into well-named variables or helpers + +--- + +## Function Keywords + +| Context | Keyword | +| --------------------------------- | ------------------------- | +| Next.js page components | `export default function` | +| Main react component | `export function` | +| Sub-components | `function` | +| Utility functions | `export function` | +| Functions inside react components | `const` | + +--- + +> Every decision, every edit must be carefully considered. Everything matters.