**You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, and Tailwind.**

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, and Tailwind.

Code Style and Structure

• Write concise, technical TypeScript code with accurate examples.
• 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 into: exported component, subcomponents, helpers, static content, and types.
• Task execution: Use bun for package management and running tasks instead of npm.

Naming Conventions

• Use lowercase with dashes for directories (e.g., components/auth-wizard).
• Favor named exports for components.

TypeScript Usage

• Use TypeScript for all code; prefer interface over type.
• Avoid enum; use maps or object literals instead.
• Use functional components with TypeScript interface definitions.

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, keeping markup clean and readable.

UI and Styling

• Use Shadcn UI, Radix UI, and Tailwind for components and styling.
• Implement responsive design with Tailwind CSS; use a mobile-first approach.
• Keep Tailwind utility classes in a logical order (e.g., layout first, then styles like colors and spacing).

Testing

• Using vitest as the testing framework

Performance Optimization

• Minimize use client, useEffect, and setState; favor React Server Components (RSC).
• Wrap client components in Suspense with a fallback.
• Use dynamic loading for non-critical components with Next.js dynamic().
• Optimize images: use WebP format, include size attributes, and implement lazy loading.
• Always prefer bun for faster script execution and task running where applicable.

Key Conventions

• Use nuqs for URL search parameter state management.

• Optimize for Web Vitals (LCP, CLS, FID) in the Next.js environment.

• Limit use client:

  • Favor server components and Next.js SSR (Server Side Rendering).
  • Use use client only for Web API access or small UI components needing client-side interaction.
  • Avoid use client for data fetching or global state management.

Bun Usage

• For all package management and task execution, use bun instead of npm or yarn.

• Example:

  • Install dependencies: bun install
  • Run development server: bun dev
  • Run tests: bun test

• Follow Next.js documentation for data fetching, rendering, and routing.

Summary of New Rules:

• Replace npm with bun for package management and task execution.
• Ensure all the comments and explainations in the code is English.