ui-route

# Create UI Route or Component Use this skill when the user asks to add a new page, route, or component to the SvelteKit frontend. ## Creating a new route Routes live in `ui/src/routes/`. SvelteKit uses file-based routing. ### Route file structure ``` ui/src/routes/<route-name>/ ├── +page.svelte # Page component ├── +page.ts # Load function (optional, for SSR data) └── +layout.svelte # Layout wrapper (optional, inherits parent) ``` ### Page template (Svelte 5 runes) ```svelte <script lang="ts"> import { onMount } from 'svelte'; import { API_BASE, type MyType } from '$lib/api'; // State — use $state(), never Svelte 4 stores let items: MyType[] = $state([]); let loading = $state(true); let error = $state(''); // Derived values — use $derived() let itemCount = $derived(items.length); let hasItems = $derived(items.length > 0); // Complex derived — use $derived.by() let summary = $derived.by(() => { return items.reduce((acc, item) => acc + item.value, 0); }); // Side effects — use $effect() $effect(() => { console.log(`Items changed: ${items.length}`); }); onMount(async () => { try { const res = await fetch(`${API_BASE}/internal/my-endpoint?org_id=...&project_id=...`); items = await res.json(); } catch (e: any) { error = e?.message || 'Failed to load'; } loading = false; }); </script> <div class="app-shell-wide"> {#if loading} <p class="text-zinc-500 text-sm">Loading...<...