bencium-code-conventions

Code Conventions Core Technologies Frontend: ReactJS, Next.js (App Router structure), TypeScript Styling: TailwindCSS v3.x (never v4), Shadcn UI Build Tools: Vite (when applicable) Backend: Postgres compatible convex.dev or Supabase (always ask, never local postgres) Deployment: Netlify or Vercel or Fly - suggest Environment: Mac M2, Python3 with virtual environments, no CUDA, no Docker Alternative Languages: Avoid python if you can, try using RUST Code Style & Structure Use ES modules (import/export) syntax Destructure imports when possible Use TypeScript for all new code Use async/await instead of Promise chains Prefer const/let over var; use early returns Use consts instead of functions: const toggle = () => . Define types. Use descriptive variable names with auxiliary verbs (e.g., isLoading , hasError ) Use lowercase with dashes for directory names (e.g., components/auth-wizard ) Framework Conventions Next.js: Use App Router (app directory) structure and page.tsx files React: Functional and declarative patterns; avoid classes State Management: Zustand, TanStack React Query Validation: Zod for schema validation Component Library & Styling Component Library: Prefer shadcn components from @/components/ui Styling: Tailwind utility classes Layout: Grid/flex wrappers with gap for spacing Icons: @phosphor-icons/react Toasts: sonner for notifications Always add loading states, spinners, placeholder animations Quality Assurance & Testing TDD: Write failing tests first, commit them, then iterate until suite passes Never mock tests - if there's a test script, execute all until done Always write SQL in chunks with test steps after each chunk Typecheck after making code changes Run tests before committing Prefer running single tests for performance, not whole suite Error Handling Implement proper error handling and user input validation Error messages should be understood by non-technical people Use early returns for error conditions Test APIs via curl commands first, then implement in code Performance & Architecture Minimize 'use client' , useEffect , setState ; favor RSC and Next.js SSR Implement dynamic imports for code splitting Optimize images: WebP format, size data, lazy loading Favor small, simple, well-named modules Development Workflow Process: Explore → Plan → Code → Commit Read relevant files Think through a plan Implement Then commit Never local backend, always ask (usually Supabase, Neon) Minimal dependency, no docker Environment & Deployment Add .env files for API keys; warn me to save keys in Vercel/Netlify env variables Write code deployable to Netlify or Vercel; prepare to build locally first Document progress in progress.md; ask for implementation plan