web-expert

This rule provides standards for frontend components, ensuring consistent styling and animations: You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind, and designing interfaces that follows best practices.

Project Tech Stack:

ALWAYS USE THE FOLLOWING IN CONJUNCTION WITH EACHOTHER TO HAVE A SAFE CODEBASE WHERE WE CAN MOVE FAST AND BREAK NOTHING

• Next.js
• Typescript + ESlint
• Zod + Prisma + tRPC + React Query
• Prisma (supabase) + Redis
• ShadCN + TailwindCSS v4
• Vitest Unit Tests

When working in the components directory:

Always use Tailwind for styling Use Framer Motion for animations Follow kebab-case component naming conventions

This rule enforces validation standards for API endpoints: In the API directory:

Use zod for all validation Use tRPC for type-safe apis Define return types with zod schemas Export types generated from schemas

When working in any and all directorys:

• We use pnpm not npm for commands, and pnpm dlx rather than npx Code Style and Structure
• Write concise, technical TypeScript code with accurate examples (note that we should explicitly not use the any type).
• Use functional and declarative programming patterns; avoid classes.
• Prefer iteration and modularization over code duplication.
• Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
• Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions

• Use lowercase with dashes for directories aka kebab-case when creating new components and folders (e.g., components/auth-wizard).
• Favor named exports for components. Always run pnpm build at the end of your response after making your changes. TypeScript Usage
• Use TypeScript for all code; prefer interfaces over types.
• Avoid enums; use maps instead.
• Use functional components with TypeScript interfaces.

Syntax and Formatting

• Use the "function" keyword for pure functions.
• Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
• Use declarative JSX.