Auto-activate for .svelte files, svelte.config.js. Expert knowledge for Svelte 5 development with Runes. Use when: building Svelte components (`.svelte` files), using runic states ($state, $derived), or working with SvelteKit. Not for React (see react), Vue (see vue), or Svelte 4 (this covers Svelte 5 with Runes).
From flownpx claudepluginhub cofin/flow --plugin flowThis skill uses the workspace's default tool permissions.
references/litestar_vite.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
<script lang="ts">
interface Props {
title: string;
items: Item[];
onselect?: (item: Item) => void;
}
let { title, items, onselect }: Props = $props();
let selected = $state<Item | null>(null);
let count = $derived(items.length);
function handleSelect(item: Item) {
selected = item;
onselect?.(item);
}
$effect(() => {
console.log('Selected changed:', selected);
});
</script>
<div>
<h2>{title} ({count})</h2>
<ul>
{#each items as item (item.id)}
<li onclick={() => handleSelect(item)}>
{item.name}
</li>
{/each}
</ul>
</div>
</example>
// stores/counter.svelte.ts
class Counter {
count = $state(0);
doubled = $derived(this.count * 2);
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
export const counter = new Counter();
</example>
<script lang="ts">
let { value = $bindable('') }: { value: string } = $props();
</script>
<input bind:value />
</example>
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
header: Snippet;
children: Snippet;
footer?: Snippet<[{ count: number }]>;
}
let { header, children, footer }: Props = $props();
let count = $state(0);
</script>
<div class="card">
<header>{@render header()}</header>
<main>{@render children()}</main>
{#if footer}
<footer>{@render footer({ count })}</footer>
{/if}
</div>
</example>
// +page.server.ts
import type { PageServerLoad, Actions } from './$types';
export const load: PageServerLoad = async ({ params, fetch }) => {
const res = await fetch(`/api/items/${params.id}`);
if (!res.ok) throw error(404, 'Not found');
return {
item: await res.json()
};
};
export const actions: Actions = {
update: async ({ request, params }) => {
const data = await request.formData();
await updateItem(params.id, data);
return { success: true };
}
};
</example>
<script lang="ts">
import { enhance } from '$app/forms';
import type { ActionData } from './$types';
let { form }: { form: ActionData } = $props();
</script>
<form method="POST" action="?/update" use:enhance>
<input name="title" required />
<button type="submit">Save</button>
{#if form?.success}
<p>Saved!</p>
{/if}
</form>
</example>
| Svelte 4 | Svelte 5 |
|---|---|
export let prop | let { prop } = $props() |
$: derived | $derived(expr) |
$: { effect } | $effect(() => { }) |
<slot> | {@render children()} |
on:click | onclick |
bind:this | Still bind:this |
$state over stores for local state$derived for computed values$effect.pre for DOM measurements