Project Principles:
1. Architectural Simplicity & Clarity
- Minimalist Logic: Prioritize straightforward implementations over clever-but-opaque solutions.
- Prioritize easy-to-understand, straightforward logic in all parts of the codebase.
- Avoid unnecessary abstractions or over-complicating state management.
- Write code that is self-explanatory and well-commented where needed.
2. State Management
- Use Zustand for all global and shared state.
- Keep Zustand stores focused and minimal-only store what is necessary.
- Separate concerns by creating distinct stores for different domains (e.g., flow data, file management, AI generation).
3. Component Organization
- Max 150-line components
- Split UI into small, reusable, and focused components.
- Each component should have a single responsibility.
- Organize components by domain (e.g., flow, files, AI sidebar, UI elements).
- Avoid monolithic files-prefer many small files over a few large ones.
- Atomic Components: Build UI as small, single-responsibility elements (e.g.,
FlowNode,AIPromptButton). - Domain Grouping: Organize components by feature area
4. UI Consistency & Style
- Use shadcn UI components for a consistent and modern look and feel.
- Maintain a unified design system for spacing, colors, and typography.
- Ensure responsive design for usability across devices.
5. AI Integration
- The AI sidebar should provide a clear and intuitive interface for user prompts.
- Handle AI errors gracefully and provide user feedback.
7. Performance & Scalability
- Optimize for fast load times and smooth interactions, especially in the canvas.
- Use memoization and virtualization where appropriate.
- Ensure the architecture can handle large and complex flows.
8. Clean Codebase & Best Practices
- Enforce consistent code formatting and linting.
- Document key modules, components, and stores.
- Remove unused code and dependencies regularly.
- Keep third-party dependencies to a minimum-only add what is necessary.
9. Testing & Reliability
- Write meaningful tests for critical logic (e.g., AI integration, state management).
- Ensure the app is robust against invalid input and unexpected user behavior.
- Use error boundaries and clear error messages.