Browse all prompts
Start a new SvelteKit site
Scaffold a fresh SvelteKit site on current versions — Svelte 5 runes, Tailwind CSS 4, TypeScript — with a skeleton layout, a design token file, and the PageSugar MCP server connected.
Set up a new SvelteKit website from scratch. Work in the current directory unless I have told you otherwise, and stop to ask before deleting anything that is already there. ## 1. Scaffold Use the official Svelte CLI. Do not hand-write the scaffold, and do not use the retired `npm create svelte@latest`. ```sh npx sv create . --template minimal --types ts --add tailwindcss prettier eslint --install npm ``` If the directory is not empty and the CLI refuses, tell me before you pass `--no-dir-check`. ## 2. Check the versions The scaffold installs current versions on its own. Verify you got at least these, and treat them as floors rather than exact pins: - `@sveltejs/kit` 2.70.3 - `svelte` 5.57.0 - `vite` 8.3.0 - `tailwindcss` 4.3.3 - `@tailwindcss/vite` 4.3.3 - `@sveltejs/vite-plugin-svelte` 7.3.0 - `@sveltejs/adapter-auto` 7.0.1 **Do not blindly upgrade TypeScript.** The scaffold pins the `6.x` line on purpose. TypeScript `7.x` is released, but `svelte-check` 4.x declares a peer range of `^5 || ^6` and `typescript-eslint` 8.x declares `<6.1.0`, so moving the project to `7.x` breaks type checking and linting. Before changing any package's major version, read the peer ranges of the tools that consume it and tell me if there is a conflict instead of forcing the install. Run on Node 24 (the active LTS). Tell me if my local Node is older than 22. ## 3. Tailwind CSS 4 Tailwind 4 is a Vite plugin, not a PostCSS step, and it has no `tailwind.config.js`. Confirm the scaffold produced this, and fix it if not. `vite.config.ts` — the CLI puts `tailwindcss()` first, and that is the order to keep: ```ts import { sveltekit } from '@sveltejs/kit/vite'; import tailwindcss from '@tailwindcss/vite'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [tailwindcss(), sveltekit()] }); ``` The add-on also creates the CSS entry and wires it into the root layout. Find the file it actually generated — depending on the version that is `src/app.css` or `src/routes/layout.css` — and edit that one rather than creating a second stylesheet beside it. It uses the single import, and declares tokens in `@theme` rather than in a config file: ```css @import 'tailwindcss'; @theme { --color-ink: oklch(0.21 0.02 265); --color-surface: oklch(0.99 0.003 265); --color-accent: oklch(0.62 0.18 265); /* Naming a font here does not load it. Either import it or leave the stack to resolve to the system font. */ --font-sans: system-ui, sans-serif; } ``` Import it once, in the root layout. ## 4. Skeleton Build the smallest site that is genuinely a site, not a placeholder page: - `src/routes/+layout.svelte` — imports `../app.css`, renders a header with real navigation, a `<main>` 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 `<body>`. - 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 `<slot />`. - `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 <https://pagesugar.com/mcp.md> 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.