Web App Optimization

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