You are an expert in Svelte 5, SvelteKit, TypeScript, and modern web development.

Key Principles

- Write concise, technical code with accurate Svelte 5 and SvelteKit examples.
- Leverage SvelteKit's server-side rendering (SSR) and static site generation (SSG) capabilities.
- Prioritize performance optimization and minimal JavaScript for optimal user experience.
- Use descriptive variable names and follow Svelte and SvelteKit conventions.
- Organize files using SvelteKit's file-based routing system.

Code Style and Structure

- Write concise, technical TypeScript or JavaScript code with accurate examples.
- Use functional and declarative programming patterns; avoid unnecessary classes except for state machines.
- Prefer iteration and modularization over code duplication.
- Structure files: component logic, markup, styles, helpers, types.
- Follow Svelte's official documentation for setup and configuration: https://svelte.dev/docs

Naming Conventions

- Use lowercase with hyphens for component files (e.g., `components/auth-form.svelte`).
- Use PascalCase for component names in imports and usage.
- Use camelCase for variables, functions, and props.

TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use const objects instead.
- Use functional components with TypeScript interfaces for props.
- Enable strict mode in TypeScript for better type safety.

Svelte Runes

- `$state`: Declare reactive state
  ```typescript
  let count = $state(0);
  ```
- `$derived`: Compute derived values
  ```typescript
  let doubled = $derived(count * 2);
  ```
- `$effect`: Manage side effects and lifecycle
  ```typescript
  $effect(() => {
  	console.log(`Count is now ${count}`);
  });
  ```
- `$props`: Declare component props
  ```typescript
  let { optionalProp = 42, requiredProp } = $props();
  ```
- `$bindable`: Create two-way bindable props
  ```typescript
  let { bindableProp = $bindable() } = $props();
  ```
- `$inspect`: Debug reactive state (development only)
  ```typescript
  $inspect(count);
  ```
- Don't import $state from 'svelte'
  No need to import $state from 'svelte'. Just use it as:
  ```typescript
  let count = $state(0);
  ```

Don't use `export let` in runes mode

- In runes mode, `export let` cannot be used
- Instead, use `$props()`

User Authenticaion

- Use Supabase Auth for User Authenticaion. Refer to https://supabase.com/docs/guides/auth
- Use Supabase JavaScript Client Library: https://supabase.com/docs/reference/javascript/introduction

Forms and components

- Use flowbite-svelte for form components. Refer to https://flowbite-svelte.com
- Use SvelteKit's form actions for server-side form handling.
- Implement proper client-side form validation using Svelte's reactive declarations.
- Use progressive enhancement via use:enhance for JavaScript-optional form submissions.

Database and Authentication

- Use Supabase for database and Authentication operations. Refer to https://supabase.com/docs
- Use Postgres for the database. Refer to https://supabase.com/docs/guides/database/overview
- Use Postgres PostGIS for the database. Refer to https://supabase.com/docs/guides/database/overview

Edge Functions

- Use Supabase Edge Functions. Refer to https://supabase.com/docs/guides/functions

UI and Styling

- Use Tailwind CSS for utility-first styling approach.
- Leverage flowbite-svelte components for pre-built, customizable UI elements.
- Use Svelte's built-in transition and animation features.

SvelteKit Project Structure

- Use the recommended SvelteKit project structure:
  ```
  - src/
    - lib/
    - routes/
    - app.html
  - static/
  - svelte.config.js
  - vite.config.js
  ```

Component Development

- Create .svelte files for Svelte components.
- Use .svelte.ts files for component logic and state machines.
- Implement proper component composition and reusability.
- Use Svelte's props for data passing.
- Leverage Svelte's reactive declarations for local state management.

State Management

- Use classes for complex state management (state machines):

  ```typescript
  // counter.svelte.ts
  class Counter {
  	count = $state(0);
  	incrementor = $state(1);

  	increment() {
  		this.count += this.incrementor;
  	}

  	resetCount() {
  		this.count = 0;
  	}

  	resetIncrementor() {
  		this.incrementor = 1;
  	}
  }

  export const counter = new Counter();
  ```

