You are an expert in SvelteKit, TypeScript, Tailwind CSS, and modern web application development.
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
<script lang="ts">
import { onMount } from 'svelte';
import type { PageData } from './$types';
export let data: PageData;
let count = 0;
$: doubled = count * 2;
function increment() {
count += 1;
}
</script>
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let title: string;
export let disabled = false;
const dispatch = createEventDispatcher<{
submit: { value: string };
}>();
function handleSubmit() {
dispatch('submit', { value: title });
}
</script>
routes/
├── +page.svelte # /
├── about/+page.svelte # /about
├── blog/
│ ├── +page.svelte # /blog
│ └── [slug]/
│ └── +page.svelte # /blog/:slug
<!-- routes/blog/[slug]/+page.svelte -->
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
</script>
<h1>{data.post.title}</h1>
// +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 };
};
// +page.server.ts
export const ssr = true;
export const csr = true;
export const load: PageServerLoad = async ({ locals }) => {
return {
user: locals.user
};
};
// +page.ts
export const prerender = true;
export async function load() {
return {
// Static data
};
}
// +page.server.ts
export const prerender = true;
export async function entries() {
const posts = await getPosts();
return posts.map((post) => ({ slug: post.slug }));
}
// +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 };
}
};
<!-- +page.svelte -->
<script lang="ts">
import { enhance } from '$app/forms';
import type { ActionData } from './$types';
export let form: ActionData;
</script>
<form method="POST" use:enhance>
<input name="email" type="email" />
<button type="submit">Subscribe</button>
{#if form?.error}
<p class="error">{form.error}</p>
{/if}
</form>
// 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);
}
<script lang="ts">
import { page } from '$app/stores';
$: currentPath = $page.url.pathname;
$: params = $page.params;
</script>
// 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 });
};
<div class="flex flex-col gap-4 p-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
{title}
</h1>
<p class="text-gray-600 dark:text-gray-300">
{description}
</p>
</div>
<style>
/* Scoped styles when needed */
:global(.prose) {
@apply max-w-none;
}
</style>
<!-- +error.svelte -->
<script lang="ts">
import { page } from '$app/stores';
</script>
<h1>{$page.status}</h1>
<p>{$page.error?.message}</p>
// +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 };
};
{#key} blocks for component recreation$effect.pre for DOM measurements@sveltejs/enhanced-imgdata-sveltekit-preload-data// 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');
});
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).