Starter Kit

An opinionated SvelteKit starter, with the following opinions:

• TypeScript
• Oxfmt
• ESLint
• MCP (incl. Claude, Cursor, Gemini)
• Bun
• Component & Library aliases
• Viewport-fit cover
• Ignore lock files

Along with these features:

• Analytics, Button, Cookies, Loader starter components
• CSS reset (kitto)
• Font optimization with metric-based fallbacks (fontless)
• Global CSS with sensible defaults and fluid type vars (kitto)
• Overlay component for pixel perfect frontend (kitto)
• Preferences store backed by localstorage (kitto)
• Security headers in hooks
• Size CSS shorthand (kitto)
• SSL support with mkcert
• Svelte Check RS
• UI state store
• Variablised media query breakpoints (kitto)

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project
bunx degit https://github.com/mattpilott/starter-kit my-app

To recreate the underlying SvelteKit setup use this configuration:

# recreate this project
bun x sv@0.12.8 create --template minimal --types ts --add eslint sveltekit-adapter="adapter:auto" mcp="ide:claude-code,cursor,gemini+setup:remote" --install bun .
bun add -d oxfmt

Developing

Once you've created a project and installed dependencies with bun i, start a development server:

bun dev

# or start the server and open the app in a new browser tab
bun dev -- --open

Building

To create a production version of your app:

bun run build

You can preview the production build with bun preview.

Additional Features

Font optimization

fontless is registered as a Vite plugin in vite.config.ts. It scans your CSS for font-family declarations, resolves them through providers (Google, Bunny, FontShare, FontSource and more), self-hosts the font files, and injects optimized @font-face rules with metric-based fallbacks to reduce Cumulative Layout Shift (CLS). There's no runtime JavaScript—just use fonts in CSS as you normally would.

// vite.config.ts
import { fontless } from 'fontless'

plugins: [sveltekit(), fontless()]

/* Use any provider font by name; fontless handles the rest */
.title {
	font-family: 'Poppins', sans-serif;
}

Height & width shorthand

Define both height and width in a single line.

div {
	size: 10rem;
}

Variable media queries

Define your breakpoints just once in the Vite config and use them in your CSS and Svelte components.

@media (--from-mobile) and (--until-tablet) {
	color: blue;
	size: 10px; /* this instead of height + width */
}

<Overlay mobile="/mobile.jpg@393" desktop="/desktop.jpg@1920" />

Notes

Local SSL

For local trusted SSL's rather than untrusted self-signed (like that of vite-basic-ssl) use mkcert.

brew install mkcert nss

mkcert -install

mkcert localhost

Drop the generated localhost.pem and localhost-key.pem next to vite.config.ts. The dev server detects them (has_https_files) and serves HTTPS automatically—no config edit needed. Without the certs it logs a warning and runs over HTTP.

// vite.config.ts — already wired up
const has_https_files = existsSync(key_url) && existsSync(cert_url)

server: {
	proxy: {},
	https: has_https_files
		? {
				key: readFileSync(key_url, 'utf8'),
				cert: readFileSync(cert_url, 'utf8')
			}
		: undefined
},