Payload Builder Configuration

**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.