TypeScript · Svelte 5 · SvelteKit

SvelteKit (Svelte 5 runes) rules for Cursor

Runes, snippets and load-function rules that stop agents from writing Svelte 4 syntax.

The rule

Save as .cursor/rules/sveltekit.mdc. Cursor picks it up on the next request.

.cursor/rules/sveltekit.mdc

---
description: SvelteKit and Svelte 5 runes conventions
globs: src/**/*.svelte, src/**/*.svelte.ts, src/routes/**/*.ts
alwaysApply: false
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.

How Cursor loads this rule

Read from the frontmatter above, per Cursor's rules documentation.

  • alwaysApply: false with globs: src/**/*.svelte, src/**/*.svelte.ts, src/routes/**/*.ts: attached automatically when a matching file is in context.
  • Keep the .mdc extension. A plain .md file in .cursor/rules is ignored by the rules system.
  • Prefer to generate your own? Type /create-rule in Agent and describe what you want; Cursor saves the file to .cursor/rules.
  • Team Rules come first, then Project Rules like this one, then User Rules. Earlier sources win when guidance conflicts.

Cursor rules setup guideCursor Team RulesLet Cursor run commands without asking

SvelteKit (Svelte 5 runes) rules for Claude Code, Copilot, Kiro and other agents

The same instructions work as plain Markdown in AGENTS.md, which Codex, Gemini CLI, GitHub Copilot and most other coding agents read.

AGENTS.md (section)

## SvelteKit (Svelte 5 runes)

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.
SvelteKit (Svelte 5 runes) rules for Claude Code.claude/rules/sveltekit.md

.claude/rules/sveltekit.md

---
paths:
  - "src/**/*.svelte"
  - "src/**/*.svelte.ts"
  - "src/routes/**/*.ts"
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.
SvelteKit (Svelte 5 runes) rules for GitHub Copilot.github/instructions/sveltekit.instructions.md

.github/instructions/sveltekit.instructions.md

---
applyTo: "src/**/*.svelte,src/**/*.svelte.ts,src/routes/**/*.ts"
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.
SvelteKit (Svelte 5 runes) rules for Kiro.kiro/steering/sveltekit.md

.kiro/steering/sveltekit.md

---
inclusion: fileMatch
fileMatchPattern: ["src/**/*.svelte", "src/**/*.svelte.ts", "src/routes/**/*.ts"]
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.
SvelteKit (Svelte 5 runes) rules for Antigravity.agents/rules/sveltekit.md

.agents/rules/sveltekit.md

---
trigger: glob
globs: "src/**/*.svelte, src/**/*.svelte.ts, src/routes/**/*.ts"
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.
SvelteKit (Svelte 5 runes) rules for Devin Desktop (Windsurf).devin/rules/sveltekit.md

.devin/rules/sveltekit.md

---
trigger: glob
globs: src/**/*.svelte, src/**/*.svelte.ts, src/routes/**/*.ts
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.
SvelteKit (Svelte 5 runes) rules for Cline.clinerules/sveltekit.md

.clinerules/sveltekit.md

---
paths:
  - "src/**/*.svelte"
  - "src/**/*.svelte.ts"
  - "src/routes/**/*.ts"
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.
SvelteKit (Svelte 5 runes) rules for Continue.continue/rules/sveltekit.md

.continue/rules/sveltekit.md

---
name: "sveltekit"
globs: ["src/**/*.svelte", "src/**/*.svelte.ts", "src/routes/**/*.ts"]
---

- Use runes: $state for reactive state, $derived for computed values, $props() for props and $bindable() for two-way props. Do not use export let or $: statements.
- Use $effect only for side effects such as DOM or third-party calls; never use it to sync one piece of state into another.
- Use event attributes (onclick, oninput), not on:click directives. Pass callback props instead of createEventDispatcher.
- Use snippets and {@render ...} instead of slots.
- Put shared reactive state in .svelte.ts modules, not writable stores.
- Load page data in +page.ts or +page.server.ts load functions, not in onMount.
- Keep secrets, database clients and private env vars in server-only files (+page.server.ts, +server.ts, hooks.server.ts).
- Handle form submissions with form actions in +page.server.ts and progressive enhancement via use:enhance.
- Read the current page, params and URL from page in $app/state, not $app/stores.

Edit this rule and convert it for 11 agents →

More templates

Next.js App RouterTypeScript (strict)React componentsPythonFastAPIFastifyNode.js and ExpressGoRustData science notebooks and pipelinesTesting disciplineSecurity guardrailsVue 3 (Composition API)NuxtAngular (standalone components, signals)DjangoLaravelRuby on RailsNestJSSpring BootASP.NET CoreFlutterSwiftUI (iOS)Android (Kotlin, Jetpack Compose)React Native (Expo)Tailwind CSS (v4)Prisma ORM

Get Cursor rules and settings changes by email

When Cursor changes how rules, run modes or settings work, we update these templates from the docs and send a short note. One email a week at most.

Reviewed Oct 20, 2026. Written by AgentAtlas. Adapt it to your codebase before relying on it.