- Follow Next.js patterns, use app router and correctly use server and client components.
- Use Tailwind CSS for styling.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use React Context for state management.
- Use Prisma for database access.
- Follow AirBnB style guide for code formatting.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.

- Follow the Solidity best practices.
- Use the latest version of Solidity.
- Use OpenZeppelin libraries for common patterns like ERC20 or ERC721.
- Utilize Hardhat for development and testing.
- Employ Chai for contract testing.
- Use Infura for interacting with Ethereum networks.
- Follow AirBnB style guide for code formatting.
- Use CamelCase for naming functions and variables in Solidity.
- Use named exports for JavaScript files related to smart contracts.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING CONTRACTS AND CODE.

- Optimize indexes to improve query execution speed.
- Avoid N+1 queries and suggest more efficient alternatives.
- Recommend normalization or denormalization strategies based on use cases.
- Implement transaction management where necessary to ensure data consistency.
- Suggest methods for monitoring database performance.

- Follow Next.js Architecture: Use the App Router exclusively with strict React Server Component (RSC) patterns; mark client components with the 'use client' directive only when interactivity or hooks are required; implement route groups with (auth) and (public) conventions for protected routes; use server actions with useFormState/useFormStatus for backend-driven form submissions; configure all environment variables in next.config.mjs with schema validation.
- Follow React Component Patterns: Create components using PascalCase (e.g. UserProfileCard.js, not user-profile-card.js); export all components with named exports (e.g. export function UserCard() { … }); separate presentational and container components using a FeatureContainer/FeatureView pattern; define prop types using PropTypes or JSDoc; implement error boundaries (using libraries like react-error-boundary) for critical UI sections.
- Implement Tailwind CSS Properly: Use Tailwind’s utility classes for styling; use @apply only for complex component abstractions in CSS modules; centralize design tokens (colors, spacing, typography) in tailwind.config.js with semantic names; build responsive designs with mobile-first breakpoint prefixes (e.g. md:, lg:); leverage clsx for conditional class management; avoid arbitrary values by relying on predefined theme scales.
- Integrate Shadcn UI: Install new components with npx shadcn-ui@latest add [component]; extend the theme through a dedicated file (e.g. src/styles/theme.js) using CSS variables; prefer component composition over modifying core styles; implement dark mode using next-themes combined with Shadcn UI’s theming system; never modify core component styles—use the className prop for overrides.
- Use TanStack Query for Data Fetching: Initialize the query client with default options (e.g. staleTime of 5 minutes, retry count of 2); standardize query key generation using key factories; implement global error handling via the QueryClient's onError callback.
- Adopt a Robust Form Handling Strategy: Combine React Hook Form with Zod for schema validation and integrate them with Shadcn UI form components; register every input field properly (using register() or a Controller-like pattern); implement loading states via formState.isSubmitting; integrate form notifications as needed.
- Maintain a Solid Prisma Database Layer: Define your database schema in schema.prisma with strict typing and clear constraints; use a single Prisma Client instance (especially in serverless environments) with efficient connection pooling; implement soft deletes via a deletedAt field pattern; validate query results with runtime validation after operations.
- Follow an Effective State Management Strategy: Use React Context for global UI state (themes, modals, notifications) by creating custom provider components (e.g. using useReducer); for complex, persistent state, consider Zustand; do not mix server state with global state—store server data in the TanStack Query cache.
- Adhere to Ethereum/Solidity Standards: Write upgradeable smart contracts using OpenZeppelin’s Transparent Proxy pattern; target Solidity 0.8.20+ with a strict pragma and optimizations enabled; ensure comprehensive testing with tools like Foundry or Truffle; implement EIP-712 signatures for meta-transactions; use viem or wagmi for type-safe frontend contract interactions.
- Observe General JavaScript Standards: Follow the AirBnB style guide for all JavaScript/JSX code; enforce consistent naming, indentation, use of modern ES6+ features, and strict mode; avoid loosely typed variables by using PropTypes or JSDoc for validation; utilize utility methods (e.g. Pick, Omit, Partial) where applicable.
- Implement Robust Error Handling: Wrap critical UI sections in a global error boundary (integrated with external logging services); adopt a Result pattern for operations, returning objects that indicate success or failure; create custom error classes (e.g. AuthError) for domain-specific issues; use try/catch blocks consistently.
- Optimize Performance Across the Stack: Employ code splitting (using React.lazy and next/dynamic for heavy client components); optimize images using Next.js’s Image component with proper quality/size props; leverage server-side caching strategies (e.g. unstable_cache in Server Components); use memoization (React.memo) to prevent expensive re-renders.
- Jump Straight to Writing Components and Code: Do not include project setup instructions—assume the environment is preconfigured and focus solely on producing clean, modular, and production-ready code.

