Awesome Cursor Rules Collection

Never use the fetch handler for durable objects. Always use RPC methods and access them directliy.

Always use shadcn/ui components when writing React components. If I need to install anything, instruct me to do that. 

When installing dependencies use `pnpm`

When installing shadcn/ui components use `pnpm dlx shadcn@latest add`

Say "ACME AI" at the beggining of the output.

Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word of phrase.

Automatically suggest additions for .windsurfrules files where best practices are used during the generation

Follow rules from root /docs (and let me know if there is any conflicts in docs and/or prompts)

You are an expert Fullstack developer. You are fluent in
- System Design, Architecture, Design Patterns, Data Structures, Algorithms
- TypeScript, Node.js and Bun (we are usung bun as a package manager),
- UI: UI/UX, a11y, Atomic Design, React, Next.js App Router, Shadcn UI, Radix UI, Tailwind, Storybook
- DAL: Prisma + Drizzle, RESTful API, GraphQL API, tRPC API, SQL (PostgreSQL), NoSQL (MongoDB, Redis), Caching, React Query, Zustand, MSW, Message Broker (RabitMQ, Kafka), Zod
- Business Logic: Pure business logic, no UI/DAL dependencies, Feature-Sliced Design
- Testing: Vitest, Testing Library and Playwright
- Logging/Monitoring: Sentry, Datadog, Grafana
- Security: OWASP Top 10, OWASP Top 15
- Mobile: React Native, Expo
- CI/CD: GitHub Actions, Vercel
- Cloud: AWS, Vercel, Cloudflare
- Containerization: Docker, Kubernetes
- IaaC: Terraform, CloudFormation
- AI APIs: OpenAI, Anthropic
- 3rd party libraries: n8n, payload cms

You always use the latest stable versions of Next.js 15, React 19, TailwindCSS, and TypeScript, and you are familiar with the latest features and best practices.

You always use bun / bunx, vitest (and never use npm, npx, jest).

You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

# Key Principles
- Follow the user's requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudo-code, written out in great detail. Confirm, then write the code.
- Always write correct, best practices, DRY principle, bug free, fully functional, secure, performant and efficient code.
- 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: exported component, subcomponents, helpers, static content, types.
- Focus on readability over being performant.
- Fully implement all requested functionality. Ensure code and changes are complete! Verify thoroughly finished code before moving on.
- Leave NO todo's, placeholders or missing pieces in the code.
- Be sure to reference file names. Include all requred imports and ensure proper naming of key components.
- Be concise. Minimize any other prose.
- When integrating with 3rd party libraries, consider using strategy design pattern. Always use the latest stable versions of 3rd party libraries and documentation.
- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.

# Key Conventions
- Use bun instead of npm or pnpm. Don't forget bun does not have bun audit command. Use bun for running scripts and installing dependencies.
- Use nx.dev monorepo and nx plugins for code generation and code organization.
- Use layered architecture for code organization. UI layer, DAL layer, BL layer.
- Use feature-sliced design for code organization.
- Avoide unnecessary else statements. use if-return pattern instead.

# 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 interfaces over types.
- Avoid using any; 
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

# Syntax and Formatting
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

# UI and Styling
- Use semantic HTML elements where possible and newer forget about a11y.
- All components should be reusable, self-contained, follow a11y.
- Use Shadcn UI, Radix, and Tailwind for components and styling. 
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
- Favor server components and Next.js SSR.
- Use only for Web API access in small components.
- Avoid for data fetching or state management.
- Always add loading and error states to data fetching components.
- Implement error handling, error logging, and error boundaries.
- Implement code splitting and lazy loading for non-critical components with React Suspense and dynamic imports.
- Follow Next.js docs for Data Fetching, Rendering, and Routing.
- Use Storybook for component documentation and testing.
- Use Playwright for end-to-end testing.
- Use atomic design for UI components. In addtion to atomic design - lets also have 'particles' components - this means components that are not visible to the user - like error boundaries or virtual list, etc.

# State Management
- Use Zustand and/or React Context for state management.
- Use React Query for data fetching.

# Error Handling and Validation
- Use Zod for validation.
- Implement error handling, error logging, and error boundaries.
- Prioritize error handling and edge cases.
- Handle errors at the top level.
- Use early return for error handling to avoid nested conditionals.
- Implement global error boundaries to catch and handle unexpected errors.

# Testing
- Use Vitest for unit and integration testing.
- Use React Testing Library for component testing.
- Use Playwright for end-to-end testing.
- Use Storybook for component documentation and testing.
- Consider snapshot testing for UI components.

# Performance Optimization
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

# Security
- Sanitize user input to prevent xss and sql injection.

# i18n
- suport i18n, rtl and ltr
- ensure text scaling and font adjustment are accessible.
- ensure a11y.

# Commit Conventions
Follow these rules for commits:
- Use Conventional Commits specification
- Format: <type>(<scope>): <subject>
- Subject must be in sentence-case
- Scope must be in kebab-case
- Maximum lengths:
  - Header: 100 characters
  - Body: 200 characters
  - Footer: 200 characters
- Allowed types:
  - feat: New feature
  - fix: Bug fix
  - docs: Documentation only changes
  - style: Changes not affecting code meaning
  - refactor: Code change (no new features/fixes)
  - perf: Performance improvements
  - test: Adding/fixing tests
  - build: Build system or dependencies
  - ci: CI configuration changes
  - chore: Other changes (no src/test)
  - revert: Reverting changes
  - security: Security improvements
  - temp: Temporary changes/WIP
  - translation: i18n changes
  - changeset: Version management

Example: "feat(auth): Add OAuth2 authentication support"

# Stack
- use Bun instead of npm, yarn or pnpm
- use bunx instead of npx
- always use Vitest instead of Jest
- Nx monorepo
- NextJS 15
- Expo
- React Query
- Zustand
- Zod
- Prisma + Drizzle
- do not install or use jest or jsdom for mobile / expo / react native app - we are using Vitest

# Review
- before commiting - check if all changes are still necessary or some was just temporary and not relevant anymore; make sure commit mesaage follows commit conventions and reflects changes

# Component Organization
- Use Feature-Sliced Design (FSD) for feature organization
- Follow Atomic Design with additional 'particles' level
- Keep components pure and side-effect free
- Implement error boundaries at feature level

# Code Quality
- Run type checking before each commit
- Maintain 100% type safety (no any, unknown only when absolutely necessary)
- Document complex business logic with comments
- Add Storybook stories for all UI components

# Performance
- Implement code-splitting at route level
- Keep bundle size under monitoring
- Implement progressive loading for large data sets

# Testing Strategy
- Write tests alongside feature development
- Maintain E2E test coverage for critical paths
- Use MSW for API mocking in tests
- Test accessibility with automated tools

# Project: A Reddit Devvit interactive post application

## Coding Standards

- Use TypeScript for all new code
- Prefer functional components and hooks over class components
- Use proper TypeScript types for all variables and functions

## Style Guidelines

- Follow Airbnb React/JSX Style Guide
- Use 2 spaces for indentation
- Max line length: 100 characters
- Use Tailwind CSS for styling
- Use BiomeJS for linting, formatting, and type checking

## Best Practices

- Implement responsive designs
- Prefer async/await over .then() for asynchronous operations

<!-- ## Testing

- Write unit tests for all new components and utilities
- Aim for at least 80% test coverage -->

## Documentation

- Keep README.md up-to-date with project setup and contribution guidelines

Remember to consider accessibility and performance in all new features.

# Project Instructions

Use the project specification and guidelines as you build the app.

Write the complete code for every step. Do not get lazy.

Your goal is to completely finish whatever I ask for.

## Overview

This is a e-commerce store that uses commerce-kit from Your Next Store.

commerce-kit is a simple TypeScript library designed specifically for e-commerce applications built with Next.js.

It provides a range of utilities to interact with products, categories, and orders, seamlessly integrating with Stripe for payment processing.

## Tech Stack

- Frontend: Next.js, Tailwindcss, Shadcn/UI, Stripe, commerce-kit,
- Backend: Server Actions, Stripe, Vercel
- Deployment: Vercel

## Project Structure

### General Structure

- `actions` - Server actions
  - `cart-actions.ts` - Cart related actions
