SvelteKit web app
The base for anything with a UI in a browser.
Add-ons
Tick what you need. The pieces, the reasoning and the prompt below update to match, and the URL carries your selection.
mdsvex, so posts and pages can be written in markdown with Svelte components inside.
adapter-cloudflare, a Wrangler config, and GitHub Actions that deploy on every push to main and give each pull request its own preview.
Better Auth with Drizzle and a Neon Postgres database, signing in with Google.
The stack
Installed into the repo, so they work with any agent that reads AGENTS.md.
Why this stack
The component language. Reactivity is a compiler feature, not a library you import, so a component is mostly the HTML it renders and the state it changes.
A compiler, not a runtime. Server code sits next to the page that uses it, forms work before JavaScript loads, and most of the framework never reaches the browser.
Styling with no runtime and no naming debates. Agents write utility classes accurately because the vocabulary is small and fully documented.
Components copied into your repo, not a dependency you upgrade around. You and the agent edit them like any other file.
You are setting up a new web app. Follow the steps, committing after each one.
1. Get the project name. If there is a README.md, read the name from it exactly, then delete the file. If there is none, the project name is the folder name.
2. npx sv create --template minimal --types ts --add enhanced-img experimental="features:async,remoteFunctions" --install npm ./
3. npx sv add tailwindcss="plugins:none" --install npm
4. npx shadcn-svelte@latest init --preset b0
Accept the default for every question it asks.
5. Install the skills:
npx skills add https://github.com/sveltejs/ai-tools --skill svelte-code-writer -y
npx skills add https://github.com/sveltejs/ai-tools --skill svelte-core-bestpractices -y
npx skills add https://github.com/huntabyte/shadcn-svelte --skill shadcn-svelte -y
6. Completely replace README.md with the README below, using the project name from step 1 as its title.
7. Write the AGENTS.md below to the project root
## README.md
````md
# <project name from step 1>
A SvelteKit web app
## Tech Stack
- **[Svelte](https://svelte.dev)** (Svelte 5) - frontend framework
- **[SvelteKit](https://svelte.dev/docs/kit)** (SvelteKit 3) - full-stack framework
- **[Tailwind CSS](https://tailwindcss.com)** (Tailwind 4) - styling
- **[shadcn-svelte](https://shadcn-svelte.com)** - UI components (built on **[bits-ui](https://bits-ui.com)**)
## Getting Started
```sh
npm i
npm run dev
```
````
## AGENTS.md
```md
# AGENTS.md
Keep this file current: if a change makes anything here wrong or incomplete, update it in the same change.
## Tech Stack
See the Tech Stack section of `README.md`. If you add, remove, or change a core technology, update it in the same change.
Most of this tech stack had a recent major version, so your training data is likely stale. When unsure about an API, check the official docs instead of guessing.
## Skills
- Use the **svelte-code-writer** and **svelte-core-bestpractices** skills whenever you write or edit Svelte code. Remote functions are enabled, so use those. The enhanced-img plugin is added, so use that for images. Always check the official docs.
- Use the **shadcn-svelte** skill whenever you add or change UI. The component source lives in `src/lib/components/ui` and is ours to change: add components with the CLI as needed and edit existing ones freely.
- If a skill is missing, say so in your reply and ask the user to install it.
```