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

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.

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

Code Style and Structure

Naming Conventions

TypeScript Usage

Syntax and Formatting

UI and Styling

Testing

Performance Optimization

Key Conventions

Bun Usage

Summary of New Rules:

Related Skills

Repo rules

.cursorrules

This is an Elixir library that recompiles Elixir code in its AST form.

Code Style and Structure

Naming Conventions

TypeScript Usage

Syntax and Formatting

UI and Styling

Testing

Performance Optimization

Key Conventions

Bun Usage

Summary of New Rules: