The Complete Production SOP: How to Deploy and Run Svelte 5 Runes Reactivity & Fine-Grained Signals in Autonomous AI Agents
Production SOP to install and run Svelte 5 Runes Reactivity in Codex, Claude Code, and Cursor. Covers $state, $derived, universal signals, and debugging.
Technical Overview & Architectural Context
Without explicit procedural constraints, autonomous coding agents frequently hallucinate legacy Svelte 3/4 patterns when asked to write modern Svelte 5 components. Large language models default to training distributions saturated with legacy reactive declarations (`let count = 0; $: double = count * 2;`), outdated writable stores (`writable()`, `derived()`), and component lifecycle hooks (`onMount`, `beforeUpdate`, `afterUpdate`). In Svelte 5, these legacy constructs either cause subtle reactivity traps or outright fail in universal `.svelte.ts` signal modules. The `svelte-5-runes-reactivity` skill fixes this by establishing deterministic boundaries for runtime reactivity. It locks agent execution into Svelte 5's fine-grained signal paradigm: using `$state()` for reactive data, `$derived()` and `$derived.by()` for computed signals, `$effect()` and `$effect.pre()` for coordinated side effects, and `$props()` for type-safe component contracts. Furthermore, it strictly enforces module-level universal state using `.svelte.ts` files instead of legacy Svelte stores, preventing stale closures and silent reactivity failures.
Prerequisites & Environment Requirements
Verified Search Intents & Long-Tail Queries Solved
This operational tutorial is engineered to provide deterministic solutions for these developer search queries:
Step-by-Step Execution Playbook
Local Environment Setup & SKILL.md Mounting
Mount the skill manifest into your agent's local rules directory to enable rune recognition.
Place the SKILL.md specification inside the runtime's agent skills directory or workspace context root (`.agents/skills/` or `.cursor/rules/`). Autonomous agents parse frontmatter triggers such as 'use svelte 5 runes' and '$state and $derived svelte 5' to automatically route Svelte file generation into modern rune execution.
mkdir -p ~/.agents/skills/svelte-5-runes-reactivity && curl -fsSL https://askills.dev/api/skills/svelte-5-runes-reactivity/raw -o ~/.agents/skills/svelte-5-runes-reactivity/SKILL.md---
name: "svelte-5-runes-reactivity"
description: "Build modern Svelte 5 applications using universal Runes: $state, $derived, and $effect."
metadata:
author: "Svelte"
version: "1.0.0"
runtime_compatibility:
- "codex"
- "claude-code"
- "cursor"
- "windsurf"
triggers:
- "use svelte 5 runes"
- "$state and $derived svelte 5"
- "universal state svelte.ts"
permissions:
fs_read: true
fs_write: "workspace"
shell_exec: false
net_access: false
---In Cursor and Windsurf, symlink the skill file into `.cursor/rules/svelte-5-runes.mdc` or `.windsurfrules` to eliminate repeated prompt injections and save up to 400 context tokens per agent query.
Ensure `fs_write` is constrained to the workspace root. Runes can generate global state across files; never allow the agent to write outside project directories.
Universal Module Naming & Dependency Validation
Ensure project dependencies reflect Svelte 5 and enforce `.svelte.ts` extensions for rune modules.
Runes like `$state` and `$derived` outside `.svelte` single-file components can only be evaluated inside files ending with `.svelte.ts` or `.svelte.js`. Agents will fail if they place universal rune stores in standard `.ts` files. This step guarantees Svelte 5 compiler compatibility.
node -e 'const pkg = require("./package.json"); const ver = pkg.dependencies?.svelte || pkg.devDependencies?.svelte; console.log("Svelte version:", ver);'Use `svelte-check --tsconfig ./tsconfig.json` during the agent pre-execution phase to ensure TypeScript compiler options recognize rune ambient globals without manual imports.
Writing `$state()` inside a plain `store.ts` file triggers the Svelte compiler error: 'Runes can only be used in .svelte and .svelte.ts/.svelte.js files'. Ensure the agent names files with `.svelte.ts`.
Intent Matching & Trigger Invocation
Trigger the agent using verified deterministic phrases to activate Svelte 5 rune rules.
Invoke the agent using explicit rune keywords. The agent pattern-matcher inspects user inputs against the registered triggers (`use svelte 5 runes`, `$state and $derived svelte 5`, `universal state svelte.ts`). This suppresses legacy Svelte 3/4 syntax generation.
Prefix prompts with 'use svelte 5 runes:' to immediately bias the agent's AST generator towards `$state`, `$derived`, `$derived.by`, and `$props()`.
Avoid prompt instructions like 'use Svelte stores with reactive $: labels' as contradictory instructions will lead to invalid mixed syntax.
Verification, Type-Checking & Syntax Gate
Run svelte-check and build tools to verify signal reactivity and property contracts.
The skill enforces a completion checklist: the agent must execute the project's type checker and linter before marking the task complete. This guarantees that props declared with `$props()` conform to TypeScript types and no unmigrated `$:` blocks remain.
pnpm svelte-check --threshold error && pnpm vite build --emptyOutDirAlways verify git status with `git diff --stat` after agent execution to confirm no unexpected configuration files were modified.
Do not allow agents to run `npm test` with `--updateSnapshot` blindly; signal reactivity DOM updates may introduce expected HTML diffs that require deliberate inspection.
Real-World Scenario: Migrate Cart Store to Universal Svelte 5 Runes Module & Component
“use svelte 5 runes: Refactor our legacy shopping cart store into a universal state module in src/lib/cart.svelte.ts using $state and $derived. Then create a CartWidget.svelte component accepting typed items with $props() and rendering reactive total calculations without any legacy Svelte stores.”
Runtime Troubleshooting & Failure Modes
Root Cause: The agent declared `$state` or `$derived` inside a standard TypeScript utility file (`cart.ts`) instead of using Svelte 5's dedicated universal state extension.
git mv src/lib/cart.ts src/lib/cart.svelte.ts && sed -i '' 's/from "\.\/cart"/from "\.\/cart.svelte"/g' src/lib/**/*.svelteRoot Cause: The agent attempted to invoke `$effect()` at the root module level in a `.svelte.ts` file instead of scoping side effects inside an active component lifecycle or `$effect.root()` block.
// Wrap external root effects in $effect.root:
export function createCartTracker(cart) {
return $effect.root(() => {
$effect(() => { localStorage.setItem('cart', JSON.stringify(cart.items)); });
});
}Frequently Asked Questions (Svelte 5 Runes Reactivity & Fine-Grained Signals SOP)
Q:Can I use Svelte 5 Runes Reactivity across Codex, Claude Code, and Cursor simultaneously?
Yes. The SKILL.md specification uses vendor-agnostic Markdown frontmatter and standard Unix CLI instructions. Runtimes including Codex CLI, Claude Code, Cursor, and Windsurf parse the trigger keywords and boundary constraints equivalently.
Q:How does Svelte 5 Runes Reactivity prevent context window overflow during long agent sessions?
Instead of repeatedly appending full Svelte 5 migration documentation to the LLM system prompt, this skill establishes concise SOP rules that only load during matching triggers, saving thousands of tokens per development session.
Q:Does this skill require escalated root or container permissions?
No. The skill operates with a verified security score of 98/100. It requires read and write access scoped exclusively to the workspace filesystem (`fs_write: workspace`) with zero shell escalation or outbound network calls required.
Ready to equip your autonomous agent with Svelte 5 Runes Reactivity & Fine-Grained Signals?
Copy the complete audited SKILL.md specification or download the 1-click zip bundle directly from our verified registry.