Awesome Cursor Rules Collection

Project: Personal Portfolio Website with Newsletter Integration

Start each reply with "..."

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

General preferences:
- Follow the user's requirements carefully & to the letter.
- Do not make assumptions without evidence.
- Always write correct, up-to-date, bug-free, fully functional and working,
secure, performant and efficient code.

- Fully implement all requested functionality.
- Leave NO todo's, placeholders or missing pieces in the code.
- Be sure to reference file names.

- 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 Principles
- Write concise TypeScript code with accurate examples
- Use functional/declarative patterns; avoid classes
- Prefer iteration and modularization
- Use descriptive variable names (e.g., isLoading, hasError)
- Structure files: exports, subcomponents, helpers, types

Naming & TypeScript
- Use kebab-case for directories/components
- Favor named exports and interfaces over types
- Avoid enums; use maps
- Use functional components with TypeScript interfaces

Syntax
- Use "function" keyword for pure functions
- Minimize curly braces; use concise conditionals
- Use declarative JSX
- Use semantic HTML elements

UI & Performance
- Use Shadcn UI, Radix, and Tailwind
- Mobile-first responsive design
- Minimize client-side code ('use client', useEffect, setState)
- Use Suspense with fallbacks
- Dynamic load non-critical components
- Optimize images (WebP, size data, lazy loading)
- Handle loading and error states

Best Practices
- Use nuqs for URL search params
- Optimize Web Vitals
- Use server components/SSR when possible
- Implement error handling/logging
- Write secure, bug-free, working code
- Focus on readability
- Be explicit about file names
- Admit when unsure rather than guess

SQL
- Use drizzle-orm
- Use drizzle-zod
- Use relations
- Use SQL
- All columns are in uppercase



Tech Stack
- Next.js 14.0.2
- TypeScript
- Supabase
  - Do not use auth-helpers-nextjs they are deprecated
- TailwindCSS
- Shadcn UI
- Radix UI
- Resend
- Drizzle
- SWR
- React Query
- React Email
- React Hook Form

Core Structure:
- Next.js with Tailwind CSS setup
- Basic components (Header, Footer, HomePage)
- Space Grotesk font implementation
- Typography and styling
- Hero section with animations
- Floating navbar
- About section
- Portfolio section (in progress)

Newsletter Integration:
- NewsletterSignup component
- PreviousIssuesSection integration
- Email functionality with Resend
- Domain verification
- React-email tools

Current Focus:
- Enhancing Previous Issues Section
- Newsletter form integration
- UI consistency improvements
- Email functionality fixes

this is a desktop app, powered by tauri, react, typescript and vite.
use bun as package manager.
use tailwind css with shadcn/ui for styling.
write git commit message in english, and keep it one line.

# 人工智能語言模型指令

## 主要目標

本項目的主要目標是為幼兒園至八年級（K-8）的中文課程創建教案、課程計劃、工作表、測試、遊戲和謎題。

## 基本要求

1. 所有回應應使用繁體中文字符。
2. 除非另有說明，否則所有內容應該用中文撰寫。
3. 某些教案、課程計劃、工作表、測試和遊戲可能需要英文說明或翻譯，但這將在具體要求中指定。
4. 在提供英文內容時，請使用簡單、清晰的語言，考慮到教師的英語可能不是母語。

## Guidelines for Creating Lesson Plans and Curriculum Plans

When creating lesson plans and curriculum plans, please follow these steps:

1. **Identify Learning Objectives**
   - Determine what students should know and be able to do by the end of the lesson or unit.
   - Align objectives with relevant educational standards and language proficiency levels.

2. **Develop Lesson Content**
   - Outline key concepts, vocabulary, and grammar points to be taught.
   - Ensure content is age-appropriate and matches students' Mandarin proficiency.

3. **Plan Instructional Activities**
   - Design engaging activities that cater to different learning styles.
   - Include listening, speaking, reading, and writing exercises in Mandarin.

4. **Prepare Materials and Resources**
   - List all necessary materials, such as texts, visuals, and multimedia resources.
   - Provide clear instructions and consider including translations if needed.

5. **Assessment and Evaluation**
   - Decide on methods to assess student understanding, like quizzes or projects.
   - Include clear criteria for success and ways to provide feedback.

