Svelte Project

---
applyTo: "**/*.svelte"
---

# Svelte Development Instructions (2025)

_Last updated: October 2025_

- Always use the fetch tool to look up the latest Svelte documentation: https://svelte.dev/docs
- Use SvelteKit for full-stack applications with file-based routing
- Leverage Svelte's reactive declarations with $: syntax
- Implement TypeScript for type safety in all Svelte projects
- Use stores for shared state across components
- Understand Svelte's compile-time optimizations and minimal runtime

**Core Principles:**

- Write truly reactive components with automatic dependency tracking
- Use `bind:` directives for two-way data binding
- Implement transitions and animations with built-in directives
- Keep components simple and leverage Svelte's reactive syntax
- Use slots for flexible component composition
- Understand the difference between reactive statements and regular JavaScript

**SvelteKit:**

- Use +page.svelte for pages and +layout.svelte for layouts
- Implement load functions in +page.ts/+page.server.ts for data fetching
- Use form actions for progressive enhancement
- Leverage server-side rendering (SSR) and static site generation (SSG)

**State Management:**

- Use writable, readable, and derived stores from svelte/store
- Implement custom stores for complex state logic
- Use context API for dependency injection

**Summary:**

> For all Svelte work, always use the fetch tool to look up the latest documentation from https://svelte.dev/docs. Build fast, reactive applications with minimal JavaScript.