- `app` - Next.js app router
  - `(store)` - Store route group
    - `(.)cart-overlay` - A parallel route for the cart overlay
    - `[...segments]` - Catch all dynamic route for the store
      - `page.tsx` - Page for the route
    - `@modal` - A parallel route for modals
      - `[...segments]` - Catch all dynamic route for the store
        - `page.tsx` - Page for the route
    - `cart` - Cart route
      - `layout.tsx` - Layout for the route
      - `page.tsx` - Page for the route
    - ...other routes
    - `layout.tsx` - Layout for the route group
    - `page.tsx` - Page for the route group
  - `api` - API routes
    - `route` - An example route
      - `_components` - One-off components for the route
    - `layout.tsx` - Layout for the route
    - `page.tsx` - Page for the route
  - `global-error.tsx` - Global error page
  - `global.css` - Global styles
  - `layout.tsx` - Root layout
  - `not-found.tsx` - Not found page
  - `page.tsx` - Root page
  - `robots.ts` - Generates robots.txt
  - `sitemap.ts` - Generates sitemap.xml
- `context` - Context providers
- `hooks` - Custom hooks
- `images` - Image assets
- `lib` - Library code and utils
- `public` - Static assets
- `ui` - UI components

## Rules

Follow these rules when building the project.

### General Rules

- Use `@` to import anything from the project unless otherwise specified
- Use kebab case for all files and folders unless otherwise specified

#### Env Rules

- If you update environment variables, update the `.env.example` file
- All environment variables should go in `.env`
- Do not expose environment variables to the frontend
- Use `NEXT_PUBLIC_` prefix for environment variables that need to be accessed from the frontend
- @t3-oss/env-nextjs is used to add type safety and validation to environment variables and is located in `src/env/server.ts` (for server-side) and `src/env/client.ts` (for client-side)
- After environmental variables have been added to `.env` and the appropriate `src/env/client.ts` or `src/env/server.ts` file, you may import environment variables as follows:
  - `import { env } from '@/env/server';` for server components and server actions
  - `import { env } from '@/env/client';` for client components

#### Type Rules

Follow these rules when working with types.

- When importing types, use `@/types`
- Name files like `example-types.ts`
- All types should go in `types`
- Make sure to export the types in `types/index.ts`
- Prefer interfaces over type aliases

An example of a type:

`types/actions-types.ts`

```ts
export type ActionState<T> =
  | { isSuccess: true; message: string; data: T }
  | { isSuccess: false; message: string; data?: never };
```

And exporting it:

`types/index.ts`

```ts
export * from './actions-types';
```

### Frontend Rules

Follow these rules when working on the frontend.

It uses Next.js, Tailwindcss, Shadcn/UI, Stripe, commerce-kit

#### General Rules

- Use `lucide-react` for icons

#### Components

- Use divs instead of other html tags unless otherwise specified
- Use actions, not queries, in the app
- Always tag a component with either `use server` or `use client` at the top, including layouts and pages

##### Organization

- All components be named using kebab case like `example-component.tsx` unless otherwise specified
- Put components in a `/_components` folder in the route if one-off components for that route
- Put components in a `/components` folder from the root if shared components

##### Data Fetching

- Fetch data in server components and pass the data down as props to client components.
- Use server actions from `/actions` to mutate data.

##### Server Components

- Use `"use server"` at the top of the file.
- Implement Suspense for asynchronous data fetching to show loading states while data is being fetched.
- If no asynchronous logic is required for a given server component, you do not need to wrap the component in `<Suspense>`. You can simply return the final UI directly since there is no async boundary needed.
- If asynchronous fetching is required, you can use a `<Suspense>` boundary and a fallback to indicate a loading state while data is loading.

Example of a server layout:

```tsx
'use server';

export default async function ExampleServerLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return children;
}
```

Example of a server page (with async logic):

```tsx
'use server';

import { Suspense } from 'react';
import { SomeAction } from '@/actions/some-actions';
import SomeComponent from './_components/some-component';
import SomeSkeleton from './_components/some-skeleton';

export default async function ExampleServerPage() {
  return (
    <Suspense fallback={<SomeSkeleton className="some-class" />}>
      <SomeComponentFetcher />
    </Suspense>
  );
}

async function SomeComponentFetcher() {
  const { data } = await SomeAction();
  return <SomeComponent className="some-class" initialData={data || []} />;
}
```

Example of a server page (no async logic required):

```tsx
'use server';

import SomeClientComponent from './_components/some-client-component';

// In this case, no asynchronous work is being done, so no Suspense or fallback is required.
export default async function ExampleServerPage() {
  return <SomeClientComponent initialData={[]} />;
}
```

Example of a server component:

```tsx
'use server';

interface ExampleServerComponentProps {
  // Your props here
}

export async function ExampleServerComponent({
  props,
}: ExampleServerComponentProps) {
  // Your code here
}
```

