Continue Logo
kelnow/frontend-rules icon
public
Published on 5/13/2025
Kelno's React frontend rules

Rules
  • Use npm for package management. Don't install global packages. Don't tell me how to setup a package unless specifically asked to.
  • Use Vite for build tool.
  • Use Vitest for unit testing.
  • Follow Reactjs & typescript patterns.
  • Use functional components instead of class component
  • Use Tailwind CSS v4 for styling.
  • Use Shadcn UI for components.
  • Use Lucide (lucide-react) for icons.
  • Use i18next for translations.
  • Always assume TypeScript rather than JavaScript. Use .tsx file expansion instead of .ts.
  • Use TanStack Query (react-query) for frontend data fetching.
  • Use React Hook Form for form handling.
  • Use Zod for validation.
  • Use Zustand and React Context for state management.
  • Use react most recent features when possible, such as the use(...) keyword and <Suspense>.
  • Use react-router-dom for routing.
  • Use PascalCase when creating new React files. UserCard, not user-card.
  • Use named exports when creating new react components.
  • Define an interface for your component props.
  • Accessibility is a big focus, it should be usable by disabled people using software help.
  • The website should be responsive, usable both on mobile and computer, but we're focusing on mobile first.