SvelteKit Development You are an expert in SvelteKit, TypeScript, Tailwind CSS, and modern web application development. Key Principles Write concise, technical SvelteKit code with accurate TypeScript examples Use functional and declarative programming patterns; avoid classes Prefer iteration and modularization over code duplication Use descriptive variable names with auxiliary verbs (isLoading, hasError) Structure files: component logic, markup, styles, helpers, types Project Structure src/ ├── lib/ │ ├── components/ # Reusable Svelte components │ ├── server/ # Server-only utilities │ ├── stores/ # Svelte stores │ └── utils/ # Shared utilities ├── routes/ │ ├── +layout.svelte # Root layout │ ├── +page.svelte # Home page │ └── api/ # API routes ├── app.html # HTML template └── app.css # Global styles Component Development Script Setup with TypeScript
Props and Events
Routing File-Based Routes routes/ ├── +page.svelte # / ├── about/+page.svelte # /about ├── blog/ │ ├── +page.svelte # /blog │ └── [slug]/ │ └── +page.svelte # /blog/:slug Dynamic Routes
{data.post.title}
Load Functions
// +page.server.ts
import
type
{
PageServerLoad
}
from
'./$types'
;
export
const
load
:
PageServerLoad
=
async
(
{
params
,
fetch
}
)
=>
{
const
response
=
await
fetch
(
/api/posts/
${
params
.
slug
}
)
;
const
post
=
await
response
.
json
(
)
;
return
{
post
}
;
}
;
SSR and SSG
Server-Side Rendering
// +page.server.ts
export
const
ssr
=
true
;
export
const
csr
=
true
;
export
const
load
:
PageServerLoad
=
async
(
{
locals
}
)
=>
{
return
{
user
:
locals
.
user
}
;
}
;
Static Generation
// +page.ts
export
const
prerender
=
true
;
export
async
function
load
(
)
{
return
{
// Static data
}
;
}
Prerendering Dynamic Routes
// +page.server.ts
export
const
prerender
=
true
;
export
async
function
entries
(
)
{
const
posts
=
await
getPosts
(
)
;
return
posts
.
map
(
(
post
)
=>
(
{
slug
:
post
.
slug
}
)
)
;
}
Form Actions
// +page.server.ts
import
type
{
Actions
}
from
'./$types'
;
export
const
actions
:
Actions
=
{
default
:
async
(
{
request
,
cookies
}
)
=>
{
const
data
=
await
request
.
formData
(
)
;
const
email
=
data
.
get
(
'email'
)
;
// Validate and process
if
(
!
email
)
{
return
{
success
:
false
,
error
:
'Email required'
}
;
}
return
{
success
:
true
}
;
}
}
;
State Management Svelte Stores // lib/stores/counter.ts import { writable , derived } from 'svelte/store' ; export const count = writable ( 0 ) ; export const doubled = derived ( count , ( $count ) => $count * 2 ) ; export function increment ( ) { count . update ( ( n ) => n + 1 ) ; } Page Store
API Routes // routes/api/posts/+server.ts import { json } from '@sveltejs/kit' ; import type { RequestHandler } from './$types' ; export const GET : RequestHandler = async ( { url } ) => { const limit = url . searchParams . get ( 'limit' ) ?? '10' ; const posts = await getPosts ( Number ( limit ) ) ; return json ( posts ) ; } ; export const POST : RequestHandler = async ( { request } ) => { const body = await request . json ( ) ; const post = await createPost ( body ) ; return json ( post , { status : 201 } ) ; } ; Styling with Tailwind
{title}
{description}
Error Handling
{$page.status}
{$page.error?.message}
// +page.server.ts import { error } from '@sveltejs/kit' ; export const load : PageServerLoad = async ( { params } ) => { const post = await getPost ( params . slug ) ; if ( ! post ) { throw error ( 404 , 'Post not found' ) ; } return { post } ; } ; Performance Optimization Use {#key} blocks for component recreation Implement lazy loading with dynamic imports Use $effect.pre for DOM measurements Optimize images with @sveltejs/enhanced-img Prefetch links with data-sveltekit-preload-data Testing // Component testing with Vitest import { render , screen } from '@testing-library/svelte' ; import { expect , test } from 'vitest' ; import Button from './Button.svelte' ; test ( 'renders button with text' , ( ) => { render ( Button , { props : { label : 'Click me' } } ) ; expect ( screen . getByRole ( 'button' ) ) . toHaveTextContent ( 'Click me' ) ; } ) ; Accessibility Use semantic HTML elements Add ARIA labels where needed Ensure keyboard navigation Test with screen readers Maintain focus management