Awesome Cursor Rules Collection

File structure:

Css: /app/globals.css
API: /app/api
Moralis API: /app/api/moralis
NEXT Auth API: /app/api/auth/[...nextauth].ts
Hooks: /hooks
Prisma schema: prisma/schema.prisma
Components: /components
Config for Wagmi, AppKit, Chains, Networks, wallet connections: /config/index.ts
Context: /context/index.tsx

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, typesNaming 

Conventions:
- Use lowercase with dashes for directories (e.g., components/auth-wizard)- Favor named exports for componentsTypeScript 

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

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 Action
- Use error boundaries for unexpected errors

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

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 loadingKey 

Conventions:
- Use 'nuqs' for URL search parameter state management
- 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 managementFollow Next.js docs for Data Fetching, Rendering, and Routing

APIs and SDKs to use for Wallet and chain or network handling:
- Initial setup: Renown AppKit with Wagmi adapter (@reown/appkit-wagmi-adapter)
- Wallet and account handling:
- Network and Chain handling: import { mainnet, arbitrum } from '@reown/appkit/networks'
- Wallet balances for erc20, erc721, erc1155: @moralisweb3/next (Moralis SDK)
- Market data for erc20 tokens, erc721 and erc1155 NFTs: @moralisweb3/next (Moralis SDK)
- @tanstack/react-query for QueryClient, QueryClientProvider
- Fonts: Use font-family: "Roboto Mono", monospace; font-size: 12px; line-height: 16px; or use /app/globals.css.

You are an expert in TypeScript, Next.js App Router, React, and Tailwind. Follow @Next.js 14 App Router docs for Data Fetching, Rendering, and Routing. Use Vercel AI SDK for handling AI interactions and streaming responses.

- All project files are saved in the /src folder. 
  - src/app has the page.tsx and layout.tsx files
  - src/app/api has the API routes
  - src/app/components has all the React components
  - src/app/lib has all the other code like helpers, hooks, and contexts

There are some pre-configured APIs in this template that can be used but only if required by the current project. These have already been created:
- Replicate
  - src/app/api/replicate has generate-image/route.ts which is a simple API calling the Stable Diffusion model hosted on Replicate to generate images

# .cursorrules

# General
1. Use Cursor AI to write code.
2. Use Cursor AI to write documentation.
3. Every time you write code, write a prompt for Cursor AI to help it understand your intentions.
4. Provide reasoning and defense supported by reference documentation for every change you make.
5. Provide thorough explanations of your code changes or new components.


# Core Rules
1. The landing page must be optimized for speed and responsiveness.
2. All forms must auto-save user inputs (address and phone number) even if the user does not complete the form.
3. Use Google Places API for address autofill functionality.
4. Integrate Zapier and Webhook API to send form data to Go High Level CRM.
5. Ensure the landing page is built with SEO-optimized content, including meta tags and keywords.
6. Use a mobile-first design approach.

# Folder Structure
- Follow the predefined folder structure:
  - All React components must be placed in the `src/components/` directory.
  - Pages must be placed in the `src/pages/` directory.
  - Static assets like images and styles go into `src/assets/`.
  - Utility scripts for APIs and analytics belong in `src/utils/`.
  - Backend integrations (webhooks, API handlers) go into `src/backend/`.

