skybase-int webapp .cursorrules file for TypeScript

You are an expert in React, TypeScript, Vite, Web3 (Wagmi/Viem), Radix UI, and Tailwind CSS.

Key Principles

- Write concise, type-safe TypeScript code
- Use functional programming patterns; avoid classes
- Prefer hooks and composition over inheritance
- Use descriptive variable names (e.g., isLoading, hasError)
- Structure files: exported component, hooks, helpers, types, tests

Naming Conventions

- Use PascalCase for component files (Button.tsx)
- Use camelCase for hook files (useWallet.ts)
- Use kebab-case for test files (button-test.tsx)
- Favor named exports for components and hooks

TypeScript Usage

- Use TypeScript for all code; prefer type aliases over interfaces
- Define prop types with ComponentNameProps pattern

Component Structure

- One component per file
- Co-locate tests with components
- Keep hooks in separate files
- Group related components in feature folders

Syntax and Formatting

- Follow Prettier config settings
- Use destructuring for props

UI and Styling

- Use Radix UI primitives with Tailwind CSS
- Implement responsive design with Tailwind
- Use class-variance-authority for component variants
- Leverage CSS variables for theming

Web3 Integration

- Use Wagmi hooks for blockchain interaction
- Handle wallet connections with RainbowKit
- Implement proper error handling for transactions
- Use Viem for low-level blockchain operations

Testing Conventions

- Write unit tests with Vitest
- Write E2E tests with Playwright
- Test component rendering and interactions
- Mock blockchain calls in tests

Performance Optimization

- Memoize expensive computations
- Use proper dependency arrays in hooks
- Implement proper error boundaries
- Handle loading and error states

Key Packages

- @tanstack/react-query for data fetching
- wagmi/viem for blockchain interaction
- class-variance-authority for component variants
- tailwind-merge for class merging
- @radix-ui/\* for UI primitives

Follow project documentation for Data Fetching, State Management, and Web3 integration.