
bun-sveltekit
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs
- Installs
- 502
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/secondsky/claude-skills --skill bun-sveltekit- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads bun-sveltekit automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Bun SvelteKit
Run SvelteKit applications with Bun for faster development and builds.
Quick Start
# Create new SvelteKit project
bunx sv create my-app
cd my-app
# Install dependencies
bun install
# Development
bun run dev
# Build
bun run build
# Preview
bun run preview
Secure Installation
Scaffolding tools like bunx sv create download and execute remote code. Before running, follow supply chain security best practices:
- Block post-install scripts — Bun disables them by default; allow specific packages via
trustedDependenciesinpackage.json - Cooldown period — Configure
minimumReleaseAgeinbunfig.tomlto wait 7 days for new versions - Audit before installing — Run
socket package score npm <pkg>or usesocket npm install <pkg>to check packages
Load the dependency-upgrade skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
Project Setup
package.json
{
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^7.0.0",
"@sveltejs/kit": "^2.0.0",
"svelte": "^5.0.0",
"vite": "^7.3.0"
}
}
Use Bun Adapter
bun add -D svelte-adapter-bun
// svelte.config.js
import adapter from "svelte-adapter-bun";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
/** @type {import('@sveltejs/kit').Config} */
export default {
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
},
};
Using Bun APIs
Server Load Functions
// src/routes/users/+page.server.ts
import { Database } from "bun:sqlite";
import type { PageServerLoad } from "./$types";
export const load: PageServerLoad = async () => {
const db = new Database("data.sqlite");
const users = db.query("SELECT * FROM users").all();
db.close();
return { users };
};
Form Actions
// src/routes/users/+page.server.ts
import { Database } from "bun:sqlite";
import type { Actions } from "./$types";
import { fail } from "@sveltejs/kit";
export const actions: Actions = {
create: async ({ request }) => {
const data = await request.formData();
const name = data.get("name") as string;
if (!name) {
return fail(400, { error: "Name required" });
}
const db = new Database("data.sqlite");
db.run("INSERT INTO users (name) VALUES (?)", [name]);
db.close();
return { success: true };
},
delete: async ({ request }) => {
const data = await request.formData();
const id = data.get("id") as string;
const db = new Database("data.sqlite");
db.run("DELETE FROM users WHERE id = ?", [id]);
db.close();
return { success: true };
},
};
API Routes
// src/routes/api/users/+server.ts
import { Database } from "bun:sqlite";
import { json } from "@sveltejs/kit";
import type { RequestHandler } from "./$types";
export const GET: RequestHandler = async () => {
const db = new Database("data.sqlite");
const users = db.query("SELECT * FROM users").all();
db.close();
return json(users);
};
export const POST: RequestHandler = async ({ request }) => {
const { name } = await request.json();
const db = new Database("data.sqlite");
const result = db.run("INSERT INTO users (name) VALUES (?)", [name]);
db.close();
return json({ id: result.lastInsertRowid });
};
File Operations
// src/routes/api/files/[name]/+server.ts
import type { RequestHandler } from "./$types";
export const GET: RequestHandler = async ({ params }) => {
const file = Bun.file(`./data/${params.name}`);
if (!(await file.exists())) {
return new Response("Not found", { status: 404 });
}
return new Response(file);
};
export const PUT: RequestHandler = async ({ params, request }) => {
const content = await request.text();
await Bun.write(`./data/${params.name}`, content);
return new Response("Saved");
};
Server Hooks
// src/hooks.server.ts
import type { Handle } from "@sveltejs/kit";
import { Database } from "bun:sqlite";
// Initialize database on startup
const db = new Database("data.sqlite");
db.run(`
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY,
name TEXT NOT NULL
)
`);
export const handle: Handle = async ({ event, resolve }) => {
// Add database to locals
event.locals.db = db;
// Auth check
const session = event.cookies.get("session");
if (session) {
event.locals.user = await getUser(session);
}
return resolve(event);
};
// src/app.d.ts
import type { Database } from "bun:sqlite";
declare global {
namespace App {
interface Locals {
db: Database;
user?: { id: number; name: string };
}
}
}
Svelte 5 Components
<!-- src/routes/users/+page.svelte -->
<script lang="ts">
import type { PageData } from "./$types";
let { data }: { data: PageData } = $props();
let { users } = $derived(data);
let name = $state("");
</script>
<h1>Users</h1>
<form method="POST" action="?/create">
<input type="text" name="name" bind:value={name} />
<button type="submit">Add User</button>
</form>
<ul>
{#each users as user}
<li>
{user.name}
<form method="POST" action="?/delete" style="display: inline">
<input type="hidden" name="id" value={user.id} />
<button type="submit">Delete</button>
</form>
</li>
{/each}
</ul>
Deployment
Build for Bun
bun run build
bun ./build/index.js
Docker
FROM oven/bun:1 AS builder
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile
COPY . .
RUN bun run build
FROM oven/bun:1
WORKDIR /app
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["bun", "./build/index.js"]
Adapter Options
// svelte.config.js
import adapter from "svelte-adapter-bun";
export default {
kit: {
adapter: adapter({
out: "build",
precompress: true, // Generate .gz and .br files
envPrefix: "", // Environment variable prefix
development: false,
dynamic_origin: true,
xff_depth: 1,
}),
},
};
Environment Variables
# .env
DATABASE_URL=./data.sqlite
PUBLIC_API_URL=https://api.example.com
// Access in server code
import { DATABASE_URL } from "$env/static/private";
import { PUBLIC_API_URL } from "$env/static/public";
// Or dynamic
import { env } from "$env/dynamic/private";
const dbUrl = env.DATABASE_URL;
Common Errors
| Error | Cause | Fix |
|---|---|---|
Cannot find bun:sqlite | Wrong adapter | Use svelte-adapter-bun |
Vite error | Build issue | Clear .svelte-kit |
Hydration failed | Server/client diff | Check load functions |
404 on refresh | SPA fallback | Configure adapter |
When to Load References
Load references/adapter-config.md when:
- Advanced adapter options
- Static prerendering
- Edge deployment
Load references/performance.md when:
- Caching strategies
- Lazy loading
- Streaming SSR
FAQ
What does the bun-sveltekit skill do?
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs
How do I install bun-sveltekit?
Run npx skills add https://github.com/secondsky/claude-skills --skill bun-sveltekit in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/bun-sveltekit/ (personal) or .claude/skills/bun-sveltekit/ (project).
Which AI agents can use bun-sveltekit?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is bun-sveltekit safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains bun-sveltekit?
It is published by secondsky in secondsky/claude-skills. It has 502 recorded installs.
More from secondsky/claude-skills
tailwind-v4-shadcn
secondsky/claude-skills
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.
aceternity-ui
secondsky/claude-skills
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
vitest-testing
secondsky/claude-skills
Modern TypeScript/JavaScript testing with Vitest. Fast unit and integration tests, native ESM support, Vite-powered HMR, and comprehensive mocking. Use for testing TS/JS projects.
motion
secondsky/claude-skills
Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.
playwright
secondsky/claude-skills
Browser automation and E2E testing with Playwright. Auto-detects dev servers, writes clean test scripts. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use for cross-browser testing, visual regression, API testing, component testing in TypeScript/JavaScript and Python projects.
api-testing
secondsky/claude-skills
HTTP API testing for TypeScript (Supertest) and Python (httpx, pytest). Test REST APIs, GraphQL, request/response validation, authentication, and error handling.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.