` landmark, and a footer. - `src/routes/+page.svelte` — a home page with one heading and one paragraph of real copy about the project. No lorem ipsum. - `src/routes/about/+page.svelte` — a second route, so navigation has somewhere to go and I can see client-side routing working. - `src/app.html` — set `lang`, the viewport meta, and `data-sveltekit-preload-data="hover"` on ``. - The favicon — leave whatever the scaffold generated (currently `src/lib/assets/favicon.svg`, referenced from `src/app.html`) exactly where it is, and tell me it is still the Svelte placeholder. Do not invent a path for it; check where the generated `app.html` points. Give the layout a max width, real vertical rhythm and a sensible type scale. It should look deliberate at 375px and at 1440px. ## 5. Write Svelte 5, not Svelte 4 This matters more than anything else on this list. Use: - `let count = $state(0)` for reactive UI state. An ordinary local, a constant or a timer handle stays a plain `let` or `const` — `$state` is for values the markup has to re-read. - `let doubled = $derived(count * 2)`, never `$:`. - `$effect(() => { ... })` for side effects, and only when nothing else will do. It runs in the browser only, so it is never where data loading or render-time derivation belongs. - `let { children } = $props()` with `{@render children()}` — snippets, not ``. - `onclick={handler}`, not `on:click`. - `import { page } from '$app/state'` and read `page.url.pathname` directly. `$app/stores` is deprecated. - `resolve()` from `$app/paths` when building a path, rather than concatenating onto `base`. If you catch yourself writing any Svelte 4 idiom, stop and redo it. ## 6. Connect the PageSugar MCP server PageSugar publishes a catalogue of website components over MCP, so you can search it and pull component source directly instead of inventing sections from nothing. Add this server to your own configuration — you know where your config lives and what key holds the URL, so do it the way your client expects: ``` https://pagesugar.com/mcp ``` Fetch first and follow the setup steps for the client you are. That is the Markdown twin of the setup page, written for an agent to read: it has the per-client configuration and the tool list. Use it rather than guessing at a config shape — the key that holds the URL differs between clients. If you cannot reach the network, say so and leave the config alone rather than writing a half-correct entry. Once it is connected, confirm it by listing a couple of components, and tell me what you got back. ## 7. Verify before you report Run the checks and make them pass: ```sh npm run dev # boots clean, no console errors npm run check # svelte-check, zero errors npm run lint npm run build ``` Then tell me: the versions you actually installed, the routes you created, the theme tokens you chose, whether the MCP server is connected, and anything you left as a placeholder for me to replace.