# Styling
1. Use TailwindCSS for consistent styling across components.
2. Adhere to the following color palette:
   - Primary: #5b5a99
   - Accent: #65bee4
   - Background: White
   - Text: Dark grey (#333)
3. All buttons must be styled with the primary color unless otherwise specified.

# Form Components
1. The form must consist of multiple steps:
   - Step 1: Address (with autofill) and Phone Number.
   - Step 2: Additional property details (e.g., condition, reason for selling).
2. The "Next" button on each step must submit and save user data.
3. Display a loading indicator for API calls, especially for address autofill.
4. Include validation for required fields (address and phone number).

# Analytics and Tracking
1. Integrate Google Analytics to track:
   - Page visits
   - Clicks
   - Form completions
2. Add a Facebook Pixel for PPC campaign tracking.
3. Implement Hotjar for heatmaps and user behavior tracking.

# Performance
1. Ensure Lighthouse scores for performance, accessibility, best practices, and SEO are above 90.
2. Optimize images and assets for web performance.
3. Use lazy-loading for images and asynchronous loading for third-party scripts.

# Deployment
1. The project must be deployable via Vercel with CI/CD enabled.
2. Ensure that the deployed landing page URL is accessible and works on mobile, tablet, and desktop devices.

# Developer Prompts
1. When working on a new feature:
   - "How will this feature improve the user experience or lead capture rate?"
2. When optimizing:
   - "Does this change improve performance or simplicity?"
3. When debugging:
   - "What are the possible points of failure? Are there fallback mechanisms in place?"
4. When writing SEO content:
   - "Does this content include relevant keywords? Is it concise and user-focused?"

# Error Handling
1. All API calls must include proper error handling with clear error messages displayed to the user.
2. Log errors in the backend for debugging.
3. Redirect users to a "Thank You" page or error page if there is an issue during submission.

# Automation
1. Use Zapier for automation, including:
   - Sending form data to CRM.
   - Triggering email notifications on new leads.
2. Implement webhooks to ensure real-time lead submission.

# React Components
1. All components must be reusable and modular.
2. Use props for dynamic content where applicable.
3. Separate UI logic from business logic within components.

# SEO Rules
1. Include meta tags:
   - Title: "Sell Your House Fast | Get a Cash Offer Today"
   - Description: "We buy houses in any condition. Submit your address for a fast, no-obligation cash offer."
2. Use H1 tags for main headlines and H2 for secondary content.
3. Include alt attributes for all images.

# Testing
1. Run unit tests on React components for functionality.
2. Perform integration testing for form submission and CRM integration.
3. Test on multiple browsers and devices to ensure compatibility.

# Prompts for Cursor Assistance
- "Generate a form component with Google Places API integration."
- "Create a reusable button component styled with TailwindCSS."
- "Set up a webhook to send form data to Go High Level CRM via Zapier."
- "Implement analytics tracking for user interactions using Google Tag Manager."
- "Optimize the landing page for a Lighthouse performance score above 90."
- "Build a responsive header component with the brand logo and navigation links."
- "Add validation rules for required form fields."
- "Create a Thank You page that acknowledges successful form submissions."
- "Ensure form data is saved at every step, even if the user doesn't complete the process."

# Notes
1. Keep code modular and maintainable.
2. Regularly commit progress to GitHub with clear commit messages.
3. Prioritize simplicity and user experience in all components.

# Google Sheets Integration
1. Use googleapis library for direct sheet interaction
2. Follow JWT authentication pattern
3. Maintain consistent column structure:
   - timestamp (A) - ISO string format
   - leadId (B) - Unique identifier with timestamp
   - address (C) - Full property address
   - streetAddress (D) - Street component
   - city (E) - City component
   - state (F) - State component
   - postalCode (G) - Postal code
   - phone (H) - Contact phone
   - placeId (I) - Google Places ID
   - firstName (J) - First name
   - lastName (K) - Last name
   - email (L) - Email address
   - isPropertyListed (M) - Yes/No format
   - propertyCondition (N) - Property condition
   - timeframe (O) - Selling timeframe
   - price (P) - Asking price
   - lastUpdated (Q) - ISO string format

# Lead Capture Rules
1. Capture leads immediately after "Get Cash Offer" click
2. Generate unique leadId using timestamp and random string
3. Record submission timestamp and lastUpdated for every entry
4. Handle missing fields gracefully with empty strings
5. Convert boolean values to Yes/No format

# Sheet Operations
1. Use A1 notation for all range references
2. Quote sheet names that contain spaces
3. Use USER_ENTERED for value input option
4. Use INSERT_ROWS for data insertion
5. Validate response status (200 for success)

# Error Handling
1. Validate all required environment variables
2. Check for missing credentials
3. Provide detailed error messages
4. Log errors for debugging
5. Return standardized error responses

# Security
1. Use JWT authentication with service account
2. Store credentials in environment variables
3. Validate all input data
4. Implement rate limiting
5. Use HTTPS for all API calls

# Data Formatting
1. Use ISO strings for all dates
2. Clean and standardize inputs
3. Handle missing fields with empty strings
4. Convert booleans to Yes/No
5. Maintain consistent data types

# Performance
1. Single API call per submission
2. Efficient error handling
3. Proper credential caching
4. Minimal data transformation

# Lead Capture Flow
1. Initial Lead Capture (First Step):
   - Triggered by "Get Cash Offer" button click
   - Submits to /api/submit-partial endpoint
   - Generates unique leadId
   - Creates new row in Google Sheets
   - Stores leadId in form state
   - Required fields: address, phone, consent

2. Complete Lead Submission (Contact Page):
   - Uses stored leadId from initial capture
   - Submits to /api/submit-form endpoint
   - Updates existing row in Google Sheets
   - Required fields: firstName, lastName, email, propertyCondition, timeframe, price
   - No duplicate rows created

3. Google Sheets Integration:
   - Uses A1 notation for ranges
   - Maintains consistent column structure
   - Updates existing rows based on leadId
   - Records timestamps for all changes
   - Handles partial and complete submissions

4. Data Flow:
   - PropertyForm.tsx -> submit-partial -> googleSheets.ts (new row)
   - Contact/page.tsx -> submit-form -> googleSheets.ts (update row)
   - Consistent leadId tracking throughout process
   - Error handling at each step
   - Validation of required fields

// Solid.js Basic Setup .cursorrules

// Prefer functional components
const preferFunctionalComponents = true;

// Solid.js best practices
const solidjsBestPractices = [
  "Use createSignal() for reactive state",
  "Utilize createEffect() for side effects",
  "Implement createMemo() for derived values",
  "Use createResource() for data fetching",
  "Implement Show and For components for conditional and list rendering",
  "Utilize createStore() for complex state management",
];

// Folder structure
const folderStructure = `
src/
  components/
  pages/
  utils/
  App.jsx
  index.jsx
public/
  index.html
`;

// Additional instructions
const additionalInstructions = `
1. Use JSX for component templates
2. Implement proper error boundaries
3. Utilize Solid Router for routing when applicable
4. Use Solid's built-in optimization features
5. Implement lazy-loading for improved performance
6. Follow Solid.js naming conventions and best practices
7. Use server-side rendering (SSR) when needed
`;

You are a senior .NET developer with expertise in C#, Avalonia, and cross-platform desktop application development. Your task is to translate and adapt the provided .NET Development Rules for C# Avalonia development, optimizing them for Japanese developers.
Here are the original .NET Development Rules:
<dotnet_rules>
{{DOTNET_RULES}}
</dotnet_rules>
Please translate and adapt these rules to create a set of guidelines for C# Avalonia development, tailored for Japanese developers. Follow these steps:
1. Translate the content into Japanese, ensuring that technical terms are accurately conveyed.
2. Adapt the rules to focus on Avalonia-specific concepts and best practices for desktop application development.
3. Remove or modify any sections that are not applicable to Avalonia development (e.g., ASP.NET Core, Entity Framework Core, API design).
4. Add new sections or guidelines that are particularly relevant to Avalonia development.
5. Ensure that the language used is clear, concise, and easily understood by Japanese developers.
Pay special attention to the following areas during translation and adaptation:
- XAML usage and best practices in Avalonia
- Avalonia-specific controls and layouts
- Cross-platform considerations for desktop applications
- MVVM pattern implementation in Avalonia
- Reactive programming concepts used in Avalonia
- Styling and theming in Avalonia applications
Present your translated and adapted rules in a structured format, using appropriate Japanese formatting and punctuation. Use markdown-style headers (##) for main sections and bullet points (-) for individual rules or guidelines.
Begin your response with the title "# Avalonia開発のためのC#ガイドライン" and organize the content into logical sections. Ensure that the final output is a comprehensive set of guidelines that will help Japanese developers create high-quality Avalonia applications using C#.

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.

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

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>

if all members of a type definition are methods, use types instead of interfaces.

use signals for reactive data.

in functional components, don't destructure props in the parameter list. always use props object and never destructure it in the body of the function.

instead of bare tailwind classes, use tailwind classes from the daisyui library.