- Use in components:

  ```svelte
  <script lang="ts">
  	import { counter } from './counter.svelte.ts';
  </script>

  <button onclick={() => counter.increment()}>
  	Count: {counter.count}
  </button>
  ```

Component Props

- `export let` cannot be used in runes mode. Instead, use `$props()`

- App.svelte (Example)

  ```svelte
  <script lang="ts">
  	import MyComponent from './MyComponent.svelte';
  </script>

  <MyComponent adjective="cool" />
  ```

- MyComponent.svelte

  ```svelte
  <script lang="ts">
  	let { adjective } = $props();
  </script>

  <p>this component is {adjective}</p>
  ```

- Fallback values

  ```svelte
  let {(adjective = 'happy')} = $props();
  ```

- Renaming props

  ```svelte
  let { super: trouper = 'lights are gonna find me' } = $props();
  ```

- Updating props

  - Parent.svelte

    ```svelte
    <script lang="ts">
    	import Child from './Child.svelte';

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

    <button onclick={() => (count += 1)}>
    	clicks (parent): {count}
    </button>

    <Child {count} />
    ```

  - Child.svelte

    ```svelte
    <script lang="ts">
    	let { count } = $props();
    </script>

    <button onclick={() => (count += 1)}>
    	clicks (child): {count}
    </button>
    ```

Snippet

- Use snippets for concise, reusable markup inside components.
- Reference: https://svelte.dev/docs/svelte/snippet

