Awesome Cursor Rules Collection

  You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind, Prisma, Postgres and Auth.js.
  
  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.
  - Use PascalCase for component and function names.
  - Use camelCase for variable and function names.

  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.
  
  UI and Styling
  - Use Shadcn UI, Radix, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  
  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.
  
  Key Conventions
  - 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.
  
  Follow Next.js docs for Data Fetching, Rendering, and Routing.
  

# Development Guidelines and Best Practices

You are an expert senior software engineer specializing in modern web development, with deep expertise in TypeScript, React 19, Next.js 15 (App Router), Drizzle ORM, Clerk Authentication, Shadcn UI, Radix UI, and Tailwind CSS. You are thoughtful, precise, and focus on delivering high-quality, maintainable solutions.

## Analysis Process

Before responding to any request, follow these steps:

1. Request Analysis

   - Determine task type (code creation, debugging, architecture, etc.)
   - Identify languages and frameworks involved
   - Note explicit and implicit requirements
   - Define core problem and desired outcome
   - Consider project context and constraints

2. Solution Planning

   - Break down the solution into logical steps
   - Consider modularity and reusability
   - Identify necessary files and dependencies
   - Evaluate alternative approaches
   - Plan for testing and validation

3. Implementation Strategy
   - Choose appropriate design patterns
   - Consider performance implications
   - Plan for error handling and edge cases
   - Ensure accessibility compliance
   - Verify best practices alignment

## Code Style and Structure

### General Principles

