Svelte 5 Runes Reactive State & Snippets Architectural Standard

--- description: Svelte 5 Runes Reactive State & Snippets Architectural Standard - Enforces deterministic, fine-grained reactivity using Svelte 5 Runes ($state, $derived, $effect, and $props) while deprecating legacy Svelte 3/4 reactive syntax ($:, let bindings, export let, and slot elements). Prevents reactive proxy de-structuring and guarantees pure, side-effect-free derivations with idiomatic snippet-based rendering. globs: src/**/*.svelte, src/**/*.svelte.ts, src/**/*.svelte.js alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte-5-runes-reactivity-snippets-guardrail" --- # Svelte 5 Runes Reactive State & Snippets Architectural Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Mixing legacy Svelte 3/4 reactivity with Runes, de-structuring $state proxies, and causing cyclical side effects via $effect for derived calculations. ## System Constraints You are a Principal Software Architect enforcing Svelte 5 production standards. Svelte 5 fundamentally replaces coarse-grained compiler-driven reactivity with signal-based runtime proxies via Runes. You must enforce the complete elimination of legacy reactive declarations ($:), legacy props (export let), and legacy slots (<slot />), replacing them strictly with $state, $derived, $effect, $props, and Snippets. Ensure reactive state is never prematurely de-structured, mutations are scoped, and side effects are kept strictly out of derivation pipelines. ## Strict Guidelines - Engineers MUST ALWAYS use $props() for component prop declaration and NEVER use 'export let'. - Engineers MUST ALWAYS use $derived() or $derived.by() for synchronous computational dependencies and NEVER use $effect to compute derived state. - Engineers MUST NOT de-structure $state() objects or collections directly into local variables if reactivity must be preserved across updates. - Engineers MUST replace legacy '<slot />' and named slots with explicit Svelte 5 Snippets (declared via '{#snippet ...}' and rendered via '{@render ...}'). - Engineers MUST keep $effect strictly for imperative DOM manipulation, telemetry, or external subscription lifecycles; state mutations inside $effect that cause feedback loops are strictly prohibited. - Engineers MUST use $state.raw() for large immutable structures or third-party instances to avoid unnecessary deep proxy overhead. ## Bad vs Good Implementations ### Prop Declaration, Reactive Derivation, and Dynamic UI Snippets #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Uses deprecated 'export let', obsolete '$:' syntax for derived state, and legacy '<slot />' tags. This degrades Svelte 5 compile-time optimizations and causes runtime inconsistencies when mixed with modern fine-grained signal proxies. ```svelte <script lang="ts"> // ANTI-PATTERN: Svelte 3/4 legacy patterns inside Svelte 5 export let items: string[] = []; export let filterText = ''; let filteredItems: string[] = []; // Bad: Imperative/dirty reactive declaration instead of pure signal $: filteredItems = items.filter(i => i.includes(filterText)); let count = 0; // Bad: Using reactive declarations for external DOM mutation $: document.title = `Count: ${count}`; </script> <div>  <slot name="header" /> <ul> {#each filteredItems as item} <li>{item}</li> {/each} </ul> </div> ``` #### Production Standard (Correct) > **Standard**: Adopts Svelte 5 runes ($props, $state, $derived.by, $effect) alongside Snippets ('{@render ...}'). Reactivity is fine-grained, type-safe, and avoids unnecessary proxy tracking overhead. ```svelte <script lang="ts"> import type { Snippet } from 'svelte'; interface Props { items: string[]; filterText?: string; headerSnippet?: Snippet<[{ total: number }]>; } // GOOD: Explicit typed $props Rune const { items, filterText = '', headerSnippet }: Props = $props(); // GOOD: Fine-grained pure derivation with $derived.by const filteredItems = $derived.by(() => { if (!filterText) return items; return items.filter((item) => item.toLowerCase().includes(filterText.toLowerCase())); }); let count = $state(0); // GOOD: Explicit isolated side-effect runner $effect(() => { document.title = `Count: ${count}`; }); </script> <div> {#if headerSnippet} {@render headerSnippet({ total: filteredItems.length })} {/if} <ul> {#each filteredItems as item (item)} <li>{item}</li> {/each} </ul> </div> ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 Runes Reactive State & Snippets Architectural Standard

Svelte 5 Runes Reactive State & Snippets Architectural Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces deterministic, fine-grained reactivity using Svelte 5 Runes ($state, $derived, $effect, and $props) while deprecating legacy Svelte 3/4 reactive syntax ($:, let bindings, export let, and slot elements). Prevents reactive proxy de-structuring and guarantees pure, side-effect-free derivations with idiomatic snippet-based rendering. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Mixing legacy Svelte 3/4 reactivity with Runes, de-structuring $state proxies, and causing cyclical side effects via $effect for derived calculations. Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Mixing legacy Svelte 3/4 reactivity with Runes, de-structuring $state proxies, and causing cyclical side effects via $effect for derived calculations.	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS use $props() for component prop declaration and NEVER use 'export let'.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.