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: types, component logic, markup, styles.
- Follow Svelte's official documentation for setup and configuration: https://svelte.dev/docs/svelte/overview
Naming Conventions
- Use PascalCase for component files (e.g., `components/AuthForm.svelte`).
- Use PascalCase for component names in imports and usage.
- Use snake_case for variables, functions, and props.
- Use UPPER_CASE for true constants but not general const vars
TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use string literals instead and const objects if needed.
- 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);
```
UI and Styling
- Use css vars defined in `src/variables.css` for css vars.
- Prefer css vars for any property where they exist. Colors specifically cannot be defined without css vars.
- Use Svelte's built-in transition and animation features.
- Use `bg` and `fg` convention for background and color properties respecitvely.
SvelteKit Project Structure
- Use the recommended SvelteKit project structure:
```
- src/
- lib/
- routes/
- assets/
- server/
- actions/
- app.html
- static/
- svelte.config.js
- vite.config.js
```
Component Development
- Create .svelte files for Svelte components.
- Use .svelte.ts files for state.
- 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>
```
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.
- Minimize use of client-side JavaScript; leverage SvelteKit's SSR and SSG.
- Use modern html elements and features wherever possible.
- 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.
- Data comes from Drizzle via a Postgres database using Zero for data querying in the UI.
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.
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 Documentation: https://svelte.dev/docs/svelte/overview
- SvelteKit Documentation: https://svelte.dev/docs/kit/introduction
- Drizzle Documentation: https://orm.drizzle.team/
- Zero Documentation: https://zero-docs-preview.vercel.app/docs/zero-schema
- Zero Reading Data: https://zero-docs-preview.vercel.app/docs/reading-data
- Zero Writing Data: https://zero-docs-preview.vercel.app/docs/writing-data
- Zero Permissions: https://zero-docs-preview.vercel.app/docs/permissions
Refer to Svelte, SvelteKit, Zero and Drizzle documentation for detailed information on components, database queries, and best practices.
Data
My data schema looks like
const profileSchema = createTableSchema({
tableName: 'profile',
columns: {
id: 'string',
user_id: 'string',
name: 'string',
avatar: 'string'
},
primaryKey: ['id'],
relationships: {}
});
const userSchema = createTableSchema({
tableName: 'user',
columns: {
id: 'string',
email: 'string',
verified: 'boolean'
},
primaryKey: ['id'],
relationships: {
profile: {
sourceField: 'id',
destSchema: profileSchema,
destField: 'user_id'
}
}
});
const questionSchema = createTableSchema({
tableName: 'questions',
columns: {
id: { type: 'string' },
survey_id: { type: 'string' },
question_text: { type: 'string' },
question_type: { type: 'string' },
description: { type: 'string', optional: true },
order_num: { type: 'number' },
config: { type: 'json' }
},
primaryKey: ['id'],
relationships: {
answers: {
sourceField: 'id',
destSchema: () => answerSchema,
destField: 'question_id'
}
}
});
const responseSchema = createTableSchema({
tableName: 'responses',
columns: {
id: { type: 'string' },
survey_id: { type: 'string' },
started_at: { type: 'number' },
completed_at: { type: 'number', optional: true }
},
primaryKey: ['id'],
relationships: {}
});
const answerSchema = createTableSchema({
tableName: 'answers',
columns: {
id: { type: 'string' },
response_id: { type: 'string' },
question_id: { type: 'string' },
answer_text: { type: 'string' }
},
primaryKey: ['id'],
relationships: {}
});
const surveySchema = createTableSchema({
tableName: 'surveys',
columns: {
id: { type: 'string' },
title: { type: 'string' },
description: { type: 'string', optional: true },
created_at: { type: 'number' },
user_id: { type: 'string' }
},
primaryKey: ['id'],
relationships: {
questions: {
sourceField: 'id',
destSchema: () => questionSchema,
destField: 'survey_id'
},
user: {
sourceField: 'user_id',
destSchema: () => userSchema,
destField: 'id'
},
responses: {
sourceField: 'id',
destSchema: () => responseSchema,
destField: 'survey_id'
}
}
});
export const schema = createSchema({
version: 1,
tables: {
user: userSchema,
profile: profileSchema,
surveys: surveySchema,
questions: questionSchema,
responses: responseSchema,
answers: answerSchema
}
});
export type Schema = typeof schema;
export type User = TableSchemaToRow<typeof userSchema>;
export type Profile = TableSchemaToRow<typeof profileSchema>;
export type Survey = TableSchemaToRow<typeof surveySchema>;
export type Question = TableSchemaToRow<typeof questionSchema>;
export type Response = TableSchemaToRow<typeof responseSchema>;
export type Answer = TableSchemaToRow<typeof answerSchema>;
type AuthData = {
sub: string;
};
export const permissions = definePermissions<AuthData, Schema>(schema, () => {
return {
surveys: {
row: {
insert: []
}
}
};
});
