Svelte Claude Skills
Skills for Claude Code on Svelte 5 and SvelteKit: runes, data loading, project structure, remote functions and deployment
- 217 ★ on the repository
- Last commit
Minimal access
Why this level
- Skills only add instructions; the hooks in `.claude/hooks` run shell scripts inside the Claude Code session
Install
- Works in
Manual install
git clone https://github.com/spences10/svelte-claude-skills.git ~/.claude/skills/svelteInstalls every skill for all projects. For one project, clone into `.claude/skills/`.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Skills only add instructions; the hooks in `.claude/hooks` run shell scripts inside the Claude Code session
This is third-party code. Review the repository files before installing.
What it does
The repository puts seven skills into `.claude/skills`, and Claude Code loads the one that matches the task description. `svelte-runes` covers `$state`, `$derived`, `$effect` and `$props`, common mistakes and the move from Svelte 4 to 5. `sveltekit-data-flow` explains server and universal load functions, form actions and serialization rules. `sveltekit-structure` handles routes, layouts and file naming. Three more skills cover neighboring topics. `sveltekit-remote-functions` describes SvelteKit remote functions, `svelte-components` covers component libraries and forms, and `svelte-deployment` covers Cloudflare, PWA and library publishing. The `research` skill explains how to clone other repositories and check facts against source. The `.claude/hooks` folder holds three scripts that make the agent review the skill list before it answers. The author moved the maintained versions into a separate set called svelte-skills-kit. This repository stays as the original testing ground and an archive of earlier versions.
Who it is for. Developers building a SvelteKit project on Svelte 5 with Claude Code who want the agent to stop falling back to Svelte 4 syntax.
Good fit when
- The agent writes a Svelte 5 component and confuses `$derived` with `$effect`
- A SvelteKit page loses data because of the gap between `+page.ts` and `+page.server.ts`
- A project is moving from Svelte 4 to 5 and needs a list of common breakages
- An app goes to Cloudflare and the deployment hits platform quirks
Not a fit when
- The project is not Svelte: every skill here is about Svelte and SvelteKit
- You want skills the author still updates: he moves them into svelte-skills-kit
- You work on Svelte 4: the skills target Svelte 5 and treat old syntax as a mistake
Example request
Load the Svelte skills and rewrite this component in Svelte 5 with runesLimitations
- The author says this repository was a testing ground and the maintained skill copies live in svelte-skills-kit. What sits here is the state at the time of the move.
- The skills describe Svelte 5.25 and later; later releases need a check against the docs.
- The hooks in `.claude/hooks` target Claude Code and run shell scripts, so read them before enabling.
- The README percentages for verified content refer to a check against official documentation; the repository has no independent tests of how well the agent performs.
How to disable. Delete the skill folders from `~/.claude/skills` or the project `.claude/skills`. If you enabled the hooks, remove their entries from `.claude/settings.json`.
FAQ
How does svelte-claude-skills differ from svelte-skills-kit?
This repository was the testing ground, and the author calls svelte-skills-kit the maintained successor and points readers there. The skills here stay in their earlier versions.
How do I install the Svelte skills in Claude Code?
Run `git clone` into `~/.claude/skills/svelte` for every project or into `.claude/skills/` for one. Symlinks to the folders you want also work. Claude Code discovers the skills on its own.
Which topics do the skills cover?
Svelte 5 runes, SvelteKit data flow, route structure, remote functions, components and forms, Cloudflare and PWA deployment, plus a skill for research across other repositories.
What is the hooks folder for?
Three scripts in `.claude/hooks` remind the agent to review the skills before it answers so a matching one is not skipped. The hooks are enabled separately through `.claude/settings.json`.
Does the set work in other agents?
The README mentions Claude Code only. The skills use the `SKILL.md` format that other agents read too, but the repository documents no testing in them.
Discussion
No questions or reviews yet.
Related
Skillssvelte-skills-kit is a Claude Code plugin marketplace with Svelte and SvelteKit skills and a language server for .svelte files.
14 skills for Claude Code on Makepad 2.0: DSL, layout, widgets, events, animation, shaders, themes and migration from 1.x
145 skill plugins for Claude Code and Codex: Cloudflare, React, Tailwind, Nuxt, APIs, security, testing, installed one by one
julianromli/ai-skills
ai-skills
A collection of 31 skills for Claude Code and other agents: interfaces, React, Postgres, code review, SEO and browser automation
shadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
A Claude Code skill collection for copywriting, advertising, SEO and interface design: Ogilvy, editing, rules and CSS techniques.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Svelte Claude Skills (this card) | no | 217 | ||
| svelte-skills-kit | no | 96 | the maintained successor of this set, updated by the author | |
| Svelte MCP | yes | not required | 338 | the official Svelte MCP server with documentation, ships no skills |
README in short
The front page first points readers to the newer sets: the toolkit-skills and svelte-skills-kit plugins, the mcp-omnisearch and mcp-sqlite-tools MCP servers and the mcpick and cclog utilities. Below sits the archive of the original skills with topic summaries, documentation check percentages and install routes through `git clone` or symlinks. The README ends with how to add reference files to `references`.
README badge
Original SKILL.md
---
name: svelte-runes
# IMPORTANT: Keep description on ONE line for Claude Code compatibility
# prettier-ignore
description: Svelte runes guidance. Use for reactive state, props, effects, attachments, or migration. Covers $state, $derived, $effect, @attach. Prevents reactivity mistakes.
---
# Svelte Runes
## Quick Start
**Which rune?** Props: `$props()` | Bindable: `$bindable()` |
Computed: `$derived()` | Side effect: `$effect()` | State: `$state()`
**Key rules:** Runes are top-level only. $derived can be overridden
(use `const` for read-only). Don't mix Svelte 4/5 syntax.
Objects/arrays are deeply reactive by default.
## Example
```svelte
<script>
let count = $state(0); // Mutable state
const doubled = $derived(count * 2); // Computed (const = read-only)
$effect(() => {
console.log(`Count is ${count}`); // Side effect
});
</script>
<button onclick={() => count++}>
{count} (doubled: {doubled})
</button>
```
## Reference Files
- [reactivity-patterns.md](references/reactivity-patterns.md) - When
to use each rune
- [migration-gotchas.md](references/migration-gotchas.md) - Svelte 4→5
translation
- [component-api.md](references/component-api.md) - $props, $bindable
patterns
- [snippets-vs-slots.md](references/snippets-vs-slots.md) - New
snippet syntax