webdev

When writing web code, follow these conventions:

TypeScript

• •Use strict mode, no implicit any
• •Prefer interfaces over types for object shapes
• •Use named exports over default exports
• •Prefer const over let, never use var
• •Use template literals for string interpolation

Type Safety

• •Never bypass the type system
• •Never disable eslint rules - fix upstream instead
• •Never use any types
• •Never use as to get around type safety
• •Never use bracket notation to avoid type safety warnings
• •Never add type annotations when they can be inferred
• •Never use unnecessary satisfies statements
• •Always provide generic parameters to generic types

React

• •Use functional components with hooks (no class components)
• •Keep components small and focused
• •Extract custom hooks for reusable logic
• •Use React.FC sparingly, prefer explicit prop types
• •Memoize expensive computations with useMemo/useCallback

Component Structure

// 1. Imports
// 2. Types/Interfaces
// 3. Component
// 4. Styles (if co-located)

State Management

• •Local state: useState/useReducer
• •Shared state: Context API or Zustand (adjust as needed)
• •Server state: TanStack Query (React Query)

Styling

• •Use CSS variables for theming
• •Don't use tailwind

File Naming

• •Components: PascalCase (Button.tsx)
• •Utilities/hooks: camelCase (useAuth.ts)
• •Test files: Component.test.tsx

Testing

• •Use Vitest or Jest for unit tests
• •React Testing Library for component tests
• •Test behavior, not implementation

Performance

• •Lazy load routes and heavy components
• •Optimize images (WebP, proper sizing)
• •Minimize bundle size, use dynamic imports