Project Instructions

Components

• One component per file. Name the file after the component.
• Prefer function components with hooks. No class components.
• Keep components under 200 lines. Extract sub-components when they grow.
• Co-locate styles, tests, and types with their component.

State

• Use local state (useState) by default. Only lift state when two components need to share it.
• Don’t reach for global state management unless the problem clearly requires it.

Styling

• Use the project’s existing styling approach. Don’t introduce a new CSS methodology.
• Prefer existing design tokens and variables over hardcoded values.

Testing

• Test user behavior, not implementation details.
• Use React Testing Library. Don’t test internal state directly.
• Every new component should have at least one test.

Performance

• Don’t optimize prematurely. Only add useMemo, useCallback, or React.memo when there’s a measured problem.
• Prefer lazy loading for routes and heavy components.

Git

• Write short commit messages. One feature or fix per commit.