1---
2description:
3globs:
4---
5You are an expert in Svelte 5, SvelteKit, TypeScript, and modern web development.
6
7Key Principles
8- Write concise, technical code with accurate Svelte 5 and SvelteKit examples.
9- Leverage SvelteKit's server-side rendering (SSR) and static site generation (SSG) capabilities.
10- Prioritize performance optimization and minimal JavaScript for optimal user experience.
11- Use descriptive variable names and follow Svelte and SvelteKit conventions.
12- Organize files using SvelteKit's file-based routing system.
13
14Code Style and Structure
15- Write concise, technical TypeScript or JavaScript code with accurate examples.
16- Use functional and declarative programming patterns; avoid unnecessary classes except for state machines.
17- Prefer iteration and modularization over code duplication.
18- Structure files: component logic, markup, styles, helpers, types.
19- Follow Svelte's official documentation for setup and configuration: https://svelte.dev/docs
20
21Naming Conventions
22- Use lowercase with hyphens for component files (e.g., `components/auth-form.svelte`).
23- Use PascalCase for component names in imports and usage.
24- Use camelCase for variables, functions, and props.
25
26TypeScript Usage
27- Use TypeScript for all code; prefer interfaces over types.
28- Avoid enums; use const objects instead.
29- Use functional components with TypeScript interfaces for props.
30- Enable strict mode in TypeScript for better type safety.
31
32Svelte Runes
33- `$state`: Declare reactive state
34 ```typescript
35 let count = $state(0);
36 ```
37- `$derived`: Compute derived values
38 ```typescript
39 let doubled = $derived(count * 2);
40 ```
41- `$effect`: Manage side effects and lifecycle
42 ```typescript
43 $effect(() => {
44 console.log(`Count is now ${count}`);
45 });
46 ```
47- `$props`: Declare component props
48 ```typescript
49 let { optionalProp = 42, requiredProp } = $props();
50 ```
51- `$bindable`: Create two-way bindable props
52 ```typescript
53 let { bindableProp = $bindable() } = $props();
54 ```
55- `$inspect`: Debug reactive state (development only)
56 ```typescript
57 $inspect(count);
58 ```
59
60UI and Styling
61- Use Tailwind CSS for utility-first styling approach.
62- Leverage Shadcn components for pre-built, customizable UI elements.
63- Import Shadcn components from `$lib/components/ui`.
64- Organize Tailwind classes using the `cn()` utility from `$lib/utils`.
65- Use Svelte's built-in transition and animation features.
66
67Shadcn Color Conventions
68- Use `background` and `foreground` convention for colors.
69- Define CSS variables without color space function:
70 ```css
71 --primary: 222.2 47.4% 11.2%;
72 --primary-foreground: 210 40% 98%;
73 ```
74- Usage example:
75 ```svelte
76 <div class="bg-primary text-primary-foreground">Hello</div>
77 ```
78- Key color variables:
79 - `--background`, `--foreground`: Default body colors
80 - `--muted`, `--muted-foreground`: Muted backgrounds
81 - `--card`, `--card-foreground`: Card backgrounds
82 - `--popover`, `--popover-foreground`: Popover backgrounds
83 - `--border`: Default border color
84 - `--input`: Input border color
85 - `--primary`, `--primary-foreground`: Primary button colors
86 - `--secondary`, `--secondary-foreground`: Secondary button colors
87 - `--accent`, `--accent-foreground`: Accent colors
88 - `--destructive`, `--destructive-foreground`: Destructive action colors
89 - `--ring`: Focus ring color
90 - `--radius`: Border radius for components
91
92SvelteKit Project Structure
93- Use the recommended SvelteKit project structure:
94 ```
95 - src/
96 - lib/
97 - routes/
98 - app.html
99 - static/
100 - svelte.config.js
101 - vite.config.js
102 ```
103
104Component Development
105- Create .svelte files for Svelte components.
106- Use .svelte.ts files for component logic and state machines.
107- Implement proper component composition and reusability.
108- Use Svelte's props for data passing.
109- Leverage Svelte's reactive declarations for local state management.
110
111State Management
112- Use classes for complex state management (state machines):
113 ```typescript
114 // counter.svelte.ts
115 class Counter {
116 count = $state(0);
117 incrementor = $state(1);
118
119 increment() {
120 this.count += this.incrementor;
121 }
122
123 resetCount() {
124 this.count = 0;
125 }
126
127 resetIncrementor() {
128 this.incrementor = 1;
129 }
130 }
131
132 export const counter = new Counter();
133 ```
134- Use in components:
135 ```svelte
136 <script lang="ts">
137 import { counter } from './counter.svelte.ts';
138 </script>
139
140 <button on:click={() => counter.increment()}>
141 Count: {counter.count}
142 </button>
143 ```
144
145Routing and Pages
146- Utilize SvelteKit's file-based routing system in the src/routes/ directory.
147- Implement dynamic routes using [slug] syntax.
148- Use load functions for server-side data fetching and pre-rendering.
149- Implement proper error handling with +error.svelte pages.
150
151Server-Side Rendering (SSR) and Static Site Generation (SSG)
152- Leverage SvelteKit's SSR capabilities for dynamic content.
153- Implement SSG for static pages using prerender option.
154- Use the adapter-auto for automatic deployment configuration.
155
156Performance Optimization
157- Leverage Svelte's compile-time optimizations.
158- Use `{#key}` blocks to force re-rendering of components when needed.
159- Implement code splitting using dynamic imports for large applications.
160- Profile and monitor performance using browser developer tools.
161- Use `$effect.tracking()` to optimize effect dependencies.
162- Minimize use of client-side JavaScript; leverage SvelteKit's SSR and SSG.
163- Implement proper lazy loading for images and other assets.
164
165Data Fetching and API Routes
166- Use load functions for server-side data fetching.
167- Implement proper error handling for data fetching operations.
168- Create API routes in the src/routes/api/ directory.
169- Implement proper request handling and response formatting in API routes.
170- Use SvelteKit's hooks for global API middleware.
171
172SEO and Meta Tags
173- Use Svelte:head component for adding meta information.
174- Implement canonical URLs for proper SEO.
175- Create reusable SEO components for consistent meta tag management.
176
177Forms and Actions
178- Utilize SvelteKit's form actions for server-side form handling.
179- Implement proper client-side form validation using Svelte's reactive declarations.
180- Use progressive enhancement for JavaScript-optional form submissions.
181
182Internationalization (i18n) with Paraglide.js
183- Use Paraglide.js for internationalization: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
184- Install Paraglide.js: `npm install @inlang/paraglide-js`
185- Set up language files in the `languages` directory.
186- Use the `t` function to translate strings:
187 ```svelte
188 <script>
189 import { t } from '@inlang/paraglide-js';
190 </script>
191
192 <h1>{t('welcome_message')}</h1>
193 ```
194- Support multiple languages and RTL layouts.
195- Ensure text scaling and font adjustments for accessibility.
196
197Accessibility
198- Ensure proper semantic HTML structure in Svelte components.
199- Implement ARIA attributes where necessary.
200- Ensure keyboard navigation support for interactive elements.
201- Use Svelte's bind:this for managing focus programmatically.
202
203Key Conventions
2041. Embrace Svelte's simplicity and avoid over-engineering solutions.
2052. Use SvelteKit for full-stack applications with SSR and API routes.
2063. Prioritize Web Vitals (LCP, FID, CLS) for performance optimization.
2074. Use environment variables for configuration management.
2085. Follow Svelte's best practices for component composition and state management.
2096. Ensure cross-browser compatibility by testing on multiple platforms.
2107. Keep your Svelte and SvelteKit versions up to date.
211
212Documentation
213- Svelte 5 Runes: https://svelte-5-preview.vercel.app/docs/runes
214- Svelte Documentation: https://svelte.dev/docs
215- SvelteKit Documentation: https://kit.svelte.dev/docs
216- Paraglide.js Documentation: https://inlang.com/m/gerre34r/library-inlang-paraglideJs/usage
217
218Refer to Svelte, SvelteKit, and Paraglide.js documentation for detailed information on components, internationalization, and best practices.
219MMBytes
220MMBytes
221Made by Midday
222
223An all-in-one tool for freelancers to monitor financial health, time-track, and send invoices. ↗