Svelte Core Best Practices Skill for Claude Code: Modern Svelte 5

The Svelte team's skill that guides your agent to write fast, modern Svelte 5 code with runes, snippets and keyed each blocks.

Installs: 11.5K; on skills.sh
Stars: 336; on GitHub
Files: 9; besides SKILL.md
Updated: Oct 2026; last repo commit

This skill tells your agent how to write good Svelte 5. Its description says to load it whenever you are in a Svelte project and ask for a component or module to be written, edited or analyzed. It sets rules for $state, $derived, $effect and $props, then covers events, snippets, each blocks, styling, context and async Svelte.

The rules lean on a few ideas. Use $derived instead of $effect to compute values. Treat props as changing. Use keyed each blocks. Use runes mode and skip legacy features such as export let, on:click and <slot>. The skill bundles 9 reference files and no scripts.

Good for

Developers writing or editing Svelte 5 components and modules with an AI agent
Teams moving old Svelte code to runes mode
Anyone whose agent keeps using $effect or legacy syntax where it should not

Install svelte-core-bestpractices

Claude Code

Copy this prompt.

Install the svelte-core-bestpractices skill in Claude Code. Run this command:

/plugin marketplace add sveltejs/ai-tools
/plugin install svelte

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The svelte plugin adds this skill and svelte-code-writer, a local Svelte MCP server started with npx, a Svelte language server entry and a file-editing agent that is set to accept edits. Use the skills CLI line for just this skill.

From the project README. Source.

What's in the skill

When it loads

Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.

Sections in SKILL.md

$state
$derived
$effect
$props
$inspect.trace
#key block
Events
Snippets
Each blocks
Using JavaScript variables in CSS
Styling child components
Context
Async Svelte
Avoid legacy features

Key facts

Author: Svelte (sveltejs/ai-tools)
Repo: sveltejs/ai-tools, folder tools/skills/svelte-core-bestpractices
Installs on skills.sh: 11,542 as of 2026-11-02
GitHub stars: 336 for the whole sveltejs/ai-tools repo, 2026-11-02
License: MIT
Last repo commit: 2026-10-31
What is inside: 10 files including SKILL.md: 9 reference guides, no scripts
Part of: The svelte plugin for Claude Code, Codex CLI and others, with svelte-code-writer, an MCP server and an agent

What it includes

Use it only for variables that cause updates, and $state.raw for large reassigned objects.
Plain variables are fine for everything else.
Read · $state
Compute values with $derived, not $effect.
It takes an expression, and $derived.by takes a function.
Read · $derived
Treat effects as an escape hatch and avoid setting state inside them.
Alternatives named in the skill are attachments, function bindings, $inspect and createSubscriber.
Read · $effect
Treat props as values that will change.
Values that depend on props should usually use $derived.
Read · $props
Debugs why a derived or effect runs.
Add it as the first line of an $effect or $derived.by.
Read · $inspect.trace
Use sparingly because it unmounts everything inside each time.
Wrap expressions in $derived instead where you can.
Read · #key block
Use onclick-style attributes, and svelte:window or svelte:document for global listeners.
Avoid onMount or $effect for this.
Read · Events
Reusable markup with {#snippet} and {@render}.
Top-level snippets can be used in the script block.
Read · Snippets
Prefer keyed each blocks, with a key that identifies the object.
Do not use the index as a key.
Read · Each blocks
Use the style: directive to set a custom property.
Then use var() in the component style.
Read · CSS variables from JavaScript
Prefer CSS custom properties, then :global as a last resort.
For library components you cannot change.
Read · Styling child components
Use context instead of shared module state, and createContext for types.
The skill says this stops state leaking between users in server-side rendering.
Read · Context
Await expressions and hydratable, for Svelte 5.36 or higher.
They need the experimental.async option, as they are not yet considered fully stable.
Read · Async Svelte
Ten replacements for old syntax, always in runes mode.
For example $props instead of export let, onclick instead of on:click, and {@attach} instead of use:action.
Read · Avoid legacy features

From the official docs

Permissions

Low risk

The skill is guidance that your agent follows while it edits Svelte files. The plugin route adds an MCP server started through npx and an agent set to accept edits, so pick the skills CLI route for just the skill.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

The plugin route runs an MCP server through npx
The svelte plugin starts a local server with npx -y @sveltejs/mcp. That is third-party code from npm, so install it only if you want it. github.com
The plugin's agent is set to accept edits
svelte-file-editor has permissionMode acceptEdits, so it can change files without asking each time. Use the skills CLI route if you do not want that. github.com
The plugin lists a language server
The plugin manifest registers svelteserver for .svelte files, which must be installed on your machine. github.com

Technical details

Turning on read-only	No switch. The skill guides code the agent writes; ask for analysis only if you do not want edits.
Scopes	The skill itself bundles no scripts and guides edits to your Svelte files

Questions

What does the svelte-core-bestpractices skill do?

It guides your agent to write modern Svelte 5 code. It covers runes, events, snippets, each blocks, styling, context and async Svelte, and tells the agent to avoid legacy syntax.

How do I install it?

Use the install box at the top of this page. The Svelte docs offer a plugin for Claude Code and Codex CLI, which adds more than this skill. The skills CLI line installs only this skill.

What does the Svelte plugin add?

For Claude Code it adds this skill and svelte-code-writer, a local Svelte MCP server started with npx, a language server entry and a Svelte file-editing agent set to accept edits. The Svelte docs say Codex CLI gets the same bundle.

Does it work with Svelte 4?

It is written for Svelte 5. The rules are about runes mode, and its async features need Svelte 5.36 or higher.

Does it need an API key?

SKILL.md names none. The skill bundles reference files and no scripts.

Is it safe to use?

The skill is instructions and reference files, and the agent edits your Svelte files as you ask. The plugin route adds more, including a local server started with npx and an agent that accepts edits, so use the skills CLI line if you want just the skill.

Information

updated Nov 2, 2026

Repository: sveltejs/ai-tools
Folder: tools/skills/svelte-core-bestpractices

sveltejs/ai-tools skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5