6. **Differentiation**
   - Plan modifications for students with varying abilities.
   - Offer additional support for those who may struggle with the material.

7. **Reflection and Feedback**
   - Incorporate opportunities for teacher and student reflection.
   - Plan for adjustments based on feedback and learning outcomes.

**Note:** Use simple and clear English language to accommodate teachers who may not be native English speakers. Visual aids and examples can enhance understanding.

## 步驟思考方法

在創建教材時，請遵循以下步驟：

1. **確定目標年級和語言水平**
   - 考慮學生的年齡範圍和所在年級。
   - 評估他們的中文程度，包括詞彙量和語法理解。

2. **選擇適當的主題和詞彙**
   - 根據學生的興趣和課程標準選擇主題。
   - 確定相關的詞彙、短語和語法點，適合他們的學習需求。

3. **設計教材框架**
   - 決定是創建教案、課程計劃、工作表、測試、遊戲還是謎題。
   - 規劃教材的結構，包括引言、主要內容、活動設計和總結。

4. **製作內容**
   - 根據選定的框架詳細撰寫內容。
   - 確保內容清晰、有條理，並適合學生的理解水平。
   - 使用簡潔明了的語言，避免複雜的句式。

5. **添加視覺元素（如適用）**
   - 考慮是否需要添加圖片、圖表或其他視覺輔助工具。
   - 描述所需的視覺元素，以協助學生理解。

6. **提供說明和答案**
   - 為教師和學生提供清晰的使用說明。
   - 如有必要，提供答案、參考資料或解決方案。

7. **審查和修改**
   - 檢查內容的準確性和適切性。
   - 確保語言使用正確，沒有語法或拼寫錯誤。
   - 調整內容，以符合教師和學生的需求。

8. **最終確認**
   - 確保所有內容都使用繁體中文字符。
   - 檢查是否需要英文說明或翻譯，並按要求添加。
   - 確保教材符合原定的教學目標和要求。

9. **考慮教師的語言背景**
   - 由於教師的母語並非英語，在提供英文內容時，請使用簡單、明瞭的語言。
   - 提供清晰的指示和範例，協助教師理解和使用教材。

10. **激發學生興趣**
    - 在教材中融入有趣的元素，如故事、遊戲或實際案例。
    - 鼓勵互動和參與，增強學生的學習動機。

請記住，在創建教材時，要同時考慮學生的學習需求和教師的教學背景。確保教材既具有教育價值，又能激發興趣，並且易於教師傳達和學生理解。

Sử dụng ngôn ngữ tiếng Việt khi viết code.
Sử dụng ng-zorro-antd khi viết code.

Don't use Material, use Cupertino !
Don't add commentary in code, unless requested.

/**
 * Project Architecture Guidelines
 * 
 * This file defines the core architectural rules and patterns
 * for AI assistance in this project.
 */

export const ARCHITECTURE_RULES = {
    components: {
        type: 'functional-only',
        framework: 'custom-jsx',
        typescript: true,
        pattern: `
            import { jsx } from "@/lib/template";
            import { Component } from "../Component";

            export const ExampleComponent = Component({
                effect?: () => {
                    // Optional: Side effects (subscriptions, etc)
                    eventBus.subscribe("eventName", (payload: EventPayload) => {
                        // Handle event
                    });
                },
                render: (props) => {
                    return <div>{/* content */}</div>;
                }
            });
        `
    },

    eventHandling: {
        pattern: 'declarative',
        implementation: {
            trigger: 'data-trigger',
            event: 'data-event',
            effect: 'data-effect',
            topic: 'data-topic'
        },
        example: `
            <button
                data-trigger="click"
                data-event="eventName"
                data-effect="effectName"
                data-topic="topicName"
            >
                Action
            </button>
        `
    },

    aiGuidelines: {
        changeManagement: [
            'Make minimal, targeted changes',
            'Prefer small, precise updates over large refactors',
            'Break large changes into smaller steps'
        ],
        decisionMaking: [
            'Remember you are agentic, and you can search the code base for information. ALWAYS search the code deeply before making assumptions.',
            'Never make assumptions about implementation',
            'Ask clarifying questions when context is missing',
            'Base decisions on concrete evidence only',
            'State limitations explicitly when unsure'
        ],
        codeQuality: [
            'Maintain consistent TypeScript types',
            'Follow existing patterns',
            'Document non-obvious logic',
            'Consider performance implications'
        ],
        contextRequirements: [
            'Request file structure when needed',
            'Verify dependencies before suggesting solutions',
            'Understand event bus architecture'
        ],
        errorHandling: [
            'Consider all error cases',
            'Implement appropriate type checking',
            'Provide meaningful error messages',
            'Handle edge cases appropriately'
        ]
    }
};

  # Original instructions: https://forum.cursor.com/t/share-your-rules-for-ai/2377/3
  # Original original instructions: https://x.com/NickADobos/status/1814596357879177592
  
  You are an expert AI programming assistant that primarily focuses on producing clear, readable SwiftUI code.
  
  You always use the latest version of SwiftUI and Swift, and you are familiar with the latest features and best practices.
  
  You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.
  
  - Follow the user's requirements carefully & to the letter.
  - First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
  - Confirm, then write code!
  - Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
  - Focus on readability over being performant.
  - Fully implement all requested functionality.
  - Leave NO todo's, placeholders or missing pieces.
  - Be concise. Minimize any other prose.
  - 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.
  

You are an expert AI programming assitant that primarily focues on producing clear, readable React and TypeScript code.You always use the Latest stable version of TypeScript, JavaScript, React, Node.js, Next.js App Router, Shaden UI, Tailwind CSS and you are familiar with the Latest features and best practices.You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning ai to chat, to generateCode StyLe and StructureNaming ConventionsTypeScript UsageUI and StylingPerformance OptimizationOther Rules need to follow:Don't be lazy, write all the code to implement features I ask for

1. Generated file name should be in lower case and use dash(-) to separate words.
2. Generated code should be clean, readable, and maintainable.
3. Generated code should be well-organized and easy to understand.
4. Generated code should be efficient and performant.
5. Generated code should be secure and free of vulnerabilities.
6. Generated code should be consistent with the project's coding standards and style.
7. Use double quotes for strings in Ruby code

# Project Overview

This project is a **BMAP API** server that processes and serves Bitcoin transactions using Bitcoin SV protocols. Key functionalities:
- Processing and storing Bitcoin transactions in MongoDB with Redis caching
- Generating dynamic charts using Chart.js with @napi-rs/canvas
- Serving social endpoints for friends, identities, and likes
- Streaming Bitcoin transactions via JungleBus
- BAP (Bitcoin Attestation Protocol) identity integration

# Identity Formats

The API deals with three distinct identity formats:

**BAP IDs**:
- Derived identity strings (e.g. "Go8vCHAa4S6AhXKTABGpANiz35J")
- 26 characters of base58-encoded data
- Unique identifier for a BAP identity
- NOT a public key or address
- Used in social features and message routing

**Bitcoin Addresses**:
- Legacy format (e.g. "1CfG7EzS1Qj8vGxKzr2ecHhYqZh2ndJT9g")
- Found in AIP protocol data as either:
  - `address` field
  - `algorithm_signing_component` field (these fields are synonymous)
- Used for transaction signing and verification

**Public Keys**:
- 33 or 65 byte hex strings
- Used for message encryption/decryption
- Not directly exposed in API responses
- Derived from BAP identity when needed for encryption

# Technology Stack

- **Bun**: Modern JavaScript runtime for server-side development
- **TypeScript**: For type safety and improved developer experience
- **Elysia.js**: High-performance web framework for Bun
- **MongoDB**: Primary database for transaction storage
- **Redis**: Caching layer for transactions, identities, and social data
- **bmapjs**: For parsing and processing BSV transactions
- **bpu-ts**: For Bitcoin script parsing
- **Chart.js** with **@napi-rs/canvas**: Native chart generation
- **JungleBus**: Real-time Bitcoin transaction streaming

# Project Structure

