skill

sveltekit · davila7 — Claude Code skill: what it does, how to install

Q: How do I install sveltekit in Claude Code?

Use the templates command: `npx claude-code-templates@latest --skill web-development/sveltekit`. Or run `npx skills add davila7/claude-code-templates --skill sveltekit -a claude-code`. The skill file then sits at `~/.claude/skills/sveltekit/SKILL.md`.

Q: What do I need before using it?

The project starts with `npm create svelte@latest`, so Node.js and npm must be present. The skill advises keeping server logic in `+page.server.ts` and `$lib/server/`.

A Claude skill that guides work on SvelteKit apps: routes from files, server rendering, endpoints and form handling.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill web-development/sveltekit

Open on GitHub

What sveltekit does

The skill covers SvelteKit, the full-stack framework built on Svelte. Your agent gets instructions on routing driven by the file tree, server-side rendering and static generation, API endpoints, and form actions. The walkthrough goes step by step: scaffolding a project, the directory layout, fetching data in load, endpoints in +server.ts, forms with use:enhance, nested layouts, and per-route rendering options.

There are also examples of a guarded route, hooks used as session middleware, and re-running loaders with invalidateAll. A short practice list follows: keep database and auth code in +page.server.ts, share server-only modules under $lib/server/, type loader results with the generated $types.

The skill assumes a project created with npm create svelte@latest. Without Node.js and npm on the machine its steps go nowhere, so check your setup first. It earns its place when you start a fresh SvelteKit app or move a single-page app onto a framework with a server side.

What it helps with

map URLs to files instead of hand-writing a router
turn on server rendering or static output for chosen pages
put an endpoint next to the page that uses it
handle a form submit without a client-side request
gate a section of the site behind a session check in a hook

Example prompts for the agent

Scaffold a new SvelteKit project with TypeScript and show me the src/routes layout
Add a +server.ts endpoint that lists posts and accepts a limit parameter
Build a subscribe form with an action in +page.server.ts and use:enhance

How to install sveltekit

1claude-code-templates

npx claude-code-templates@latest --skill web-development/sveltekit

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill sveltekit -a claude-code

3Manually: put the files in place

~/.claude/skills/sveltekit/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/sveltekit/

Manually: put the files in place

.agents/skills/sveltekit/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/sveltekit/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates sveltekit

2Manually: put the files in place

.github/skills/sveltekit/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/sveltekit

Manually: put the files in place

.devin/skills/sveltekit/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about sveltekit

How do I install sveltekit in Claude Code?

Use the templates command: npx claude-code-templates@latest --skill web-development/sveltekit. Or run npx skills add davila7/claude-code-templates --skill sveltekit -a claude-code. The skill file then sits at ~/.claude/skills/sveltekit/SKILL.md.

What does the sveltekit skill do?

It hands your agent SvelteKit guidance: file-based routes, data loading, endpoints, form actions, layouts, rendering modes. It also ships examples of a protected route and a session hook.

What do I need before using it?

The project starts with npm create svelte@latest, so Node.js and npm must be present. The skill advises keeping server logic in +page.server.ts and $lib/server/.

Similar skills

Everything for Frontend and UI →

sveltekit by other authors comes first.

sveltekit Mindrally Teaches your coding agent SvelteKit conventions with TypeScript and Tailwind CSS. Covers routing, load functions, form actions, and Vitest setup. CX Codex +1 720installs sveltekit Claude MPM Team A skill that tells the agent how SvelteKit works: file-based routing, load functions, form actions and deployment adapters. CX Codex +1 441installs bun-sveltekit secondsky Tells the agent how to build and run SvelteKit apps on Bun: SSR, adapters, bun:sqlite and file handling. CX Codex +1 499installs sveltekit-structure spences10 Tells the agent how to lay out routes, nested layouts and error boundaries in SvelteKit. Useful once a project grows and files start to blur. CX Codex +1 1,000installs sveltekit-svelte5-tailwind-skill claude-skills A skill that helps an agent build sites on SvelteKit 2, Svelte 5 and Tailwind CSS v4. Useful when runes and Vite config keep tripping the model up. CX Codex +1 561installs sveltekit-data-flow spences10 Teaches your AI coding assistant proper SvelteKit data flow patterns, from form actions and load functions to serialization and cache invalidation. CX Codex +1 492installs sveltekit-typescript-guide-cursorrules-prompt-file PatrickJS A Cursor rule that points the agent at Svelte 5, SvelteKit and TypeScript: project structure, runes, state handling. ★ 41,024repo stars nuxt Anthony Fu This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering. CX Codex +1 24,100installs

From the same set361

The whole set →

github-automation A Claude skill that walks through GitHub work over Rube MCP: issues, pull requests, branches, code search and CI/CD. 63installs interview-prep-generator Turns your resume into STAR stories, likely questions and talking points for a specific role. Handy before a job interview. 61installs gws-modelarmor-create-template A slash command that has Claude create a Google Model Armor template in GCP, either from the jailbreak preset or from your own JSON filter config. 61installs emerging-techniques-speculative-decoding A skill that walks your agent through speculative decoding, Medusa and lookahead decoding to speed up token generation by 1.5–3.6×. 59installs claude-opus-4-5-migration A skill that scans your codebase for model strings and API calls and switches them to Opus 4.5. Useful when a project needs the newer model. 55installs aeon Gives Claude a working map of the aeon Python library for classification, forecasting, clustering and anomaly detection on time series. 52installs upstash-qstash A skill about Upstash QStash: delayed HTTP calls, cron jobs and webhook delivery. Useful when you want an HTTP request to fire later and actually arrive. 51installs regression-triage A slash command that walks a regression backwards: reruns the failing test, reads history around the broken path, and names the commit that did it. 25installs