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