Core Files:
- **`index.ts`**: Server initialization and route setup
- **`cache.ts`**: Redis caching implementation
- **`db.ts`**: MongoDB connection and query handling
- **`process.ts`**: Transaction processing pipeline
- **`chart.ts`**: Chart generation using Chart.js/canvas
- **`bap.ts`**: BAP identity management
- **`actions.ts`**: Transaction saving and database operations
- **`social.ts`**: Social feature endpoints (friends, likes, identities)
- **`types.ts`**: Shared TypeScript types and interfaces
- **`bmap.ts`**: BMAP transaction normalization

Support Files:
- **`scripts/test-redis.ts`**: Redis connection testing
- **`public/`**: Static assets
- **`git-hooks/`**: Pre-commit and pre-push hooks
- **`biome.json`**: Code formatting and linting rules

# Development Guidelines

Code Quality:
- Use Biome for consistent code formatting and linting
- Run `bun run lint` for checks, `bun run lint:fix` for auto-fixes
- Git hooks enforce Biome rules and TypeScript checks on commit/push
- Maintain strict TypeScript types in `types.ts`

Error Handling:
- Use try-catch blocks with specific error types
- Log errors with relevant context
- Handle Redis and MongoDB connection failures gracefully
- Validate environment variables at startup

Performance:
- Leverage Redis caching for frequently accessed data
- Use MongoDB indexes for query optimization
- Implement proper connection pooling
- Consider batch processing for bulk operations

Testing:
- Add unit tests for critical functions
- Test Redis caching logic
- Verify MongoDB queries
- Test API endpoints for correct responses

# Environment Setup

Required Variables:
- `REDIS_PRIVATE_URL`: Redis connection string
- `BMAP_MONGO_URL`: MongoDB connection URL
- Additional MongoDB configuration variables

Development Tools:
- Bun for runtime and package management
- TypeScript for type checking
- Biome for code quality
- Git hooks for pre-commit/push checks

# API Design

Elysia.js Patterns:
- Use typed route parameters with `context.params`
- Handle query parameters via `context.query`
- Process request body with `context.body`
- Set response status with `set.status`
- Return errors using `error()`

Endpoints:
- Transaction queries
- Social interactions (friends, likes)
- Identity management
- Chart generation
- Real-time updates

# Data Architecture

MongoDB Collections:
- `c`: Confirmed transactions
- `u`: Unconfirmed transactions
- Indexes on:
  - Transaction hashes
  - Timestamps
  - Block information

Redis Caching:
- Transaction data
- BAP identities
- Social graph information
- Cache invalidation strategies

# Best Practices

Code Organization:
- Keep files focused and modular
- Use TypeScript interfaces for data structures
- Document complex logic with comments
- Follow Biome formatting rules
- avoid someArray.forEach in favor of "for of" and "for in" loops

Error Management:
- Implement proper error boundaries
- Use typed error responses
- Log errors with stack traces
- Handle edge cases explicitly

Performance:
- Cache frequently accessed data
- Use appropriate indexes
- Implement connection pooling
- Monitor memory usage

Security:
- Validate input data
- Sanitize database queries
- Use proper error messages
- Implement rate limiting if needed

# Elysia Header Handling

Headers in Elysia must be handled carefully to avoid overwriting middleware headers:

- NEVER use direct assignment with `set.headers = {...}` as this overwrites ALL headers including those set by middleware
- ALWAYS use `Object.assign(set.headers, {...})` to merge new headers with existing ones
- This is especially important when using plugins like CORS that set their own headers

Example of correct header handling:
```typescript
// ❌ Wrong - overwrites CORS and other middleware headers
set.headers = {
  'Cache-Control': 'public, max-age=60'
};

// ✅ Correct - preserves existing headers
Object.assign(set.headers, {
  'Cache-Control': 'public, max-age=60'
});
```

Common places to check for header handling:
- SSE endpoints (Server-Sent Events)
- Cache control headers
- Content-Type headers
- Custom response headers

# Middleware Chaining

Elysia uses a middleware chain where:
- Plugins and middleware are executed in order of registration
- Each middleware can modify the context including headers
- Later middleware should not destroy earlier middleware's changes
- Use `.use()` to add middleware in the correct order
- Headers set by middleware (like CORS) must be preserved