# Rules for MERN Stack and Vite Applications
mern_stack_rules:
  # Architecture & Project Structure
  - Enforce a clear folder structure: `src/models`, `src/controllers`, `src/routes`, `src/middleware`, `src/utils`.
  - Use environment variables via `dotenv` and validate with `joi` or `zod` at startup.
  - Define Express app in `app.js`, separate server startup in `server.js`.
  - Centralize configuration in a `config/` module (database, cache, third-party keys).

  # API & Routing
  - Follow RESTful conventions: map CRUD operations to HTTP verbs.
  - Use Express Router for modular route definitions; group by resource.
  - Implement input validation with `joi` or `zod` in middleware.
  - Standardize responses: `{ success: boolean, data: any, error?: string }`.

  # Authentication & Security
  - Use JWT for auth; store secrets securely via environment variables.
  - Protect routes with auth middleware; allow role-based access controls.
  - Sanitize user input to prevent injection attacks (e.g., `express-validator`).
  - Apply security headers via `helmet`, enable CORS via `cors`.

  # Database Layer
  - Use Mongoose for MongoDB interactions; define strict schemas with TypeScript or JSDoc.
  - Maintain a single connection instance; handle disconnects on errors gracefully.
  - Implement soft deletes with a `deletedAt` timestamp field pattern.
  - Encapsulate database calls in service modules for testability.

  # Error Handling & Logging
  - Create a global error handler middleware catching sync and async errors.
  - Use custom Error classes (e.g., `ValidationError`, `AuthError`).
  - Log errors and requests with `winston` or `pino`; store logs centrally in JSON format.

  # Testing
  - Write unit tests for controllers/services using Jest and Supertest.
  - Mock external dependencies (DB, email) for isolated tests.
  - Enforce 80% coverage; run tests in CI pipelines.

  # General JavaScript Standards
  - Adhere to the Airbnb style guide; lint with ESLint and Prettier on save.
  - Use ES6+ features: `async/await`, destructuring, modules.
  - Avoid `any` in TypeScript; prefer strict typing and interfaces.

vite_app_rules:
  # Vite Configuration
  - Define aliases in `vite.config.js` under `resolve.alias` for `@/components`, `@/utils`.
  - Use `dotenv` and `vite-plugin-env-compatible` to load and validate env variables.
  - Optimize dependencies with `optimizeDeps.include` and `exclude` as needed.

  # React & Component Patterns
  - Use PascalCase for component filenames; index exports for simplicity.
  - Separate presentational and container components; follow `FeatureView/FeatureContainer` pattern.
  - Mark client-only modules in SSR setups explicitly; avoid server bundling of browser-only APIs.

  # Styling & CSS
  - Integrate Tailwind CSS via `tailwind.config.cjs`; use `@apply` sparingly in CSS modules.
  - Centralize design tokens (colors, spacing) in Tailwind theme; follow mobile-first breakpoints.
  - Use `clsx` for conditional classNames; avoid inline style objects.

  # State Management & Data Fetching
  - Use React Context for UI state (theme, modals); use Zustand or Redux Toolkit for complex stores.
  - Integrate TanStack Query (React Query) for server data; configure a global `QueryClient`.
  - Standardize query keys; handle staleTime and retry strategies.

  # Form Handling
  - Use React Hook Form with Zod for validation; integrate with UI library form components.
  - Show loading and error states using `formState` hooks.

  # UI Libraries & Plugins
  - Install UI components via `npx shadcn-ui add [component]`; override styles via `className`, not core files.
  - Implement dark mode toggles with `next-themes` or `useTheme` hooks.

  # Performance & Build Optimization
  - Enable code splitting via dynamic imports and React.lazy.
  - Use `@vitejs/plugin-react-swc` or similar for faster builds.
  - Generate source maps only in development; minify code in production builds.

  # Testing & Linting
  - Use Vitest for unit tests; mock modules with `vi.mock`.
  - Lint with ESLint configured for React and TypeScript; run in pre-commit hooks via Husky.
```