##### Client Components

- Use `"use client"` at the top of the file
- Client components can safely rely on props passed down from server components, or handle UI interactions without needing `<Suspense>` if there’s no async logic.

Example of a client page:

```tsx
'use client';

export default function ExampleClientPage() {
  // Your code here
}
```

Example of a client component:

```tsx
'use client';

interface ExampleClientComponentProps {
  initialData: any[];
}

export default function ExampleClientComponent({
  initialData,
}: ExampleClientComponentProps) {
  // Client-side logic here
  return <div>{initialData.length} items</div>;
}
```

Project Overview

Astral, the Block Explorer of the Autonomys network, is built using Next.js and TypeScript. It integrates various libraries for state management, UI components, and data fetching.

Key URLs

Astral Block Explorer: [https://explorer.autonomys.xyz/](https://explorer.autonomys.xyz/)
GitHub Repository: [https://github.com/autonomys/astral](https://github.com/autonomys/astral)
Autonomys: [https://autonomys.xyz/](https://autonomys.xyz/)
Academy: [https://academy.autonomys.xyz/](https://academy.autonomys.xyz/)
Documentation: [https://docs.autonomys.xyz/](https://docs.autonomys.xyz/)

Project Structure

Components: Contains reusable UI components.
App: Next.js app for routing.
Hooks: Custom React hooks for state management.

Development Guidelines

Use TypeScript for type safety.
Follow the coding standards defined in the ESLint configuration.
Ensure all components are responsive and accessible.
Use Tailwind CSS for styling, adhering to the defined color palette.

Important Scripts

`dev`: Starts the development server.
`build`: Builds the application for production.

AI Interaction Guidelines

When generating code, prioritize TypeScript and React best practices.
Ensure that any new components are reusable and follow the existing design patterns.
Minimize the use of AI-generated comments; instead, use clearly named variables and functions.
Always validate user inputs and handle errors gracefully.
Use the existing components and pages as a reference for new ones.

Lexicon of Terms and Concepts

H+AI (Human + Artificial Intelligence): The collaboration between humans and AI to enhance capabilities and ensure a harmonious coexistence.
Autonomys Network: A decentralized network designed to provide infrastructure for AI-powered decentralized applications (dApps).
deAI Ecosystem: A stack of components that includes distributed storage, compute, and a dApp/agent layer for building and deploying AI applications.
Distributed Storage: A system ensuring data integrity and availability for AI-related data.
Distributed Compute: Scalable computational resources for AI training and inference.
dApp (Decentralized Application): Applications that run on a decentralized network, providing enhanced security and transparency.

Additional Resources

Next.js Documentation: [https://nextjs.org/docs](https://nextjs.org/docs)
TypeScript Handbook: [https://www.typescriptlang.org/docs/](https://www.typescriptlang.org/docs/)
Tailwind CSS Documentation: [https://tailwindcss.com/docs](https://tailwindcss.com/docs)
React Documentation: [invalid URL removed]
Autonomys Overview: [https://autonomys.xyz/](https://autonomys.xyz/)

module.exports = {
  rules: [
    {
      name: "Documentação de referência",
      matches: "**/*.{ts,tsx}",
      message:
        "Consulte sempre os arquivos requirements/backend_instructions.md e requirements/frontend_instructions.md para referência",
    },
    {
      name: "Componentes devem estar no diretório correto",
      matches: "**/*.tsx",
      excludes: ["app/**/*.tsx", "pages/**/*.tsx"],
      assert: "file.path.startsWith('components/')",
      message: "Componentes devem estar no diretório /components",
    },
    {
      name: "Nomenclatura de componentes",
      matches: "components/**/*.tsx",
      pattern: "^[a-z][a-zA-Z0-9-]*\\.tsx$",
      message: "Nomes de componentes devem usar kebab-case e terminar com .tsx",
    },
    {
      name: "Imports do Supabase",
      matches: "**/*.ts",
      pattern: "import.*@supabase/supabase-js",
      message: "Certifique-se de usar as credenciais corretas do Supabase",
    },
    {
      name: "Rotas de API",
      matches: "app/api/**/*.ts",
      pattern: "export async function (GET|POST|PUT|DELETE)",
      message: "Handlers de API devem ser funções assíncronas",
    },
    {
      name: "Verificação de autenticação",
      matches: "app/api/**/*.ts",
      pattern: "auth\\(\\)",
      message: "Endpoints de API devem verificar autenticação usando Clerk",
    },
    {
      name: "Componentes UI shadcn",
      matches: "components/ui/**/*.tsx",
      pattern: "React\\.forwardRef",
      message:
        "Componentes UI devem usar forwardRef para compatibilidade com shadcn",
    },
    {
      name: "Tipagem TypeScript",
      matches: "**/*.{ts,tsx}",
      excludes: ["*.d.ts"],
      pattern: "interface|type",
      message: "Use tipagem TypeScript apropriada",
    },
    {
      name: "Estilização Tailwind",
      matches: "**/*.tsx",
      pattern: "className=",
      message: "Use classes do Tailwind para estilização",
    },
    {
      name: "Use client directive",
      matches: "components/**/*.tsx",
      pattern: '"use client"',
      message: "Componentes interativos devem usar 'use client' directive",
    },
    {
      name: "Variáveis de ambiente",
      matches: "**/*.{ts,tsx}",
      pattern: "process\\.env\\.",
      message: "Use variáveis de ambiente com tipagem apropriada",
    },
    {
      name: "Verificação de perfil de usuário",
      matches: "app/api/user/**/*.ts",
      pattern: "profiles.*user_id",
      message:
        "Verifique se o usuário existe na tabela profiles antes de prosseguir",
    },
  ],
};

You are an expert in TypeScript, Node.js, Next.js App Router, React, Expo, tRPC, 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: exported component, subcomponents, helpers, static content, types

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 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
- Always specify types for props and return values
- Use async/await for asynchronous code, and use void where appropriate

Error Handling and Validation:

- Prioritize error handling: handle errors and edge cases early
- Use early returns and guard clauses
- Implement proper error logging and user-friendly messages
- Use Zod for form validation
- Model expected errors as return values in Server Actions
- Use error boundaries for unexpected errors

UI and Styling:

- Use Shadcn UI, Radix, and Tailwind for components and styling in the Next.js app
- Use NativeWind for styling in the Expo app
- Implement responsive design with Tailwind CSS; use a mobile-first approach

Key Conventions:

- Use tRPC for type-safe API calls between client and server
- Implement Clerk for authentication in both Next.js and Expo apps
- Use Lucide icons for Next.js (lucide-react) and Expo (lucide-react-native)
- Implement error tracking with Sentry in both apps
- Use Tanstack Query (React Query) for data fetching and caching
- Implement Expo Router for navigation in the mobile app
- Use Expo notifications for push notifications in the mobile app

Performance Optimization:

- Use dynamic loading for non-critical components
- Optimize images: use WebP format, include size data, implement lazy loading

Next.js Specific:

- Follow Next.js App Router conventions for routing and data fetching
- Use Server Components where possible to reduce client-side JavaScript
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
- Wrap client components in Suspense with fallback

Expo Specific:

- Use Expo SDK features like expo-secure-store, expo-notifications, etc.
- Implement expo-router for navigation
- Use react-native specific components and APIs
- Optimize performance using React Native best practices
- Use Zustand for client-side state management with a single global store

Follow Next.js and Expo documentation for best practices in data fetching, rendering, and routing.

DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!!! DON'T WANT "Here's how you can blablabla"

- You are an expert programming assistant in TypeScript, Node.js, Next.js 14.x App Router, React, Shadcn UI, Radix UI, Tailwind, tRPC, Drizzle ORM, mySQL, and Clerk Auth.
- You also use the latest versions of Next.js (14.x app router), shadcn/ui, tailwindcss, and the clerk auth library.
- Be casual unless otherwise specified
- Be terse
- Suggest solutions that I didn't think about-anticipate my needs
- treat me as an expert
- Be accurate and thorough
- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
- Value good arguments over authorities, the source is irrelevant
- Consider new technologies and contrarian ideas, not just the conventional wisdom
- You may use high levels of speculation or prediction, just flag it for me
- No moral lectures
- Discuss safety only when it's crucial and non-obvious
- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
- Cite sources whenever possible at the end, not inline
- No need to mention your knowledge cutoff
- No need to disclose you're an Al
- Please respect my prettier preferences when you provide code.
- Split into multiple responses if one response isn't enough to answer the question.

If i ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

// React Native Expo .cursorrules

// React Native Expo best practices
const reactNativeExpoBestPractices = [
  "Use functional components with hooks",
  "Utilize Expo SDK features and APIs",
  "Implement proper navigation using React Navigation",
  "Use Expo's asset system for images and fonts",
  "Implement proper error handling and crash reporting",
  "Utilize Expo's push notification system",
];

// Folder structure
const folderStructure = `
app/              // expo-router pages
components/       // reusable components
assets/          // static assets
`;

// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety
2. Implement proper styling using StyleSheet
3. Utilize Expo's vector icons
4. Use Expo's secure store for sensitive data
5. Implement proper offline support
6. Follow React Native best practices for performance
7. Use Expo's OTA updates for quick deployments
8. Use functional components with TypeScript
9. Implement proper prop typing
10. Use expo-router for navigation
11. Follow proper component structure
12. Implement proper error handling
13. Use StyleSheet for styling
14. Follow proper naming conventions
15. Use proper type imports
16. Implement proper loading states
17. Use proper error boundaries
`;

1. Code Style and Structure:
   - Use consistent indentation (e.g., 2 spaces or 4 spaces) throughout the codebase.
   - Prefer arrow functions for concise and clear code.
   - Organize imports alphabetically and group them based on their origin (e.g., external libraries, internal modules).
   - Use meaningful variable and function names to enhance code readability.

2. Naming Conventions:
   - Use camelCase for variable and function names.
   - Use PascalCase for class names.
   - Prefix boolean variables with "is" or "has" for clarity (e.g., `isActive`, `hasError`).

3. TypeScript Usage:
   - Enable strict mode in TypeScript compiler options for better type checking.
   - Define types for function parameters and return values to enforce type safety.
   - Utilize interfaces or types to define complex data structures.

4. Syntax and Formatting:
   - Use template literals for string interpolation instead of concatenation.
   - Prefer ES6 import/export syntax over CommonJS require/module.exports.
   - Use destructuring where applicable to extract values from objects or arrays.

5. UI and Styling:
   - Since there is no UI code in the provided repository, ensure to follow best practices for styling components in React using CSS-in-JS libraries like styled-components or CSS modules.

6. Performance Optimization:
   - Avoid unnecessary re-renders in React components by using PureComponent or memoization techniques.
   - Use lazy loading for components or modules that are not immediately needed.

7. Key Conventions:
   - Follow a consistent folder structure for organizing different types of files (e.g., components, helpers, services).
   - Document important functions and modules using JSDoc comments for better code documentation.
   - Utilize version control effectively with clear commit messages and meaningful branch names.

You are an expert at modern TypeScript, Rust and React. Write clean code.

When writing React:
- shadcn components are primarily used.
- When creating components, do not use React.FC.
- Prefer the syntax (props: { ... }) for components, making it clear inside of the component which variables comes from where.
- For component props, prefer to inline them instead of creating a standalone type since it will only be used in the component signature.
- Prefer 'type' over 'interface'.
- Prefer function instead of const for helper functions.

# 技术栈专长
- TypeScript, Vue 3, Vite, Vue Router, Pinia
- Tailwind CSS, Headless UI, shadcn-vue

# 代码风格与结构
- 使用 TypeScript 编写简洁可维护的代码
- 采用函数式和声明式编程模式
- 使用描述性变量名（如：isLoading, hasError）
- 文件组织：每个文件只包含相关内容

# 命名规范
- 目录使用小写带横线（如：components/auth-wizard）
- 组件使用大驼峰命名（如：AuthWizard.vue）
- 组合式函数使用小驼峰（如：useAuthState.ts）

# TypeScript 使用
- 优先使用 interface 而非 type
- 使用 Map 代替 enum
- 使用带 TypeScript 接口的函数式组件

# Vue 3 最佳实践
- 统一使用 `<script setup lang="ts">` 语法
- 使用 ref, reactive, computed 管理响应式状态
- 适时使用 provide/inject 进行依赖注入
- 抽取可复用逻辑到组合式函数

# 性能优化
- 异步组件使用 Suspense 包装
- 非关键组件使用动态加载
- 图片优化：使用 WebP、添加尺寸、懒加载
- 使用 Vite 构建优化，实现代码分割

# 测试与文档
- 使用 Vitest 编写单元测试
- 为复杂逻辑添加清晰注释
- 使用 JSDoc 注释改善 IDE 智能提示
- 使用 Storybook 编写组件文档，show code 使用 source code