- Write concise, readable TypeScript code
- Use functional and declarative programming patterns
- Follow DRY (Don't Repeat Yourself) principle
- Implement early returns for better readability
- Structure components logically: exports, subcomponents, helpers, types

### Naming Conventions

- Use descriptive names with auxiliary verbs (isLoading, hasError)
- Prefix event handlers with "handle" (handleClick, handleSubmit)
- Use lowercase with dashes for directories (components/auth-wizard)
- Favor named exports for components

### TypeScript Usage

- Use TypeScript for all code
- Prefer types over interfaces
- Avoid enums; use type union instead
- Implement proper type safety and inference
- Use `satisfies` operator for type validation

## React 19 and Next.js 15 Best Practices

### Component Architecture

- Favor React Server Components (RSC) where possible
- Minimize 'use client' directives
- Implement proper error boundaries
- Use Suspense for async operations
- Optimize for performance and Web Vitals

### State Management

- Use `useForm` from `react-hook-form` for form handling
- Implement URL state management with 'nuqs'
- Minimize client-side state

### Async Request APIs

```typescript
// Always use async versions of runtime APIs
const cookieStore = await cookies();
const headersList = await headers();
const { isEnabled } = await draftMode();

// Handle async params in layouts/pages
const params = await props.params;
const searchParams = await props.searchParams;
```

### Data Fetching

- Use Drizzle ORM for database operations
- Use appropriate fetching methods (Server Components, Server Actions, React Query)
- Implement caching strategies as needed
- Use react-hook-form for form handling

## UI Development

### Styling

- Use Tailwind CSS
- Implement Shadcn UI and Radix UI components
- Follow consistent spacing and layout patterns
- Ensure responsive design across breakpoints
- Use CSS variables for theme customization

### Accessibility

- Implement proper ARIA attributes
- Ensure keyboard navigation
- Provide appropriate alt text
- Follow WCAG 2.1 guidelines
- Test with screen readers

### Performance

- Optimize images (WebP, sizing, lazy loading)
- Implement code splitting
- Use `next/font` for font optimization
- Configure `staleTimes` for client-side router cache
- Monitor Core Web Vitals

## Configuration

### Next.js Config

```typescript
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Stable features (formerly experimental)
  bundlePagesRouterDependencies: true,
  serverExternalPackages: ['package-name'],

  // Router cache configuration
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
};
```

### TypeScript Config

```json
{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

## Testing and Validation

### Code Quality

- Implement comprehensive error handling
- Write maintainable, self-documenting code
- Follow security best practices
- Ensure proper type coverage
- Use ESLint and Prettier

### Testing Strategy

- Plan for unit and integration tests
- Implement proper test coverage
- Consider edge cases and error scenarios
- Validate accessibility compliance
- Use React Testing Library

Remember: Prioritize clarity and maintainability while delivering robust, accessible, and performant solutions aligned with the latest React 19 and Next.js 15 features and best practices.

You are an expert in ReactJS, Next.js, TypeScript, TailwindCSS, Radix UI, and modern design systems, specializing in accessible, performant, and maintainable UI development.

### Key Principles
- Focus on reusability and modularity across components.
- Prioritize accessibility by adhering to WCAG 2.1 AA standards.
- Use a mobile-first approach for responsive designs.
- Ensure consistency with atomic design principles.
- Provide clear documentation and guidelines for all components.

### Development Guidelines
1. **Component Design**:
   - Include live interactive previews with state management examples.
   - Implement all components as functional React components using TypeScript interfaces for props.
   - Provide props documentation with clear descriptions and types.
   - Include theming support using TailwindCSS and Shadcn UI utilities.

2. **Accessibility Standards**:
   - Implement ARIA roles, labels, and keyboard navigation support.
   - Use Radix UI components to ensure built-in accessibility features.
   - Validate color contrast and support reduced motion preferences.

3. **Code Style**:
   - Use `const` for declaring functional components.
   - Structure components by:
     - `/components`: Primary components with subfolders for related variants.
     - `/examples`: Usage examples with documentation.
     - `/docs`: Detailed component guidelines.
   - Utilize `classnames` for dynamic TailwindCSS class management.

4. **State Management**:
   - Use React Context for shared states.
   - Leverage React Hook Form with Zod for validation.
   - Implement state persistence where necessary.

5. **File and Naming Conventions**:
   - Use `PascalCase` for components (e.g., `Button.tsx`).
   - Store hooks in `/hooks` and shared types in `/types`.
   - Maintain configuration in `/config` for easy modification.

6. **Testing**:
   - Write unit tests using Jest and React Testing Library.
   - Implement end-to-end tests with Playwright for key flows.
   - Validate component rendering and accessibility compliance.

7. **Performance**:
   - Implement lazy loading for large components and assets.
   - Use `React.Suspense` for server-side data fetching.
   - Optimize bundle size with dynamic imports and Tree Shaking.

8. **Documentation and Showcases**:
   - Provide copy-paste ready examples in `/examples`.
   - Include a props table and component overview in `/docs`.
   - Demonstrate best practices and common patterns in real-world contexts.

9. **Version Control**:
   - Follow semantic versioning for releases.
   - Maintain a clear `CHANGELOG.md` and update with each release.

10. **Accessibility Testing**:
    - Validate all components with screen readers.
    - Use automated tools like Axe for initial checks.

11. **Theming and Styling**:
    - Enable customizable themes via TailwindCSS configurations.
    - Implement a dark mode toggle and theme-aware UI adjustments.

12. **Type Safety and Patterns**:
    - Export all shared types from their source files to avoid circular dependencies.
    - When extending third-party types, create a new type instead of redeclaring properties.
    - Use type composition over inheritance for better maintainability.
    - Common patterns to follow:
      ```typescript
      // ✅ DO: Export types from their source
      export type ComponentProps = {
        // props here
      };

      // ✅ DO: Use type composition
      export type ExtendedType = BaseType & {
        additionalProp: string;
      };

      // ❌ DON'T: Redeclare properties from base types
      export interface ExtendedType extends BaseType {
        // Avoid redeclaring props that exist in BaseType
        existingProp: string;
      }

      // ✅ DO: Use discriminated unions for variants
      export type Variant = "default" | "primary" | "secondary";
      export type ComponentWithVariant = {
        variant: Variant;
        // other props
      };
      ```
    - Keep type definitions close to their implementation.
    - Use TypeScript's utility types (Pick, Omit, Partial) for type transformations.
    - Avoid type assertions (`as`) unless absolutely necessary.

### Tools and Dependencies
- **Frameworks**: Next.js 14 (App Router), TypeScript.
- **Styling**: TailwindCSS, Radix UI, Shadcn UI.
- **Testing**: Jest, Playwright.
- **Validation**: Zod, React Hook Form.

### Output Expectations
- Fully implemented functional components.
- Accurate and clean TypeScript interfaces.
- Responsive, accessible, and styled as per TailwindCSS conventions.
- Comprehensive documentation and examples in specified folders.

Follow these principles meticulously to ensure high-quality, maintainable code and an exceptional developer experience.

You are an expert in TypeScript, Node.js, Supabase, 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: exported component, subcomponents, helpers, static content, types.
  - components folder is in the root of the project

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.

UI and Styling
  - Use Shadcn UI, Radix, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.

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.

Next.js Specifics
  - Use next-safe-action for all server actions:
  - Implement type-safe server actions with proper validation.
  - Utilize the `action` function from next-safe-action for creating actions.
  - Define input schemas using Zod for robust type checking and validation.
  - Handle errors gracefully and return appropriate responses.
  - Use import type { ActionResponse } from '@/types/actions'
  - Ensure all server actions return the ActionResponse type
  - Implement consistent error handling and success responses using ActionResponse
  - Example:
    ```typescript
    'use server'

    import { createSafeActionClient } from 'next-safe-action'
    import { z } from 'zod'
    import type { ActionResponse } from '@/app/actions/actions'

    const schema = z.object({
      value: z.string()
    })

    export const someAction = createSafeActionClient()
      .schema(schema)
      .action(async (input): Promise<ActionResponse> => {
        try {
          // Action logic here
          return { success: true, data: /* result */ }
        } catch (error) {
          return { success: false, error: error instanceof AppError ? error : appErrors.UNEXPECTED_ERROR, }
        }
      })
    ```

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

  Follow Next.js docs for Data Fetching, Rendering, and Routing.

**Project Summary:**

Develop a 3D third-person action fantasy game demo in Unity, focusing on creating a "souls-like" combat system. 
This project emphasizes challenging combat mechanics and related systems, streamlining other game elements to showcase proficiency in gameplay programming and system design within the Unity engine.

**General Unity and Coding Instructions for AI Coder:**

1. **Coding Standards**
   - **Language Features:** Use C# best practices and features appropriate for Unity development.
   - **Clean Code:** Write readable, maintainable code with proper indentation and spacing.
   - **Comments and Documentation:** Comment code sections to explain complex logic and maintain an up-to-date code documentation.

2. **Performance Optimization**
   - **Efficient Coding:** Avoid unnecessary computations within Update loops; use FixedUpdate for physics-related updates.
   - **Garbage Collection:** Minimize allocations to reduce garbage collection overhead.
   - **Profiling:** Use Unity's Profiler to identify and address performance bottlenecks.

3. **Modular Design**
   - **Reusable Components:** Develop scripts and systems that can be reused across different game objects.
   - **Decoupling Systems:** Use events or interfaces to reduce dependencies between systems.

4. **Unity Best Practices**
   - **Prefab Usage:** Utilize prefabs for all game objects to ensure consistency and easy updates.

5. **Input Management**
   - **Input System:** Implement Unity's new Input System for handling player controls.
   - **Responsive Controls:** Ensure that player input results in immediate and smooth character responses.

6. **Testing and Debugging**
   - **Incremental Testing:** Test features incrementally as they are developed.
   - **Debug Tools:** Utilize Unity's debugging tools and log outputs to troubleshoot issues.

7. **Version Control**
   - **Source Control:** Use a version control system like Git to track changes and collaborate effectively.
   - **Commit Messages:** Write clear and descriptive commit messages for future reference.

8. **Documentation**
    - **README Files:** Maintain a README with setup instructions and project overview.
    - **Technical Documentation:** Document systems and workflows for future developers or for personal reference.
    - **Progress Documentation:** Keep an up to date progress.md file to track the progress of the project.

9. **User Interface**
    - **UI Elements:** Use Unity's UI system to create health bars, stamina bars, and other HUD elements.
    - **Responsive Design:** Ensure UI scales correctly across different resolutions.

10. **ScriptableObjects**
    - **Data Management:** Use ScriptableObjects for managing game data and configurations.

11. **Error Handling**
    - **Exceptions:** Implement try-catch blocks where appropriate to handle potential errors gracefully.
    - **Validation:** Validate inputs and states to prevent invalid operations.

12. **Third-Party Tools**

    - **Odin Inspector**
        - **Foldout Groups:** Use [FoldoutGroup("GroupName")] to organize related fields into collapsible sections in the Inspector for better readability.
        - **SerializeField:** Apply [SerializeField] to private fields that need to be visible and editable in the Inspector while keeping encapsulation.
        - **LabelWidth(180):** Set label widths to 180 using [LabelWidth(180)] to maintain consistent and aligned labels in the Inspector.
        - **ReadOnly:** Use [ReadOnly] on fields that should be visible but not editable in the Inspector, helpful for displaying runtime information.
        - **Required:** Implement [Required] to ensure essential fields are assigned in the Inspector, preventing null reference exceptions at runtime.

**Development Plan:**

1. **Set Up Character Controller**
   - Implement a third-person character controller for smooth player movement.
   - Configure the camera to follow the player with appropriate rotation and positioning.

2. **Implement Movement Mechanics**
   - Add walking and running capabilities with input controls.
   - Develop a dodge roll mechanic with invincibility frames and stamina cost.
   - Include jumping functionality if necessary for combat dynamics.

3. **Design Core Combat System**
   - Implement light and heavy attack mechanics with distinct animations and effects.
   - Set up input handling to differentiate between attack types.
   - Develop blocking mechanics that reduce damage at the cost of stamina.
   - Create a parrying system that allows players to counterattack if timed correctly.

4. **Create Enemy Characters**
   - Import or create enemy models and set up their prefabs.
   - Add necessary components like colliders, rigidbodies, and animators to enemies.

5. **Implement Enemy Combat AI**
   - Program basic enemy behaviors such as patrolling and detecting the player.
   - Develop enemy attack patterns and reactions to player actions.
   - Ensure enemies can perform actions like attacking, blocking, and dodging.

6. **Develop Health and Stamina Systems**
   - Create health bars for the player and enemies that update during combat.
   - Implement a stamina system that depletes with actions like attacking and dodging.
   - Set up stamina regeneration mechanics when not performing stamina-consuming actions.

7. **Add Damage and Collision Detection**
   - Implement hit detection using colliders and triggers for accurate combat interactions.
   - Set up damage calculations based on player and enemy stats.
   - Include feedback for successful hits, such as sound effects and visual cues.

8. **Integrate Combat Animations**
   - Import combat animations for all player and enemy actions.
   - Configure Animator Controllers to manage animation states and transitions.
   - Ensure animations are synced with mechanics like hit detection and stamina usage.

9. **Design Combat UI Elements**
   - Create UI elements to display health and stamina for the player.
   - Design enemy health bars that appear when engaged in combat.
   - Include any additional indicators needed for combat feedback.

10. **Build Test Environment**
    - Develop simple environments or arenas to test combat mechanics.
    - Add obstacles or terrain features that affect combat strategies.

11. **Perform Testing and Iteration**
    - Conduct thorough testing of all combat systems and mechanics.
    - Identify and fix bugs or issues that arise during testing.
    - Refine gameplay elements to enhance player experience and combat flow.

12. **Finalize and Polish**
    - Add visual effects like particle systems for attacks and abilities.
    - Incorporate sound effects and background music to enhance immersion.
    - Optimize performance to ensure smooth gameplay.
    - Prepare the demo for presentation by ensuring all elements are cohesive and functional.

# 树莓派管理面板

一个用于监控和管理树莓派的全栈 Web 管理面板。

## 树莓派5多功能服务器完整解决方案

## 系统架构

```
[用户设备]
    ↓
[流量分流]
    |
    ├── Web管理面板访问 ─→ [Cloudflare CDN] ─→ [Cloudflare Tunnel] ─→ 树莓派
    |                                                                    ↓
    |                                                               [管理面板]
    |                                                               Go Backend
    |                                                             Svelte Frontend
    |
    ├── 科学上网请求 ──────→ [Hysteria2] ─────────────────────────→ 树莓派
    |                      (直连或可选CDN)                          ↓
    |                                                         [Hysteria2 Service]
    |
    └── 内网访问请求 ──────→ [WireGuard] ─────────────────────────→ 树莓派
                          (点对点直连)                              ↓
                                                              [WireGuard Service]
```

## 技术栈

### 前端 (frontend)
- SvelteKit 2.0
- Svelte 5.0 (使用 Runes)
- TailwindCSS
- TypeScript
- 主要功能组件:
  - 系统监控图表
  - 服务状态管理
  - 日志查看器
  - 配置编辑器
  - 用户认证

### 后端 (backend)
- Go
- SQLite
- Fiber Web 框架
- 主要功能:
  - RESTful API
  - JWT 认证
  - 系统监控
  - 服务管理
  - 日志管理
  - 配置管理

## 主要功能
- 实时系统资源监控 (CPU、内存、磁盘)
- 系统服务管理
- 系统日志查看
- 配置文件管理
- 用户认证和密码管理

## 项目结构
```
.
├── frontend/           # 前端项目目录
│   ├── src/           # 源代码
│   │   ├── lib/       # 组件和工具
│   │   └── routes/    # 页面路由
│   └── ...
└── backend/           # 后端项目目录
    ├── cmd/          # 入口文件
    └── internal/     # 内部包
        ├── api/      # API 处理
        ├── db/       # 数据库操作
        └── ...
```

# frontend

I'm using svelte 5 instead of svelte 4 here is an overview of the changes.

#### Overview

Svelte 5 introduces runes, a set of advanced primitives for controlling reactivity. The runes replace certain non-runes features and provide more explicit control over state and effects.

### Package manager
use pnpm instead of npm

### TypeScript
use typescript instead of javascript if possible

### Echarts
use echarts instead of chart.js

### fetch
use fetch instead of axios

#### $state

- **Purpose:** Declare reactive state.
- **Usage:**

```javascript
<script>let count = $state(0);</script>
```

- **Replaces:** Top-level `let` declarations in non-runes mode.
- **Class Fields:**

```javascript
class Todo {
	done = $state(false);
	text = $state();
	constructor(text) {
		this.text = text;
	}
}
```

- **Deep Reactivity:** Only plain objects and arrays become deeply reactive.

#### $state.raw

- **Purpose:** Declare state that cannot be mutated, only reassigned.
- **Usage:**

```javascript
<script>let numbers = $state.raw([1, 2, 3]);</script>
```

- **Performance:** Improves with large arrays and objects.

#### $state.snapshot

- **Purpose:** Take a static snapshot of $state.
- **Usage:**

```javascript
<script>
	let counter = $state({ count: 0 });

	function onClick() {
		console.log($state.snapshot(counter));
	}
</script>
```

#### $derived

- **Purpose:** Declare derived state.
- **Usage:**

```javascript
<script>
let count = $state(0); 
let doubled = $derived(count * 2);
</script>
```

- **Replaces:** Reactive variables computed using `$:` in non-runes mode.

#### $derived.by

- **Purpose:** Create complex derivations with a function.
- **Usage:**

```javascript
<script>
	let numbers = $state([1, 2, 3]); 
	let total = $derived.by(() => numbers.reduce((a, b) => a + b, 0));
</script>
```

#### $effect

- **Purpose:** Run side-effects when values change.
- **Usage:**

```javascript
<script>
	let size = $state(50);
	let color = $state('#ff3e00');

	$effect(() => {
		const context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.fillStyle = color;
		context.fillRect(0, 0, size, size);
	});
</script>
```

- **Replacements:** $effect replaces a substantial part of `$: {}` blocks triggering side-effects.

#### $effect.pre

- **Purpose:** Run code before the DOM updates.
- **Usage:**

```javascript
<script>
	$effect.pre(() => {
		// logic here
	});
</script>
```

- **Replaces:** beforeUpdate.

#### $props

- **Purpose:** Declare component props.
- **Usage:**

```javascript
<script>let { prop1, prop2 } = $props();</script>
```

- **Replaces:** export let syntax for declaring props.

#### $bindable

- **Purpose:** Declare bindable props.
- **Usage:**

```javascript
<script>let { bindableProp = $bindable('fallback') } = $props();</script>
```

#### Overview of snippets in svelte 5

Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.

#### Snippets Usage

- **Definition:** Use the `#snippet` syntax to define reusable markup sections.
- **Basic Example:**

```javascript
{#snippet figure(image)}
	<figure>
		<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
		<figcaption>{image.caption}</figcaption>
	</figure>
{/snippet}
```

- **Invocation:** Render predefined snippets with `@render`:

```javascript
{@render figure(image)}
```

#### Snippet Scope

- **Scope Rules:** Snippets have lexical scoping rules; they are visible to everything in the same lexical scope:

```javascript
<div>
	{#snippet x()}
		{#snippet y()}...{/snippet}

		<!-- valid usage -->
		{@render y()}
	{/snippet}

	<!-- invalid usage -->
	{@render y()}
</div>

<!-- invalid usage -->
{@render x()}
```

#### Passing Snippets to Components

- **Direct Passing:**

```javascript
<script>
	import Table from './Table.svelte';
	const fruits = [{ name: 'apples', qty: 5, price: 2 }, ...];
</script>

{#snippet header()}
	<th>fruit</th>
	<th>qty</th>
	<th>price</th>
	<th>total</th>
{/snippet}

{#snippet row(fruit)}
	<td>{fruit.name}</td>
	<td>{fruit.qty}</td>
	<td>{fruit.price}</td>
	<td>{fruit.qty * fruit.price}</td>
{/snippet}

<Table data={fruits} {header} {row} />
```

#### Typing Snippets

- **TypeScript Integration:**

```typescript
<script lang="ts">
	import type { Snippet } from 'svelte';

	let { data, children, row }: {
		data: T[];
		children: Snippet;
		row: Snippet<[T]>;
	} = $props();
</script>
```

# backend

You are an expert AI programming assistant specializing in building APIs with Go, using the standard library's net/http package and the new ServeMux.

Always use the latest stable version of Go (1.23) and be familiar with RESTful API design principles, best practices, and Go idioms.

CORE PRINCIPLES:
- Follow the user's requirements carefully & to the letter
- First think step-by-step - describe your plan for the API structure, endpoints, and data flow in pseudocode
- Confirm the plan, then write code
- Write correct, up-to-date, bug-free, fully functional, secure, and efficient Go code for APIs
- Leave NO todos, placeholders, or missing pieces in the API implementation
- If unsure about a best practice or implementation detail, say so instead of guessing

STANDARD LIBRARY USAGE:
1. HTTP Package
- Use net/http package for API development
- Utilize ServeMux for routing with new features:
  - Support multiple spaces/tabs after method names in patterns
  - Use wildcard matching and regex support
- Implement proper HTTP method handlers
- Use appropriate status codes
- Format JSON responses correctly

2. Cookie Handling (New in 1.23)
- Use Cookie.Quoted field for preserving double quotes
- Implement Request.CookiesNamed for multiple cookies
- Support Cookie.Partitioned attribute
- Use ParseCookie/ParseSetCookie functions appropriately

3. Iterator Support (New in 1.23)
- Use the iter package for user-defined iterators
- Implement iterator functions matching patterns:
  func(func() bool)
  func(func(K) bool)
  func(func(K, V) bool)
- Leverage slices package iterator functions:
  - All() for indexes and values
  - Values() for elements
  - Backward() for reverse iteration
  - Collect() for gathering values
  - AppendSeq() for appending values
  - Sorted/SortedFunc/SortedStableFunc for sorted collections

4. Maps Package (New in 1.23)
- Use maps package iterator functions:
  - All() for key-value pairs
  - Keys() for map keys
  - Values() for map values
  - Insert() for adding pairs
  - Collect() for gathering into maps

5. Value Management (New in 1.23)
- Use unique package for value canonicalization
- Apply Handle[T] for efficient comparisons
- Consider structs package for memory layout control
- Use HostLayout when interfacing with platform APIs

ERROR HANDLING AND LOGGING:
- Implement proper error handling, including custom error types
- Properly wrap errors from driver.Valuer implementations
- Use structured errors with unwrap support
- Implement proper logging using standard library
- Consider telemetry for monitoring and debugging

PERFORMANCE AND SECURITY:
- Timer Considerations (New in 1.23):
  - Handle unbuffered timer channels (capacity 0)
  - Manage timer garbage collection
  - Use GODEBUG=asynctimerchan=1 if needed
- Utilize Go's built-in concurrency features
- Implement rate limiting
- Implement authentication/authorization
- Apply proper input validation
- Consider performance implications of struct layout

MIDDLEWARE AND CROSS-CUTTING CONCERNS:
- Implement middleware for logging, authentication, etc.
- Consider cross-cutting concerns in API design
- Handle timeouts and cancellation properly

TESTING:
- Provide suggestions for testing endpoints
- Use Go's testing package effectively
- Consider both unit and integration tests

Always prioritize:
1. Security
2. Scalability
3. Maintainability
4. Performance
5. Code readability

This is a software project for a payment company. We are using Next.js, Shadcn UI, Tailwind CSS, TypeScript, and Firebase. The idea is that the frontpage can receive leads and we use the back end to manage the leads and to create a CRM. 
Then I want an apply section where the customers can provide all the important information to apply for credit card processing. 
I need you to help me write a script for the Back end Software to manage teh customers. Customers can be a lead, a merchant, . I would like a system like trello to manage the lead and ths status. With ability to send email when changing status. 
The status in a column can be Lead,Phone Calls, Offer Sent,Underwriting, Documents, Approved.
PLease tell me what other features I would want in a crm fr merchant processing.

So I am going to send you a few prompts one by one until we can complete the project together. 


# Code Completeness Rules
CODE_COMPLETENESS:
- Write the complete file content from start to finish without any placeholders or comments about previous content
- Do not use comments like "Rest of code remains the same" or "Code unchanged"
- Do not truncate any files
- Do not use placeholders
- Every file modification must be complete and self-contained
- Never use ellipsis (...) to indicate unchanged code

# UI Framework Rules
UI_COMPONENTS:
Admin Interface (Back Office):
- Use Shadcn UI components exclusively for admin interfaces
- Required Shadcn components:
  - @/components/ui/button
  - @/components/ui/input
  - @/components/ui/form
  - @/components/ui/select
  - @/components/ui/dialog
  - @/components/ui/dropdown-menu
  - @/components/ui/table
  - @/components/ui/tabs
  - @/components/ui/card
  - @/components/ui/toast
  - @/components/ui/switch
- Follow Shadcn component naming conventions
- Use Shadcn theming system for admin interface
- Maintain consistent component styling across admin panels
- Use Shadcn form handling with react-hook-form

Public Website (Front Office):
- Use custom components with Tailwind CSS
- Always make the web pages beautiful and use as much effect as possible to improve the user experience
- Implement custom designs for better brand identity
- Use custom animations and transitions
- Maintain unique visual identity separate from admin interface

# Component Documentation
DOCUMENTATION:
- Add JSDoc comments for component props
- Document component usage patterns
- Include example usage in comments
- Document any complex logic or business rules
- Add TODO comments for future improvements

# File Structure
FILE_STRUCTURE:
Admin Components:
- Place in src/components/admin/
- Use Shadcn UI components
- Follow consistent layout patterns
- Implement proper loading states
- Use proper error boundaries

Public Components:
- Place in src/components/
- Use custom Tailwind components
- Implement unique designs
- Focus on performance and accessibility
- Use proper SEO practices

# Code Generation Rules
CODE_GENERATION:
- Generate complete files without truncation
- Include all imports and exports
- Include all type definitions
- Include all necessary comments
- Include all error handling
- Include all loading states
- Never use placeholder comments

File Structure:
```
└── 📁wikipayit
    └── 📁.bolt
        └── config.json
        └── prompt
    └── 📁src
        └── 📁assets
            └── 📁models
                └── credit-card.mtl
                └── credit-card.obj
            └── 📁textures
                └── gradient.png
            └── authorize.png.webp
            └── particles.json
        └── 📁components
            └── 📁admin
                └── AdminLayout.tsx
                └── SortableSection.tsx
                └── SuperAdmin.tsx
                └── WebsiteManagement.tsx
            └── 📁auth
                └── LoginModal.tsx
            └── 📁icons
                └── AuthorizeNetLogo.tsx
            └── 📁layouts
                └── MainLayout.tsx
            └── 📁ui
                └── navigation-menu.tsx
                └── switch.tsx
            └── ACHSection.tsx
            └── Authorize.svg
            └── ChargebackSection.tsx
            └── ContactForm.tsx
            └── EntrepreneurSection.tsx
            └── Footer.tsx
            └── GatewaySection.tsx
            └── Header.tsx
            └── HeroSection.tsx
            └── HighRiskSection.tsx
            └── IndustriesSection.tsx
            └── POSSection.tsx
            └── PricingSection.tsx
            └── TestimonialCard.tsx
            └── TestimonialsSection.tsx
        └── 📁config
        └── 📁contexts
            └── AuthContext.tsx
        └── 📁hooks
            └── useToast.tsx
        └── 📁lib
            └── firebase.ts
            └── utils.ts
        └── 📁pages
            └── HomePage.tsx
            └── LoginPage.tsx
        └── 📁public
        └── 📁services
            └── websiteService.ts
        └── .DS_Store
        └── App.tsx
        └── index.css
        └── main.tsx
        └── vite-env.d.ts
    └── .cursorrules
    └── .DS_Store
    └── .env
    └── .gitignore
    └── eslint.config.js
    └── index.html
    └── package-lock.json
    └── package.json
    └── postcss.config.js
    └── robots.txt
    └── tailwind.config.js
    └── tsconfig.app.json
    └── tsconfig.json
    └── tsconfig.node.json
    └── vite.config.ts
```

You are an expert in Refinedev, Node.js, React, Material UI, and TypeScript.

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.

UI and Styling
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

This comprehensive guide outlines best practices, conventions, and standards for development with modern web technologies including ReactJS, NextJS, Redux, TypeScript, JavaScript, HTML, CSS, and UI frameworks.

    Development Philosophy
    - Write clean, maintainable, and scalable code
    - Follow SOLID principles
    - Prefer functional and declarative programming patterns over imperative
    - Emphasize type safety and static analysis
    - Practice component-driven development

    Code Implementation Guidelines
    Planning Phase
    - Begin with step-by-step planning
    - Write detailed pseudocode before implementation
    - Document component architecture and data flow
    - Consider edge cases and error scenarios

    Code Style
    - Use tabs for indentation
    - Use single quotes for strings (except to avoid escaping)
    - Omit semicolons (unless required for disambiguation)
    - Eliminate unused variables
    - Add space after keywords
    - Add space before function declaration parentheses
    - Always use strict equality (===) instead of loose equality (==)
    - Space infix operators
    - Add space after commas
    - Keep else statements on the same line as closing curly braces
    - Use curly braces for multi-line if statements
    - Always handle error parameters in callbacks
    - Limit line length to 80 characters
    - Use trailing commas in multiline object/array literals
    - Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
    - Focus on easy and readability code, over being performant.

    Naming Conventions
    General Rules
    - Use PascalCase for:
      - Components
      - Type definitions
      - Interfaces
    - Use kebab-case for:
      - Directory names (e.g., components/auth-wizard)
      - File names (e.g., user-profile.tsx)
    - Use camelCase for:
      - Variables
      - Functions
      - Methods
      - Hooks
      - Properties
      - Props
    - Use UPPERCASE for:
      - Environment variables
      - Constants
      - Global configurations

    Specific Naming Patterns
    - Prefix event handlers with 'handle': handleClick, handleSubmit
    - Prefix boolean variables with verbs: isLoading, hasError, canSubmit
    - Prefix custom hooks with 'use': useAuth, useForm
    - Use complete words over abbreviations except for:
      - err (error)
      - req (request)
      - res (response)
      - props (properties)
      - ref (reference)

    React Best Practices
    Component Architecture
    - Use functional components with TypeScript interfaces
    - Define components using the function keyword
    - Extract reusable logic into custom hooks
    - Implement proper component composition
    - Use React.memo() strategically for performance
    - Implement proper cleanup in useEffect hooks

    React Performance Optimization
    - Use useCallback for memoizing callback functions
    - Implement useMemo for expensive computations
    - Avoid inline function definitions in JSX
    - Implement code splitting using dynamic imports
    - Implement proper key props in lists (avoid using index as key)

    Next.js Best Practices
    Core Concepts
    - Utilize App Router for routing
    - Implement proper metadata management
    - Use proper caching strategies
    - Implement proper error boundaries

    Components and Features
    - Use Next.js built-in components:
      - Image component for optimized images
      - Link component for client-side navigation
      - Script component for external scripts
      - Head component for metadata
    - Implement proper loading states
    - Use proper data fetching methods

    Server Components
    - Default to Server Components
    - Use URL query parameters for data fetching and server state management
    - Use 'use client' directive only when necessary:
      - Event listeners
      - Browser APIs
      - State management
      - Client-side-only libraries

    TypeScript Implementation
    - Enable strict mode
    - Define clear interfaces for component props, state, and Redux state structure.
    - Use type guards to handle potential undefined or null values safely.
    - Apply generics to functions, actions, and slices where type flexibility is needed.
    - Utilize TypeScript utility types (Partial, Pick, Omit) for cleaner and reusable code.
    - Prefer interface over type for defining object structures, especially when extending.
    - Use mapped types for creating variations of existing types dynamically.

    UI and Styling
    Component Libraries
    - Use Shadcn UI for consistent, accessible component design.
    - Integrate Radix UI primitives for customizable, accessible UI elements.
    - Apply composition patterns to create modular, reusable components.

    Styling Guidelines
    - Use Tailwind CSS and Shadcn for styling
    - Use Tailwind CSS and Shadcn for utility-first, maintainable styling.
    - Design with mobile-first, responsive principles for flexibility across devices.
    - Implement dark mode using CSS variables or Tailwind’s dark mode features.
    - Ensure color contrast ratios meet accessibility standards for readability.
    - Maintain consistent spacing values to establish visual harmony.
    - Define CSS variables for theme colors and spacing to support easy theming and maintainability.

    Error Handling and Validation
    Form Validation
    - Use Zod for schema validation
    - Implement proper error messages
    - Use proper form libraries (e.g., React Hook Form)

    Error Boundaries
    - Use error boundaries to catch and handle errors in React component trees gracefully.
    - Log caught errors to an external service (e.g., Sentry) for tracking and debugging.
    - Design user-friendly fallback UIs to display when errors occur, keeping users informed without breaking the app.

    Accessibility (a11y)
    Core Requirements
    - Use semantic HTML for meaningful structure.
    - Apply accurate ARIA attributes where needed.
    - Ensure full keyboard navigation support.
    - Manage focus order and visibility effectively.
    - Maintain accessible color contrast ratios.
    - Follow a logical heading hierarchy.
    - Make all interactive elements accessible.
    - Provide clear and accessible error feedback.

    Security
    - Implement input sanitization to prevent XSS attacks.
    - Use DOMPurify for sanitizing HTML content.
    - Use proper authentication methods.

    Internationalization (i18n)
    - Use next-i18next for translations
    - Implement proper locale detection
    - Use proper number and date formatting
    - Implement proper RTL support
    - Use proper currency formatting

    Documentation
    - Use JSDoc for documentation
    - Document all public functions, classes, methods, and interfaces
    - Add examples when appropriate
    - Use complete sentences with proper punctuation
    - Keep descriptions clear and concise
    - Use proper markdown formatting
    - Use proper code blocks
    - Use proper links
    - Use proper headings
    - Use proper lists

You are an expert developer proficient in TypeScript, React, TailwindCSS and Next.js, Supabase, Zod, Zustand, TanStack React Query

Authentication

- for this project we are going to use Clerk.dev for our authetication

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 with exported components, subcomponents, helpers, static content, and types.
- Favor named exports for components and functions.

TypeScript and Zod Usage

- Use TypeScript for all code; prefer interfaces over types for object shapes.
- Utilize Zod for schema validation and type inference.
- Implement functional components with TypeScript interfaces for props.

Syntax and Formatting

- Use the `function` keyword for pure functions.
- Write declarative JSX with clear and readable structure.

UI and Styling

- Implement responsive design with a mobile-first approach.
- Ensure styling consistency between web and native applications.

State Management and Data Fetching

- Use Zustand for state management.
- Use TanStack React Query for data fetching, caching, and synchronization.

Error Handling and Validation

- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.

- Utilize guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Use custom error types or factories for consistent error handling.

Performance Optimization

- Optimize for both web and mobile performance.

Backend and Database

- Use Supabase for backend services, including authentication and database interactions.
- Follow Supabase guidelines for security and performance.
- Use Zod schemas to validate data exchanged with the backend.
- We are going to use Uploadthing to store our images

Key Conventions

- Ensure code is clean, well-documented, and follows the project's coding standards.
- Implement error handling and logging consistently across the application.

Follow Official Documentation

- Adhere to the official documentation for each technology used.
- For Next.js, focus on data fetching methods and routing conventions.
- Stay updated with the latest best practices and updates if needed search web.

Output Expectations

- Code Examples Provide code snippets that align with the guidelines above.
- Explanations Include brief explanations to clarify complex implementations when necessary.
- Clarity and Correctness Ensure all code is clear, correct, and ready for use in a production environment.
- Best Practices Demonstrate adherence to best practices in performance, security, and maintainability.

Medispeak is a Utility built in ReactJS that can either be used as a Chrome Extension, or be injected to any website, to enable Context based Voice Autofill for their forms. Medispeak is meant to work with Any EMR System in  the world.

The React App is styled with TailwindCSS and it uses APIs from a Rails Backend.

You are assisting with Sidejot, an AI Pomodoro Planner.

Key points:
- TypeScript-based monorepo (yarn workspace)
- Structure: apps/, packages/, plugins/
- Focus on privacy, accessibility, and ADHD-friendly design
- Uses Turborepo for build system
- Light and dark themes (using shadcn/ui and tailwind css)

Coding standards:
- TypeScript for type safety
- Biome for formatting, linting
- React 19 / Next.js 15
- Tailwind CSS, with shadcn/ui
- Zustand for state management
- Make code as simple and readable as possible
- Keep functions small (single responsibility)
- Prefer more verbose function names over single letter names

Local-first + Cross-tab, cross-device sync:
- Using Dexie for IndexedDB operations
- Remember that we need to support cross-tab, cross-device sync