Example of proper middleware chain:
```typescript
const app = new Elysia()
  .use(cors())           // Sets CORS headers
  .use(staticPlugin())   // May set content-type headers
  .use(swagger())        // Adds OpenAPI documentation
  .get('/endpoint', ({ set }) => {
    // Preserve existing headers while adding new ones
    Object.assign(set.headers, {
      'Cache-Control': 'no-cache'
    });
  });
```

# Elysia Validation

Response validation is as strict as request validation:
- All fields defined in response schema must be present
- Optional fields must be explicitly marked as nullable using `t.Union([t.String(), t.Null()])`
- Missing required fields will cause validation errors even in production
- Always ensure response objects match schema exactly

Example of proper response schema:
```typescript
const IdentityResponse = t.Array(
  t.Object({
    idKey: t.String(),
    paymail: t.Union([t.String(), t.Null()]),  // Optional field must be explicitly nullable
    displayName: t.String(),
    icon: t.Union([t.String(), t.Null()])      // Optional field must be explicitly nullable
  })
);
```

When processing data for response:
- Always include all required fields
- Set optional fields to null if not present
- Validate response shape matches schema
- Handle missing or undefined values explicitly

Example of proper response processing:
```typescript
return {
  idKey: data.idKey,
  paymail: data.paymail || null,    // Convert undefined to null
  displayName: data.name || "Unknown",
  icon: data.icon || null           // Convert undefined to null
};
```

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

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.
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.
Form Management

Utilize React Hook Form for form state management to reduce re-renders and improve performance.
Apply Zod for schema validation to ensure strong typing and accurate data validation.
Data Fetching and API Integration

Use Axios for API requests; centralize API configurations and handle errors globally.
Follow Next.js best practices for data fetching using getServerSideProps, getStaticProps, and React Server Components when possible.
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

Align with Next.js documentation for Data Fetching, Rendering, and Routing.

You have extensive expertise in Vue 3, JavaScript, Node.js, Vite, Vue Router and Pinia. You possess a deep knowledge of best practices and performance optimization techniques across these technologies.

Code Style and Structure
- Write clean, maintainable, and technically accurate JavaScript code.
- Prioritize functional and declarative programming patterns; avoid using classes.
- Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
- Prefer Composition API <script setup> style.
- Use Composables to encapsulate and share reusable client-side logic or state across multiple components in your Vue application.


Fetching Data
1. Use useFetch for standard data fetching in components that benefit from SSR, caching, and reactively updating based on URL changes. 
2. Use $fetch for client-side requests within event handlers or when SSR optimization is not needed.
3. Use useAsyncData when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling.
4. Set server: false in useFetch or useAsyncData options to fetch data only on the client side, bypassing SSR.
5. Set lazy: true in useFetch or useAsyncData options to defer non-critical data fetching until after the initial render.

Naming Conventions
- Utilize composables, naming them as use<MyComposable>.
- Use **PascalCase** for component file names (e.g., components/MyComponent.vue).
- Favor named exports for functions to maintain consistency and readability.

USDA Nutrition Data Enhancement
The application uses the USDA Food Data Central API to enhance ingredient nutritional data through three main functions:

1. Search and Match (searchFoodItem)
- Cleans search terms and queries USDA database
- Implements smart sorting to find best matches
- Uses scoring system for result ranking:
  * Prefers shorter descriptions
  * Boosts raw/basic ingredients
  * Penalizes processed/prepared items
  * Weights exact matches and term coverage
- Returns prioritized list of potential food matches

2. Nutrient Data Fetching (getFoodDetails)
- Fetches detailed nutritional data for a specific food item
- Returns comprehensive nutrient breakdown

3. Data Enhancement (enhanceNutritionalData)
- Coordinates the search and data fetching process
- Maps USDA nutrients to application format
- Applies portion calculations
- Implements minimum score threshold for matches
- Returns enhanced ingredient with standardized nutrition data

4. Portion Calculations (getPortionMultiplier)
- Converts common measurements to grams
- Calculates multiplier based on portion size
- Standardizes portions relative to USDA's 100g baseline

Key Features:
- Intelligent food matching using weighted scoring system
- Standardized nutrient mapping (calories, protein, carbs, fat)
- Support for common measurement units (cups, tbsp, oz, etc.)
- Portion size conversion and scaling
- Extensive error handling and fallbacks
- Match quality validation with score thresholds

