BB SkillsFind a workflow. Make it your own.
Create account
New here? Start with the guide ↗
Browse sections ＋
{ }
Resource profile / Official Svelte Runes & Component Practices
About this skill

Workflow & requirements

BB Skills packaging and scoped local evidence (2026-10-08)

Official Svelte core practices, release svelte-core-bestpractices-v2026.10.03-125548, pinned to 1a3ba88bba598c6734533c48e23cb5d37424b618. Ten original instruction/reference files match the official release archive exactly; the complete repository MIT license and attribution to Svelte Contributors are retained. All nine references remain together. Original instruction bytes are in upstream-original/SKILL.md; this preface and examples are independent BB Skills additions, not Svelte certification.

The independent experiment used Svelte 5.57.2, Node 24.10.0, esbuild 0.28.2 and Chrome 154 on Windows. It recorded 15 compiler/server observations and 23 real-browser DOM observations. Four complete original documentation blocks are intentionally rejected: the contrast examples redeclare variables and event examples contain placeholders. Four other original blocks compile for client and server: greeting snippet, CSS directive, keyed each and function binding. Synthetic wrappers supply props or state around those unchanged blocks. Exact block hashes, wrappers and diagnostics are recorded.

Independent examples test writable derived values, deep versus raw updates, changing props and a deliberately frozen prop counterexample. Original keyed loops retain actual node identity across reorder/removal; binding transforms synthetic input and CSS property follows a prop. No speed, layout, trusted-input or full accessibility claim follows from these observations. Server rendering and browser effect observations are separate; no hydration or cross-user isolation test ran.

The server listens only on 127.0.0.1 and serves a strict two-file allowlist. No external service, credential, database, production data or paid API is used by the experiment. Installing locked dependencies separately uses the public npm registry. Generated bundles, dependencies and runtime binaries are not distributed in this archive. The fixture intentionally includes a stale-state counterexample; do not deploy it.

The fixed skill snapshot and tested compiler have separate version identities. Check your project lock and official documentation when using version-specific guidance. Attachments, async hydration, SvelteKit, MCP/code-writer tools, real authorization, concurrency and comprehensive security remain outside this fixture. No AI client executed the complete skill; runtime_tested is false. See examples/README.md and the two evidence files for exact scope.

$state

Only use the $state rune for variables that should be reactive — in other words, variables that cause an $effect, $derived or template expression to update. Everything else can be a normal variable.

Objects and arrays ($state({...}) or $state([...])) are made deeply reactive, meaning mutation will trigger updates. This has a trade-off: in exchange for fine-grained reactivity, the objects must be proxied, which has performance overhead. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use $state.raw instead. This is often the case with API responses, for example.

$derived

To compute something from state, use $derived rather than $effect:

// do this
let square = $derived(num * num);

// don't do this
let square;

$effect(() => {
    square = num * num;
});

[!NOTE] $derived is given an expression, not a function. If you need to use a function (because the expression is complex, for example) use $derived.by.

Deriveds are writable — you can assign to them, just like $state, except that they will re-evaluate when their expression changes.

If the derived expression is an object or array, it will be returned as-is — it is not made deeply reactive. You can, however, use $state inside $derived.by in the rare cases that you need this.

$effect

Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.

  • If you need to sync state to an external library such as D3, it is often neater to use {@attach ...}
  • If you need to run some code in response to user interaction, put the code directly in an event handler or use a function binding as appropriate
  • If you need to log values for debugging purposes, use $inspect
  • If you need to observe something external to Svelte, use createSubscriber

Never wrap the contents of an effect in if (browser) {...} or similar — effects do not run on the server.

$props

Treat props as though they will change. For example, values that depend on props should usually use $derived:

// @errors: 2451
let { type } = $props();

// do this
let color = $derived(type === 'danger' ? 'red' : 'green');

// don't do this — `color` will not update if `type` changes
let color = type === 'danger' ? 'red' : 'green';