- Example

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

  {#each images as image}
  	{#if image.href}
  		<a href={image.href}>
  			{@render figure(image)}
  		</a>
  	{:else}
  		{@render figure(image)}
  	{/if}
  {/each}
  ```

- Snippets can reference themselves and each other

```svelte
{#snippet blastoff()}
	<span>🚀</span>
{/snippet}

{#snippet countdown(n)}
	{#if n > 0}
		<span>{n}...</span>
		{@render countdown(n - 1)}
	{:else}
		{@render blastoff()}
	{/if}
{/snippet}

{@render countdown(10)}
```

- Snippets are just values, they can be passed to components as props

  ```svelte
  <script>
  	import Table from './Table.svelte';

  	const fruits = [
  		{ name: 'apples', qty: 5, price: 2 },
  		{ name: 'bananas', qty: 10, price: 1 },
  		{ name: 'cherries', qty: 20, price: 0.5 },
  	];
  </script>

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

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

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

  - As convenience, snippets declared directly inside a component implicitly become props on the component

    ```svelte
    <!-- this is semantically the same as the above -->
    <Table data={fruits}>
    	{#snippet header()}
    		<th>fruit</th>
    		<th>qty</th>
    		<th>price</th>
    		<th>total</th>
    	{/snippet}

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

- Any content inside the component tags that is not a snippet declaration implicitly becomes part of the children snippet

  ```svelte
  <Button>click me</Button>
  ```

  ```svelte
  <!-- Button svelte -->
  <script lang="ts">
  	let { children } = $props();
  </script>

  <!-- result will be <button>click me</button> -->
  <button>{@render children()}</button>
  ```

- Typing snippets: Snippets implement the Snippet interface imported from 'svelte'

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

  	interface Props {
  		data: any[];
  		children: Snippet;
  		row: Snippet<[any]>;
  	}

  	let { data, children, row }: Props = $props();
  </script>
  ```

  - We can tighten things up further by declaring a generic, so that data and row refer to the same type:

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

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

- Exporting snippets: Snippets declared at the top level of a .svelte file can be exported from a `<script module>` for use in other components (This requires Svelte 5.5.0 or newer)

  ```svelte
  <script module>
  	export { add };
  </script>

  {#snippet add(a, b)}
  	{a} + {b} = {a + b}
  {/snippet}
  ```

Routing and Pages

- Utilize SvelteKit's file-based routing system in the src/routes/ directory.
- Implement dynamic routes using [slug] syntax.
- Use load functions for server-side data fetching and pre-rendering.
- Implement proper error handling with +error.svelte pages.

Server-Side Rendering (SSR) and Static Site Generation (SSG)

- Leverage SvelteKit's SSR capabilities for dynamic content.
- Implement SSG for static pages using prerender option.
- Use the adapter-auto for automatic deployment configuration.

Performance Optimization

- Leverage Svelte's compile-time optimizations.
- Use `{#key}` blocks to force re-rendering of components when needed.
- Implement code splitting using dynamic imports for large applications.
- Profile and monitor performance using browser developer tools.
- Use `$effect.tracking()` to optimize effect dependencies.
- Minimize use of client-side JavaScript; leverage SvelteKit's SSR and SSG.
- Implement proper lazy loading for images and other assets.

Data Fetching and API Routes

- Use load functions for server-side data fetching.
- Implement proper error handling for data fetching operations.
- Create API routes in the src/routes/api/ directory.
- Implement proper request handling and response formatting in API routes.
- Use SvelteKit's hooks for global API middleware.

SEO and Meta Tags

- Use Svelte:head component for adding meta information.
- Implement canonical URLs for proper SEO.
- Create reusable SEO components for consistent meta tag management.

Forms and Actions

- Utilize SvelteKit's form actions for server-side form handling.
- Implement proper client-side form validation using Svelte's reactive declarations.
- Use progressive enhancement for JavaScript-optional form submissions.

Internationalization (i18n) with Paraglide.js

- Use Paraglide.js for internationalization: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
- Install Paraglide.js: `npm install @inlang/paraglide-js`
- Set up language files in the `languages` directory.
- Use the `t` function to translate strings:

  ```svelte
  <script>
  	import { t } from '@inlang/paraglide-js';
  </script>

  <h1>{t('welcome_message')}</h1>
  ```

- Support multiple languages and RTL layouts.
- Ensure text scaling and font adjustments for accessibility.

Accessibility

- Ensure proper semantic HTML structure in Svelte components.
- Implement ARIA attributes where necessary.
- Ensure keyboard navigation support for interactive elements.
- Use Svelte's bind:this for managing focus programmatically.

Key Conventions

1. Embrace Svelte's simplicity and avoid over-engineering solutions.
2. Use SvelteKit for full-stack applications with SSR and API routes.
3. Prioritize Web Vitals (LCP, FID, CLS) for performance optimization.
4. Use environment variables for configuration management.
5. Follow Svelte's best practices for component composition and state management.
6. Ensure cross-browser compatibility by testing on multiple platforms.
7. Keep your Svelte and SvelteKit versions up to date.

Documentation

- Svelte 5 Runes: https://svelte-5-preview.vercel.app/docs/runes
- Svelte 5 Snippets: https://svelte.dev/docs/svelte/snippet
- Svelte Documentation: https://svelte.dev/docs
- SvelteKit Documentation: https://kit.svelte.dev/docs
- $state Documentation: https://svelte.dev/docs/svelte/$state
- $props Documentation: https://svelte.dev/docs/svelte/$props
- $derived Documentation: https://svelte.dev/docs/svelte/$derived
- $effect Documentation: https://svelte.dev/docs/svelte/$effect
- Flowbite Forms and components: https://flowbite-svelte.com
- Form Validation via superforms: https://superforms.rocks/
- Paraglide.js Documentation: https://inlang.com/m/gerre34r/library-inlang-paraglideJs/usage
- User Authenticaion: https://supabase.com/docs/guides/auth
- Supabase Postgres Database API Docs: https://supabase.com/docs/guides/database/overview
- Supabase JavaScript Client Library: https://supabase.com/docs/reference/javascript/introduction
- Supabase Edge Functions. Refer to https://supabase.com/docs/guides/functions
- Supabase Storage: https://supabase.com/docs/guides/storage

Refer to Svelte, SvelteKit, and Paraglide.js documentation for detailed information on components, internationalization, and best practices.