Usage:
1. Initialize ingredient with name and assumed portion
2. Call enhanceNutritionalData with ingredient
3. Receive enhanced ingredient with standardized nutrition data
4. Apply serving size multipliers for final calculations

Note: USDA API key required in config.js for functionality

<Svelte>
Full Svelte 5 documentation can be found in the repository at ./docs/ai_docs/frontend

- For events use the new svelte 5 syntax of onclick instead of on:click
- Use drizzle for orm

Structure : 
root : knowledge-viewer
src/lib ($lib alias): Contains shared business logic and components 
src/lib/api: Contains business logic for working with the api, should not handle ui specific logic
src/lib/components : Contains shared components
src/lib/db : Contains logic for connecting to the database
src/lib/db/schemas : Contains the drizzle schemas for postgres
src/routes/: contains the pages of the application and ui logic
src/routes/api: public api logic for connecting to external apis 

# Svelte 5 Reminders

## 1. Overview
- **Version 5 Enhancements**: Introduces revamped syntax and reactivity system
- **Compatibility**: Supports both Svelte 4 and 5 syntax; components can be mixed
- **Migration Tools**: Provides migration script (`npx sv migrate svelte-5`) for automatic upgrades

## 2. Reactivity Syntax Changes
### Runes API
Core of reactivity using functions prefixed with `$`

### State Variables
- Svelte 4: `let count = 0;` (implicitly reactive)
- Svelte 5: `let count = $state(0);` (explicitly reactive)

### Derived State
- Svelte 4: `$: double = count * 2;`
- Svelte 5: `const double = $derived(count * 2);`

### Effects
- Svelte 4: `$: if (count > 5) alert('High!');`
- Svelte 5: `$effect(() => { if (count > 5) alert('High!'); });`

## 3. Component Properties
### Exporting Props
- Svelte 4: `export let prop;`
- Svelte 5: `let { prop } = $props();`

### Advanced Prop Handling
- Renaming: `let { class: klass } = $props();`
- Spreading: `let { foo, bar, ...rest } = $props();`
- All Props: `let props = $props();`

## 4. Event Handling
### Event Attributes
- Svelte 4: `on:click={handler}`
- Svelte 5: `onclick={handler}`

### Multiple Handlers
- **Combine handlers**: `<button onclick={(e) => { one(e); two(e); }}>...</button>`
- **Event Modifiers**: Use function wrappers: `<button onclick={once(preventDefault(handler))}>...</button>`
- **Component Events**: Replace createEventDispatcher with callback props

## 5. Slots and Snippets
- **Slots Deprecated**: Replaced by more powerful snippets
- **Default Content**:
  - Svelte 4: `<slot />`
  - Svelte 5: `{@render children()}`
- **Multiple Placeholders**: Use named props and `{@render ...}` instead of named slots

## 6. Migration Script Features
### Automated Changes
- Updates syntax to runes (`let` to `$state`)
- Converts event directives to attributes
- Transforms slots to snippets
- Adjusts component instantiation

### Manual Adjustments Needed
- createEventDispatcher usage
- Lifecycle methods (beforeUpdate, afterUpdate)
- Class-based components to function-based

## 7. Breaking Changes
- **Component Instantiation**:
  - Svelte 4: `new Component({ target: ... })`
  - Svelte 5: `mount(Component, { target: ... })`
- **Server API**: Use `render` from svelte/server
- **Typing Changes**: Replace SvelteComponent with Component type
- **bind:this Behavior**: Returns instance exports
- **Whitespace Handling**: Simplified rules
- **Browser Requirements**: Modern browsers only (no IE)

## 8. Compiler Options Changes
- **Removed/Changed Options**:
  - css option values updated
  - hydratable, enableSourcemap, tag removed
- **Namespace Restrictions**: Limited to html, mathml, and svg

## 9. Additional Changes
- **Attribute Syntax**: Strict quoting for complex values
- **HTML Structure**: Stricter enforcement (e.g., required `<tbody>`)
- **Contenteditable**: Bindings take full control
- **Hydration**: Uses comments for efficient hydration
- **CSS Handling**: Scoped CSS uses `:where(...)` for specificity
</Svelte 5 Reminders>
</Svelte>