$inspect.trace

$inspect.trace is a debugging tool for reactivity. If something is not updating properly or running more than it should you can add $inspect.trace(label) as the first line of an $effect or $derived.by (or any function they call) to trace their dependencies and discover which one triggered an update.

#key block

While the #key block is useful when you want transitions/animations to run when a certain expression changes, it can be very expensive — it unmounts every element/component inside each time, so should be used sparingly. Instead of using #key to cause expressions in a child component's <script> block to re-run, for example, consider wrapping those expressions in $derived.

Events

Any element attribute starting with on is treated as an event listener:

<button onclick={() => {...}}>click me</button>

<!-- attribute shorthand also works -->
<button {onclick}>...</button>

<!-- so do spread attributes -->
<button {...props}>...</button>

If you need to attach listeners to window or document you can use <svelte:window> and <svelte:document>:

<svelte:window onkeydown={...} />
<svelte:document onvisibilitychange={...} />

Avoid using onMount or $effect for this.

Snippets

Snippets are a way to define reusable chunks of markup that can be instantiated with the {@render ...} tag, or passed to components as props. They must be declared within the template.

{#snippet greeting(name)}
    <p>hello {name}!</p>
{/snippet}

{@render greeting('world')}

[!NOTE] Snippets declared at the top level of a component (i.e. not inside elements or blocks) can be referenced inside <script>. A snippet that doesn't reference component state is also available in a <script module>, in which case it can be exported for use by other components.

Each blocks

Prefer to use keyed each blocks — this improves performance by allowing Svelte to surgically insert or remove items rather than updating the DOM belonging to existing items.

[!NOTE] The key must uniquely identify the object. Do not use the index as a key.

Avoid destructuring if you need to mutate the item (with something like bind:value={item.count}, for example).

Using JavaScript variables in CSS

If you have a JS variable that you want to use inside CSS you can set a CSS custom property with the style: directive.

<div style:--columns={columns}>...</div>

You can then reference var(--columns) inside the component's <style>.

Styling child components

The CSS in a component's <style> is scoped to that component. If a parent component needs to control the child's styles, the preferred way is to use CSS custom properties:

<!-- Parent.svelte -->
<Child --color="red" />

<!-- Child.svelte -->
<h1>Hello</h1>

<style>
    h1 {
        color: var(--color);
    }
</style>

If this is impossible (for example, the child component comes from a library) you can use :global to override styles:

<div>
    <Child />
</div>

<style>
    div :global {
        h1 {
            color: red;
        }
    }
</style>

Context

Consider using context instead of declaring state in a shared module. This will scope the state to the part of the app that needs it, and eliminate the possibility of it leaking between users when server-side rendering.

Use createContext rather than setContext and getContext, as it provides type safety.

Async Svelte

If using version 5.36 or higher, you can use await expressions and hydratable to use promises directly inside components. Note that these require the experimental.async option to be enabled in the plugin options in vite.config.js or in the svelte.config.js as they are not yet considered fully stable.

Avoid legacy features

Always use runes mode for new code, and avoid features that have more modern replacements:

  • use $state instead of implicit reactivity (e.g. let count = 0; count += 1)
  • use $derived and $effect instead of $: assignments and statements (but only use effects when there is no better solution)
  • use $props instead of export let, $$props and $$restProps
  • use onclick={...} instead of on:click={...}
  • use {#snippet ...} and {@render ...} instead of <slot> and $$slots and <svelte:fragment>
  • use <DynamicComponent> instead of <svelte:component this={DynamicComponent}>
  • use import Self from './ThisComponent.svelte' and <Self> instead of <svelte:self>
  • use classes with $state fields to share reactivity between components, instead of using stores
  • use {@attach ...} instead of use:action
  • use clsx-style arrays and objects in class attributes, instead of the class: directive
PACKAGE TRANSPARENCY

Inspect before installing

Source: Svelte Contributors · MIT · SHA-256 shown alongside the download.

26 files43827 ZIP bytes3 script/code files

License file included. A license and checksum are not a security certification. Review package instructions and scripts before running them.

View files and uncompressed sizes
Machine-readable installation guide →
CATALOG REVIEW NOTES

Know what you need before installing

Source and packaging checks recorded on 2026-10-08. These notes are not safety certification or measured task performance.

Requirements

Compatible Node and separately installed locked Svelte/esbuild dependencies; recorded Node 24.10.0, Svelte 5.57.2, esbuild 0.28.2 and Chrome 154 on Windows. Other original guidance is outside the synthetic fixture.

Costs, access & practical limits

Free MIT resource. Synthetic loopback fixture requires no account, database, credential, paid model or external service. Installing locked dependencies contacts the free public registry separately. Not a performance, hydration, authorization or complete security certification.

View the recorded checks
  • Eleven originals verified by Git blob and SHA-256; ten skill files also match fixed official release
  • Complete MIT attribution and nine local references retained
  • Fifteen compiler/server observations and 23 real Chrome DOM observations passed
  • Unchanged contrast/placeholders intentionally rejected and separated from valid blocks
  • Derived/raw/prop counterexamples and keyed node identity recorded without speed claims
  • Loopback-only synthetic page; no external resource requests or complete AI-client skill execution

Upstream commit: 1a3ba88bba598c6734533c48e23cb5d37424b618

Runtime status: not tested by this catalog. Configure your client and test the skill in your own environment.

LICENSE & ATTRIBUTION

License & attribution

The notices identify their files, attribution and changes. Retain the applicable original notices when adapting or redistributing the package.

MIT ↗

Original official instruction and nine reference files

Attribution: Copyright (c) 2026 Svelte Contributors

Changes: Marked preface added to primary file; original bytes retained

Included notice: svelte-core-bestpractices/LICENSE.upstream.txt

Declared source ↗

MIT ↗

Independent BB Skills preface, synthetic fixture, evidence and packaging

Attribution: Copyright (c) 2026 BB Skills

Changes: Independent local experiment, including deliberate stale-state counterexample

Included notice: svelte-core-bestpractices/LICENSE.bb-skills.txt

Declared source ↗
SCENARIOS

Inputs, criteria and recorded outcomes

Records are supplied by the site administrator and bound to a specific package. They are not third-party safety certification. This page does not execute skills.

Official Svelte blocks and synthetic Chrome reactivity observations

Reported passed · v2026.10.03.bb1

View input and acceptance criteria

Input

Fifteen compiler/server observations and 23 real Chrome DOM observations with Svelte 5.57.2, Node 24.10.0 and esbuild 0.28.2. Eight unchanged original blocks: four contrasts/placeholders intentionally rejected and four valid examples compiled for client/server with synthetic context where required. Independent BB Skills examples test writable derived, deep/raw updates, changed versus frozen props and effect execution. Original keyed loops retain DOM node identity; function binding and CSS directive use synthetic inputs. Loopback-only fixture, programmatic events, no external resource, account, database, paid API or production data. No trusted-input, hydration, performance, accessibility, SvelteKit, cross-user isolation, comprehensive security or complete AI-client skill execution claim.

Acceptance criteria

All 15 compiler/server and 23 DOM observations pass, including explicit block rejection and stale-state counterexamples. Compiler, server and browser evidence remain separate; no full-skill or production claim.

Recorded outcome

Fifteen compiler/server observations and 23 real Chrome DOM observations with Svelte 5.57.2, Node 24.10.0 and esbuild 0.28.2. Eight unchanged original blocks: four contrasts/placeholders intentionally rejected and four valid examples compiled for client/server with synthetic context where required. Independent BB Skills examples test writable derived, deep/raw updates, changed versus frozen props and effect execution. Original keyed loops retain DOM node identity; function binding and CSS directive use synthetic inputs. Loopback-only fixture, programmatic events, no external resource, account, database, paid API or production data. No trusted-input, hydration, performance, accessibility, SvelteKit, cross-user isolation, comprehensive security or complete AI-client skill execution claim.

Compiler/server evidence:
{
  "executed_at": "2026-10-08T02:07:38.282Z",
  "versions": {
    "node": "v24.10.0",
    "svelte": "5.57.2",
    "esbuild": "0.28.2"
  },
  "cases": [
    {
      "name": "unchanged block upstream-original/SKILL.md #0 rejected",
      "status": "passed",
      "actual": "js_parse_error",
      "expected": "js_parse_error"
    },
    {
      "name": "unchanged block upstream-original/SKILL.md #1 rejected",
      "status": "passed",
      "actual": "js_parse_error",
      "expected": "js_parse_error"
    },
    {
      "name": "unchanged block upstream-original/SKILL.md #2 rejected",
      "status": "passed",
      "actual": "js_parse_error",
      "expected": "js_parse_error"
    },
    {
      "name": "unchanged block upstream-original/SKILL.md #3 rejected",
      "status": "passed",
      "actual": "js_parse_error",
      "expected": "js_parse_error"
    },
    {
      "name": "unchanged block upstream-original/SKILL.md #4 compiles client",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged block upstream-original/SKILL.md #4 compiles server",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged block upstream-original/SKILL.md #5 compiles client",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged block upstream-original/SKILL.md #5 compiles server",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged block references/each.md #2 compiles client",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged block references/each.md #2 compiles server",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged block references/bind.md #0 compiles client",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged block references/bind.md #0 compiles server",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged greeting server render contains world",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "synthetic effect does not run during server render",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "frozen prop example emits state_referenced_locally warning",
      "status": "passed",
      "actual": true,
      "expected": true
    }
  ],
  "observations": 15,
  "native_blocks": [
    {
      "source": "upstream-original/SKILL.md",
      "block_index": 0,
      "block_sha256": "f0ef3bfd598d267392262257adabb8ca3d3b4144f01239bc0b6d5a15c40a75c1",
      "wrapper_prefix": "<script>let num=$state(2);\n",
      "wrapper_suffix": "\n</script>",
      "filename": "Native0.svelte",
      "expected_failure": true,
      "diagnostic_code": "js_parse_error"
    },
    {
      "source": "upstream-original/SKILL.md",
      "block_index": 1,
      "block_sha256": "a2da2a483260379156cdd75596d9cf4c94206c190ee79e551a4ef66680393d0f",
      "wrapper_prefix": "<script>\n",
      "wrapper_suffix": "\n</script>",
      "filename": "Native1.svelte",
      "expected_failure": true,
      "diagnostic_code": "js_parse_error"
    },
    {
      "source": "upstream-original/SKILL.md",
      "block_index": 2,
      "block_sha256": "bb34890bcef8c62f2373a2deeb56ab661681bc8422c855dec017cf42d23d782a",
      "wrapper_prefix": "",
      "wrapper_suffix": "",
      "filename": "Native2.svelte",
      "expected_failure": true,
      "diagnostic_code": "js_parse_error"
    },
    {
      "source": "upstream-original/SKILL.md",
      "block_index": 3,
      "block_sha256": "45179305a8bb2a183f8788d27f59d4163689f25ae90640b74f78fa9ff30c1eeb",
      "wrapper_prefix": "",
      "wrapper_suffix": "",
      "filename": "Native3.svelte",
      "expected_failure": true,
      "diagnostic_code": "js_parse_error"
    },
    {
      "source": "upstream-original/SKILL.md",
      "block_index": 4,
      "block_sha256": "b19fb924d6dce7dbd25c4a670ad8d1b85441037fdcfc8f3d5e86a4af9c3ca1ab",
      "wrapper_prefix": "",
      "wrapper_suffix": "",
      "filename": "Native4.svelte",
      "expected_failure": false
    },
    {
      "source": "upstream-original/SKILL.md",
      "block_index": 5,
      "block_sha256": "7621e21cf818406003cf25ee2547467dda654593c73510d79d2b1ab8fb504169",
      "wrapper_prefix": "<script>let {columns}=$props();</script>\n",
      "wrapper_suffix": "",
      "filename": "Native5.svelte",
      "expected_failure": false
    },
    {
      "source": "references/each.md",
      "block_index": 2,
      "block_sha256": "44bcafdfb044ea465d40d056f91d1832d3636df3decab6de58f085ca0e506c63",
      "wrapper_prefix": "<script>let {items}=$props();</script>\n",
      "wrapper_suffix": "",
      "filename": "Native6.svelte",
      "expected_failure": false
    },
    {
      "source": "references/bind.md",
      "block_index": 0,
      "block_sha256": "ece89de12dd670724ae1a202bc737acf1d2520a62e0defffdcd17fd2b707449f",
      "wrapper_prefix": "<script>let value=$state(\"start\");</script>\n",
      "wrapper_suffix": "\n<output id=\"binding-result\">{value}</output>",
      "filename": "Native7.svelte",
      "expected_failure": false
    }
  ],
  "diagnostics": [
    {
      "filename": "Props.svelte",
      "mode": "client",
      "code": "state_referenced_locally"
    }
  ],
  "source_hashes": {
    "examples/build_fixture.mjs": "a6d7e61cdfc0206db20a36e07cd41f246fb7ef7441b02c3d3ccd5d7c4e1bbbed",
    "examples/client_checks.js": "d3c362cb50609989a5557d345ebf3c6200fe402e6a59e4342ee063e3ad8d6e3e",
    "examples/serve_fixture.mjs": "469f5154393992eb5c5de4d75d2348d6328b2e75f65b2dbb23889d283ed257fd"
  },
  "bundle_sha256": "06e61bb9b04c9b4bcbddf3c3b25108a086bed22a201da1d05efa09794ee620e1",
  "runtime_tested": false,
  "ai_client_executed": false,
  "production_tested": false,
  "paid_api_used": false,
  "external_services_used": false,
  "scope": "Compiler acceptance/rejection and two server renders; browser DOM evidence is separate. Documentation contrasts/placeholders are intentionally rejected unchanged; wrappers supply synthetic declarations to complete examples."
}

Browser DOM evidence:
{
  "executed_at": "2026-10-08T02:08:06.882Z",
  "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/154.0.0.0 Safari/537.36",
  "cases": [
    {
      "name": "unchanged greeting renders in browser",
      "status": "passed",
      "actual": "hello world!",
      "expected": "hello world!"
    },
    {
      "name": "synthetic derived initial square",
      "status": "passed",
      "actual": "4",
      "expected": "4"
    },
    {
      "name": "event handler updates state",
      "status": "passed",
      "actual": "3",
      "expected": "3"
    },
    {
      "name": "derived updates with dependency",
      "status": "passed",
      "actual": "9",
      "expected": "9"
    },
    {
      "name": "writable derived accepts local override",
      "status": "passed",
      "actual": "99",
      "expected": "99"
    },
    {
      "name": "dependency change replaces derived override",
      "status": "passed",
      "actual": "16",
      "expected": "16"
    },
    {
      "name": "deep state mutation updates DOM",
      "status": "passed",
      "actual": "2",
      "expected": "2"
    },
    {
      "name": "raw nested mutation leaves displayed value unchanged",
      "status": "passed",
      "actual": "1",
      "expected": "1"
    },
    {
      "name": "raw reassignment updates displayed value",
      "status": "passed",
      "actual": "7",
      "expected": "7"
    },
    {
      "name": "derived prop starts green",
      "status": "passed",
      "actual": "green",
      "expected": "green"
    },
    {
      "name": "deliberate frozen prop starts green",
      "status": "passed",
      "actual": "green",
      "expected": "green"
    },
    {
      "name": "derived prop follows changed input",
      "status": "passed",
      "actual": "red",
      "expected": "red"
    },
    {
      "name": "deliberate frozen prop stays stale",
      "status": "passed",
      "actual": "green",
      "expected": "green"
    },
    {
      "name": "two original keyed loops render six items",
      "status": "passed",
      "actual": 6,
      "expected": 6
    },
    {
      "name": "original keyed first loop moves existing node",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "original keyed second loop moves existing node",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "reordered key retains visible data",
      "status": "passed",
      "actual": "Gamma x 3",
      "expected": "Gamma x 3"
    },
    {
      "name": "removed key removes both loop entries",
      "status": "passed",
      "actual": 4,
      "expected": 4
    },
    {
      "name": "retained keyed node survives removal",
      "status": "passed",
      "actual": true,
      "expected": true
    },
    {
      "name": "unchanged CSS directive receives synthetic initial value",
      "status": "passed",
      "actual": "2",
      "expected": "2"
    },
    {
      "name": "CSS directive follows changed prop",
      "status": "passed",
      "actual": "4",
      "expected": "4"
    },
    {
      "name": "unchanged function binding transforms synthetic input",
      "status": "passed",
      "actual": "mixed",
      "expected": "mixed"
    },
    {
      "name": "synthetic effect runs in browser",
      "status": "passed",
      "actual": "1",
      "expected": "1"
    }
  ],
  "observations": 23,
  "runtime_tested": false,
  "ai_client_executed": false,
  "production_tested": false,
  "paid_api_used": false,
  "external_services_used": false,
  "scope": "Real Chrome DOM on a loopback-only synthetic fixture. Programmatic clicks and input event; not trusted-input, hydration, accessibility, performance, SSR isolation, SvelteKit or full skill execution evidence.",
  "loaded_resources": [
    "http://127.0.0.1:5851/bundle.js"
  ],
  "external_resource_requests": 0,
  "fixture_url": "http://127.0.0.1:5851/",
  "compiler_evidence_sha256": "b94eb3ad6a5e03043cc88ce5ec88e19b21f72f7285172902ad76e7aa98d52765",
  "bundle_sha256": "06e61bb9b04c9b4bcbddf3c3b25108a086bed22a201da1d05efa09794ee620e1",
  "browser_adapter_sha256": "29c7feeb6636ae3981e1ad94d2a4f1c8a4f30a31649d68bde9faa75c6f742544",
  "browser_configuration": {
    "executable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    "user_data_dir": "E:\\newWork\\Ai\\aiPrompt\\Xuser\\browser_data",
    "profile": "Default",
    "verified_pid": 45744,
    "cookies_or_credentials_exported": false
  }
}

Environment

Windows; Node 24.10.0; Svelte 5.57.2; esbuild 0.28.2; Chrome 154; requested executable and persistent Default profile. Synthetic loopback server on 127.0.0.1:5851; no user data, credentials or paid service.

Package SHA-256: 5d6f9cacdedb856ce86c1523cce25a9be6a86f6152fc7eb8ac12f26fa0f7d627

Outcome recorded: 2026-10-08 02:08 UTC

Open evidence ↗

Community reviews

★ New

Be the first to share your experience.

Sign in to leave a review →

Guides using this resource

All guides →
Practical guide

Astro contributor checks: runtime boundaries and isolated builds

Check Astro contributor guidance with real lint and build evidence: distinguish Node API boundaries, runnable examples, shallow immutability and separate build outputs.

By BB Skills · Read guide →Practical guide

Svelte 5 reactivity: props, keyed lists and browser evidence

Debug Svelte 5 reactivity with a version-pinned official skill: distinguish compiler diagnostics from browser behavior, test changing props and verify keyed DOM identity.

By BB Skills · Read guide →
View all ↗

Links use published guide associations and catalog labels. Inspect each resource’s requirements and license.