diff --git a/documentation/docs/01-introduction/01-overview.md b/documentation/docs/01-introduction/01-overview.md
index 5acbe4897bf5..eb555f5d3aad 100644
--- a/documentation/docs/01-introduction/01-overview.md
+++ b/documentation/docs/01-introduction/01-overview.md
@@ -1,5 +1,6 @@
 ---
 title: Overview
+use_cases: "always: understanding Svelte fundamentals, component-based architecture, reactive UI framework basics"
 ---
 
 Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...
diff --git a/documentation/docs/01-introduction/02-getting-started.md b/documentation/docs/01-introduction/02-getting-started.md
index e97a46ad34a8..ec1a7779b433 100644
--- a/documentation/docs/01-introduction/02-getting-started.md
+++ b/documentation/docs/01-introduction/02-getting-started.md
@@ -1,5 +1,6 @@
 ---
 title: Getting started
+use_cases: "always: project setup, creating new Svelte apps, configuring build tools, initial development environment"
 ---
 
 We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:
diff --git a/documentation/docs/01-introduction/03-svelte-files.md b/documentation/docs/01-introduction/03-svelte-files.md
index cd98652370f3..600303ced1bc 100644
--- a/documentation/docs/01-introduction/03-svelte-files.md
+++ b/documentation/docs/01-introduction/03-svelte-files.md
@@ -1,5 +1,6 @@
 ---
 title: .svelte files
+use_cases: "always: component structure, organizing HTML/CSS/JavaScript, single-file components, component templates"
 ---
 
 Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
diff --git a/documentation/docs/01-introduction/04-svelte-js-files.md b/documentation/docs/01-introduction/04-svelte-js-files.md
index 1d3e3dd61a8a..75bd48ee8fcd 100644
--- a/documentation/docs/01-introduction/04-svelte-js-files.md
+++ b/documentation/docs/01-introduction/04-svelte-js-files.md
@@ -1,5 +1,6 @@
 ---
 title: .svelte.js and .svelte.ts files
+use_cases: "reusable reactive logic, shared state modules, composable reactive utilities, reactive helper functions"
 ---
 
 Besides `.svelte` files, Svelte also operates on `.svelte.js` and `.svelte.ts` files.
diff --git a/documentation/docs/02-runes/01-what-are-runes.md b/documentation/docs/02-runes/01-what-are-runes.md
index 59c371eb4909..9cf3b4072af3 100644
--- a/documentation/docs/02-runes/01-what-are-runes.md
+++ b/documentation/docs/02-runes/01-what-are-runes.md
@@ -1,5 +1,6 @@
 ---
 title: What are runes?
+use_cases: "always: understanding Svelte 5 reactivity, reactive primitives, modern Svelte syntax"
 ---
 
 > [!NOTE] **rune** /ruːn/ _noun_
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 741e24fde01e..f6006023d2e2 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -1,5 +1,6 @@
 ---
 title: $state
+use_cases: "always: reactive variables, component state management, form inputs, counters, toggles, data models"
 ---
 
 The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.
diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 0123868c4e5e..052e958961c2 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -1,5 +1,6 @@
 ---
 title: $derived
+use_cases: "computed values, calculated properties, derived state, reactive expressions, data transformations"
 ---
 
 Derived state is declared with the `$derived` rune:
diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index 6c42f557951c..2d4972a903e0 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -1,5 +1,6 @@
 ---
 title: $effect
+use_cases: "side effects, API calls, DOM manipulation, third-party library integration, analytics, canvas drawing, websockets"
 ---
 
 Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.
diff --git a/documentation/docs/02-runes/05-$props.md b/documentation/docs/02-runes/05-$props.md
index 222b4831b65a..5de41dcfb488 100644
--- a/documentation/docs/02-runes/05-$props.md
+++ b/documentation/docs/02-runes/05-$props.md
@@ -1,5 +1,6 @@
 ---
 title: $props
+use_cases: "always: component inputs, parent-child communication, prop validation, default values, component APIs"
 ---
 
 The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
diff --git a/documentation/docs/02-runes/06-$bindable.md b/documentation/docs/02-runes/06-$bindable.md
index c12c2bf4903e..61d1789b4ec0 100644
--- a/documentation/docs/02-runes/06-$bindable.md
+++ b/documentation/docs/02-runes/06-$bindable.md
@@ -1,5 +1,6 @@
 ---
 title: $bindable
+use_cases: "two-way binding, form components, controlled inputs, synchronized state, custom input components"
 ---
 
 Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.
diff --git a/documentation/docs/02-runes/07-$inspect.md b/documentation/docs/02-runes/07-$inspect.md
index 13ac8b79a33a..aa6082f7fb9e 100644
--- a/documentation/docs/02-runes/07-$inspect.md
+++ b/documentation/docs/02-runes/07-$inspect.md
@@ -1,5 +1,6 @@
 ---
 title: $inspect
+use_cases: "development only: debugging reactive state, logging state changes, development tools"
 ---
 
 > [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
diff --git a/documentation/docs/02-runes/08-$host.md b/documentation/docs/02-runes/08-$host.md
index ba6f0a5b5b40..5b35d271f691 100644
--- a/documentation/docs/02-runes/08-$host.md
+++ b/documentation/docs/02-runes/08-$host.md
@@ -1,5 +1,6 @@
 ---
 title: $host
+use_cases: "web components, custom elements, dispatching custom events, component libraries"
 ---
 
 When compiling a component as a [custom element](custom-elements), the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
diff --git a/documentation/docs/03-template-syntax/01-basic-markup.md b/documentation/docs/03-template-syntax/01-basic-markup.md
index feecfe033e63..c95737ec75cd 100644
--- a/documentation/docs/03-template-syntax/01-basic-markup.md
+++ b/documentation/docs/03-template-syntax/01-basic-markup.md
@@ -1,5 +1,6 @@
 ---
 title: Basic markup
+use_cases: "always: HTML templates, component structure, attributes, events, text interpolation"
 ---
 
 Markup inside a Svelte component can be thought of as HTML++.
diff --git a/documentation/docs/03-template-syntax/02-if.md b/documentation/docs/03-template-syntax/02-if.md
index 1378733e6f29..eee7c9fde503 100644
--- a/documentation/docs/03-template-syntax/02-if.md
+++ b/documentation/docs/03-template-syntax/02-if.md
@@ -1,5 +1,6 @@
 ---
 title: {#if ...}
+use_cases: "conditional rendering, showing/hiding elements, user permissions, feature flags, loading states"
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md
index 006cadd15257..719122922596 100644
--- a/documentation/docs/03-template-syntax/03-each.md
+++ b/documentation/docs/03-template-syntax/03-each.md
@@ -1,5 +1,6 @@
 ---
 title: {#each ...}
+use_cases: "lists, arrays, iterations, product listings, user lists, data tables, galleries, menus"
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/04-key.md b/documentation/docs/03-template-syntax/04-key.md
index 10b6ab435824..3299f99b0cd4 100644
--- a/documentation/docs/03-template-syntax/04-key.md
+++ b/documentation/docs/03-template-syntax/04-key.md
@@ -1,5 +1,6 @@
 ---
 title: {#key ...}
+use_cases: "forcing re-renders, resetting component state, animations on value change"
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/05-await.md b/documentation/docs/03-template-syntax/05-await.md
index 842b3c7e325d..2470835679b6 100644
--- a/documentation/docs/03-template-syntax/05-await.md
+++ b/documentation/docs/03-template-syntax/05-await.md
@@ -1,5 +1,6 @@
 ---
 title: {#await ...}
+use_cases: "async data fetching, loading states, error handling, API calls, promises"
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/06-snippet.md b/documentation/docs/03-template-syntax/06-snippet.md
index 02f58e0f6c8d..f0081fce0e0a 100644
--- a/documentation/docs/03-template-syntax/06-snippet.md
+++ b/documentation/docs/03-template-syntax/06-snippet.md
@@ -1,5 +1,6 @@
 ---
 title: {#snippet ...}
+use_cases: "reusable markup, component composition, render props, slot alternatives, template patterns"
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/07-@render.md b/documentation/docs/03-template-syntax/07-@render.md
index ecdf5cc216fc..7bd47807af75 100644
--- a/documentation/docs/03-template-syntax/07-@render.md
+++ b/documentation/docs/03-template-syntax/07-@render.md
@@ -1,5 +1,6 @@
 ---
 title: {@render ...}
+use_cases: "rendering snippets, dynamic content, component composition"
 ---
 
 To render a [snippet](snippet), use a `{@render ...}` tag.
diff --git a/documentation/docs/03-template-syntax/08-@html.md b/documentation/docs/03-template-syntax/08-@html.md
index 6d8a8be0c6ac..792886ccbcc2 100644
--- a/documentation/docs/03-template-syntax/08-@html.md
+++ b/documentation/docs/03-template-syntax/08-@html.md
@@ -1,5 +1,6 @@
 ---
 title: {@html ...}
+use_cases: "raw HTML rendering, CMS content, markdown rendering, rich text, third-party HTML"
 ---
 
 To inject raw HTML into your component, use the `{@html ...}` tag:
diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
index b25fbb32a678..3b0bbaacd7b4 100644
--- a/documentation/docs/03-template-syntax/09-@attach.md
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -1,5 +1,6 @@
 ---
 title: {@attach ...}
+use_cases: "DOM manipulation, third-party libraries, tooltips, popovers, advanced interactions"
 ---
 
 Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.
diff --git a/documentation/docs/03-template-syntax/10-@const.md b/documentation/docs/03-template-syntax/10-@const.md
index 2a587b7a3d7c..67beec9cd9d1 100644
--- a/documentation/docs/03-template-syntax/10-@const.md
+++ b/documentation/docs/03-template-syntax/10-@const.md
@@ -1,5 +1,6 @@
 ---
 title: {@const ...}
+use_cases: "template calculations, local variables in loops, derived values in blocks"
 ---
 
 The `{@const ...}` tag defines a local constant.
diff --git a/documentation/docs/03-template-syntax/11-@debug.md b/documentation/docs/03-template-syntax/11-@debug.md
index 15e32dcae99f..422108849a12 100644
--- a/documentation/docs/03-template-syntax/11-@debug.md
+++ b/documentation/docs/03-template-syntax/11-@debug.md
@@ -1,5 +1,6 @@
 ---
 title: {@debug ...}
+use_cases: "development only: debugging templates, inspecting values, troubleshooting"
 ---
 
 The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md
index de57815687dc..f35b91477a0b 100644
--- a/documentation/docs/03-template-syntax/12-bind.md
+++ b/documentation/docs/03-template-syntax/12-bind.md
@@ -1,5 +1,6 @@
 ---
 title: bind:
+use_cases: "forms, inputs, two-way binding, checkboxes, selects, textareas, media elements, dimensions"
 ---
 
 Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
diff --git a/documentation/docs/03-template-syntax/13-use.md b/documentation/docs/03-template-syntax/13-use.md
index 5f5321a1c09f..f6381c6ae14b 100644
--- a/documentation/docs/03-template-syntax/13-use.md
+++ b/documentation/docs/03-template-syntax/13-use.md
@@ -1,5 +1,6 @@
 ---
 title: use:
+use_cases: "third-party integrations, DOM libraries, custom directives, legacy code integration"
 ---
 
 > [!NOTE]
diff --git a/documentation/docs/03-template-syntax/14-transition.md b/documentation/docs/03-template-syntax/14-transition.md
index c51175c272bc..2b83e847200b 100644
--- a/documentation/docs/03-template-syntax/14-transition.md
+++ b/documentation/docs/03-template-syntax/14-transition.md
@@ -1,5 +1,6 @@
 ---
 title: transition:
+use_cases: "animations, page transitions, element enter/leave effects, smooth UI changes"
 ---
 
 A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.
diff --git a/documentation/docs/03-template-syntax/15-in-and-out.md b/documentation/docs/03-template-syntax/15-in-and-out.md
index f4e37c845ee8..0911fca588e4 100644
--- a/documentation/docs/03-template-syntax/15-in-and-out.md
+++ b/documentation/docs/03-template-syntax/15-in-and-out.md
@@ -1,5 +1,6 @@
 ---
 title: in: and out:
+use_cases: "asymmetric animations, different enter/exit effects, one-way transitions"
 ---
 
 The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
diff --git a/documentation/docs/03-template-syntax/16-animate.md b/documentation/docs/03-template-syntax/16-animate.md
index a54e37f0b12d..78190fad95bb 100644
--- a/documentation/docs/03-template-syntax/16-animate.md
+++ b/documentation/docs/03-template-syntax/16-animate.md
@@ -1,5 +1,6 @@
 ---
 title: animate:
+use_cases: "list reordering animations, drag and drop, sortable lists, smooth transitions"
 ---
 
 An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
diff --git a/documentation/docs/03-template-syntax/17-style.md b/documentation/docs/03-template-syntax/17-style.md
index aa61cdcde35e..269060268f05 100644
--- a/documentation/docs/03-template-syntax/17-style.md
+++ b/documentation/docs/03-template-syntax/17-style.md
@@ -1,5 +1,6 @@
 ---
 title: style:
+use_cases: "dynamic styles, inline CSS, responsive design, theming, style calculations"
 ---
 
 The `style:` directive provides a shorthand for setting multiple styles on an element.
diff --git a/documentation/docs/03-template-syntax/18-class.md b/documentation/docs/03-template-syntax/18-class.md
index db85db4b37f4..ecce2e54ddcf 100644
--- a/documentation/docs/03-template-syntax/18-class.md
+++ b/documentation/docs/03-template-syntax/18-class.md
@@ -1,5 +1,6 @@
 ---
 title: class
+use_cases: "dynamic CSS classes, conditional styling, state-based styles, utility classes"
 ---
 
 There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.
diff --git a/documentation/docs/03-template-syntax/19-await-expressions.md b/documentation/docs/03-template-syntax/19-await-expressions.md
index d3896a5c4e68..5dcfa09e3165 100644
--- a/documentation/docs/03-template-syntax/19-await-expressions.md
+++ b/documentation/docs/03-template-syntax/19-await-expressions.md
@@ -1,5 +1,6 @@
 ---
 title: await
+use_cases: "async components, SSR with async data, synchronized UI updates, data fetching"
 ---
 
 As of Svelte 5.36, you can use the `await` keyword inside your components in three places where it was previously unavailable:
diff --git a/documentation/docs/04-styling/01-scoped-styles.md b/documentation/docs/04-styling/01-scoped-styles.md
index eae26d0cb1ca..e9817404e681 100644
--- a/documentation/docs/04-styling/01-scoped-styles.md
+++ b/documentation/docs/04-styling/01-scoped-styles.md
@@ -1,5 +1,6 @@
 ---
 title: Scoped styles
+use_cases: "always: component-specific styles, CSS encapsulation, preventing style conflicts"
 ---
 
 Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.
diff --git a/documentation/docs/04-styling/02-global-styles.md b/documentation/docs/04-styling/02-global-styles.md
index 8e9cf8d0cbec..052cd52ae662 100644
--- a/documentation/docs/04-styling/02-global-styles.md
+++ b/documentation/docs/04-styling/02-global-styles.md
@@ -1,5 +1,6 @@
 ---
 title: Global styles
+use_cases: "app-wide styles, CSS resets, typography, third-party CSS integration"
 ---
 
 ## :global(...)
diff --git a/documentation/docs/04-styling/03-custom-properties.md b/documentation/docs/04-styling/03-custom-properties.md
index 49984c6ce4bc..5e0b7f77d4ac 100644
--- a/documentation/docs/04-styling/03-custom-properties.md
+++ b/documentation/docs/04-styling/03-custom-properties.md
@@ -1,5 +1,6 @@
 ---
 title: Custom properties
+use_cases: "theming, design tokens, dynamic CSS variables, component customization"
 ---
 
 You can pass CSS custom properties — both static and dynamic — to components:
diff --git a/documentation/docs/04-styling/04-nested-style-elements.md b/documentation/docs/04-styling/04-nested-style-elements.md
index 4fc5cfa5213a..73cff03427ec 100644
--- a/documentation/docs/04-styling/04-nested-style-elements.md
+++ b/documentation/docs/04-styling/04-nested-style-elements.md
@@ -1,5 +1,6 @@
 ---
 title: Nested <style> elements
+use_cases: "dynamic runtime styles, conditional CSS, user-generated styles"
 ---
 
 There can only be one top-level `<style>` tag per component.
diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
index 3e91af5d835d..b84e078cf0ff 100644
--- a/documentation/docs/05-special-elements/01-svelte-boundary.md
+++ b/documentation/docs/05-special-elements/01-svelte-boundary.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:boundary>
+use_cases: "error boundaries, async loading states, error handling, resilient UIs"
 ---
 
 ```svelte
diff --git a/documentation/docs/05-special-elements/02-svelte-window.md b/documentation/docs/05-special-elements/02-svelte-window.md
index d4aab36f3b27..aaed18ceb3d1 100644
--- a/documentation/docs/05-special-elements/02-svelte-window.md
+++ b/documentation/docs/05-special-elements/02-svelte-window.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:window>
+use_cases: "window events, scroll handling, keyboard shortcuts, resize detection, online/offline"
 ---
 
 ```svelte
diff --git a/documentation/docs/05-special-elements/03-svelte-document.md b/documentation/docs/05-special-elements/03-svelte-document.md
index 43f02865e6ef..6ada50bbfa9c 100644
--- a/documentation/docs/05-special-elements/03-svelte-document.md
+++ b/documentation/docs/05-special-elements/03-svelte-document.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:document>
+use_cases: "document events, visibility changes, fullscreen handling, global clicks"
 ---
 
 ```svelte
diff --git a/documentation/docs/05-special-elements/04-svelte-body.md b/documentation/docs/05-special-elements/04-svelte-body.md
index c6828b98f7d2..dae897d080cf 100644
--- a/documentation/docs/05-special-elements/04-svelte-body.md
+++ b/documentation/docs/05-special-elements/04-svelte-body.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:body>
+use_cases: "body events, mouse enter/leave, global interactions, body classes"
 ---
 
 ```svelte
diff --git a/documentation/docs/05-special-elements/05-svelte-head.md b/documentation/docs/05-special-elements/05-svelte-head.md
index f7cd7ca20a58..08d3a07448ac 100644
--- a/documentation/docs/05-special-elements/05-svelte-head.md
+++ b/documentation/docs/05-special-elements/05-svelte-head.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:head>
+use_cases: "SEO, meta tags, page titles, OpenGraph, structured data, external scripts"
 ---
 
 ```svelte
diff --git a/documentation/docs/05-special-elements/06-svelte-element.md b/documentation/docs/05-special-elements/06-svelte-element.md
index ef7dc320662f..814fbf2afafb 100644
--- a/documentation/docs/05-special-elements/06-svelte-element.md
+++ b/documentation/docs/05-special-elements/06-svelte-element.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:element>
+use_cases: "dynamic HTML elements, CMS rendering, configurable components, polymorphic components"
 ---
 
 ```svelte
diff --git a/documentation/docs/05-special-elements/07-svelte-options.md b/documentation/docs/05-special-elements/07-svelte-options.md
index a2e47aa04fc6..b075ce581fa4 100644
--- a/documentation/docs/05-special-elements/07-svelte-options.md
+++ b/documentation/docs/05-special-elements/07-svelte-options.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:options>
+use_cases: "component configuration, custom elements setup, compiler options, namespace settings"
 ---
 
 ```svelte
diff --git a/documentation/docs/06-runtime/01-stores.md b/documentation/docs/06-runtime/01-stores.md
index 12d5576b407c..7cfaa7262eef 100644
--- a/documentation/docs/06-runtime/01-stores.md
+++ b/documentation/docs/06-runtime/01-stores.md
@@ -1,5 +1,6 @@
 ---
 title: Stores
+use_cases: "reactive state management, cross-component state, async data streams, RxJS patterns"
 ---
 
 <!-- - how to use
diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md
index f395de421cff..d5469ee2eae6 100644
--- a/documentation/docs/06-runtime/02-context.md
+++ b/documentation/docs/06-runtime/02-context.md
@@ -1,5 +1,6 @@
 ---
 title: Context
+use_cases: "component communication, dependency injection, avoiding prop drilling, theme providers"
 ---
 
 Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling'). The parent component sets context with `setContext(key, value)`...
diff --git a/documentation/docs/06-runtime/03-lifecycle-hooks.md b/documentation/docs/06-runtime/03-lifecycle-hooks.md
index f7a78beec92c..ae197858b81f 100644
--- a/documentation/docs/06-runtime/03-lifecycle-hooks.md
+++ b/documentation/docs/06-runtime/03-lifecycle-hooks.md
@@ -1,5 +1,6 @@
 ---
 title: Lifecycle hooks
+use_cases: "initialization logic, cleanup, DOM access, third-party library setup"
 ---
 
 <!-- - onMount/onDestroy
diff --git a/documentation/docs/06-runtime/04-imperative-component-api.md b/documentation/docs/06-runtime/04-imperative-component-api.md
index 16a2c8151cad..89bb335b56dd 100644
--- a/documentation/docs/06-runtime/04-imperative-component-api.md
+++ b/documentation/docs/06-runtime/04-imperative-component-api.md
@@ -1,5 +1,6 @@
 ---
 title: Imperative component API
+use_cases: "programmatic component control, testing, framework integration, dynamic component creation"
 ---
 
 <!-- better title needed?
diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md
index 23e2e023d34c..bbaa92255bfb 100644
--- a/documentation/docs/07-misc/02-testing.md
+++ b/documentation/docs/07-misc/02-testing.md
@@ -1,5 +1,6 @@
 ---
 title: Testing
+use_cases: "unit testing, integration testing, E2E testing, test-driven development, CI/CD"
 ---
 
 Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).
diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index 49ecd8adb5bf..d37073eabc30 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -1,5 +1,6 @@
 ---
 title: TypeScript
+use_cases: "type safety, IDE support, component APIs, prop validation, large applications"
 ---
 
 <!-- - [basically what we have today](https://svelte.dev/docs/typescript)
diff --git a/documentation/docs/07-misc/04-custom-elements.md b/documentation/docs/07-misc/04-custom-elements.md
index 4e5afff7d251..c808ffc9f0a0 100644
--- a/documentation/docs/07-misc/04-custom-elements.md
+++ b/documentation/docs/07-misc/04-custom-elements.md
@@ -1,5 +1,6 @@
 ---
 title: Custom elements
+use_cases: "web components, framework-agnostic components, micro-frontends, design systems"
 ---
 
 <!-- - [basically what we have today](https://svelte.dev/docs/custom-elements-api) -->
diff --git a/documentation/docs/07-misc/06-v4-migration-guide.md b/documentation/docs/07-misc/06-v4-migration-guide.md
index 484931f20a32..c19638c0d43f 100644
--- a/documentation/docs/07-misc/06-v4-migration-guide.md
+++ b/documentation/docs/07-misc/06-v4-migration-guide.md
@@ -1,5 +1,6 @@
 ---
 title: Svelte 4 migration guide
+use_cases: "upgrading from Svelte 3, migration, breaking changes, version updates"
 ---
 
 This migration guide provides an overview of how to migrate from Svelte version 3 to 4. See the linked PRs for more details about each change. Use the migration script to migrate some of these automatically: `npx svelte-migrate@latest svelte-4`
diff --git a/documentation/docs/07-misc/99-faq.md b/documentation/docs/07-misc/99-faq.md
index cf98cdd3c3f1..777df0fb6c71 100644
--- a/documentation/docs/07-misc/99-faq.md
+++ b/documentation/docs/07-misc/99-faq.md
@@ -1,5 +1,6 @@
 ---
 title: Frequently asked questions
+use_cases: "troubleshooting, best practices, common questions, learning resources"
 ---
 
 ## I'm new to Svelte. Where should I start?
diff --git a/documentation/docs/98-reference/20-svelte.md b/documentation/docs/98-reference/20-svelte.md
index 3295ab68de65..84682c7a5a74 100644
--- a/documentation/docs/98-reference/20-svelte.md
+++ b/documentation/docs/98-reference/20-svelte.md
@@ -1,5 +1,6 @@
 ---
 title: svelte
+use_cases: "always: main API reference, core functions, component utilities"
 ---
 
 > MODULE: svelte
diff --git a/documentation/docs/98-reference/21-svelte-action.md b/documentation/docs/98-reference/21-svelte-action.md
index ef3ebfbf7052..510123f6f77a 100644
--- a/documentation/docs/98-reference/21-svelte-action.md
+++ b/documentation/docs/98-reference/21-svelte-action.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/action
+use_cases: "legacy actions, DOM manipulation, typing actions"
 ---
 
 This module provides types for [actions](use), which have been superseded by [attachments](@attach).
diff --git a/documentation/docs/98-reference/21-svelte-animate.md b/documentation/docs/98-reference/21-svelte-animate.md
index e8f135d07de0..9747fb9d820d 100644
--- a/documentation/docs/98-reference/21-svelte-animate.md
+++ b/documentation/docs/98-reference/21-svelte-animate.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/animate
+use_cases: "flip animations, list transitions, keyed blocks"
 ---
 
 > MODULE: svelte/animate
diff --git a/documentation/docs/98-reference/21-svelte-attachments.md b/documentation/docs/98-reference/21-svelte-attachments.md
index e446bdddc2dc..c9d9dcc40462 100644
--- a/documentation/docs/98-reference/21-svelte-attachments.md
+++ b/documentation/docs/98-reference/21-svelte-attachments.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/attachments
+use_cases: "DOM manipulation, third-party libraries, modern alternative to actions"
 ---
 
 > MODULE: svelte/attachments
diff --git a/documentation/docs/98-reference/21-svelte-compiler.md b/documentation/docs/98-reference/21-svelte-compiler.md
index a6cc99d3b155..2a04dbf44a17 100644
--- a/documentation/docs/98-reference/21-svelte-compiler.md
+++ b/documentation/docs/98-reference/21-svelte-compiler.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/compiler
+use_cases: "build tools, preprocessors, custom compilation, bundler plugins"
 ---
 
 > MODULE: svelte/compiler
diff --git a/documentation/docs/98-reference/21-svelte-easing.md b/documentation/docs/98-reference/21-svelte-easing.md
index 3f47963cde9a..27135a5d28dd 100644
--- a/documentation/docs/98-reference/21-svelte-easing.md
+++ b/documentation/docs/98-reference/21-svelte-easing.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/easing
+use_cases: "animation curves, transition timing, smooth animations"
 ---
 
 > MODULE: svelte/easing
diff --git a/documentation/docs/98-reference/21-svelte-events.md b/documentation/docs/98-reference/21-svelte-events.md
index 00c7a14ee203..82d30d8b831b 100644
--- a/documentation/docs/98-reference/21-svelte-events.md
+++ b/documentation/docs/98-reference/21-svelte-events.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/events
+use_cases: "event handling, event delegation, custom events"
 ---
 
 > MODULE: svelte/events
diff --git a/documentation/docs/98-reference/21-svelte-legacy.md b/documentation/docs/98-reference/21-svelte-legacy.md
index f313baca0b45..7e05093fba30 100644
--- a/documentation/docs/98-reference/21-svelte-legacy.md
+++ b/documentation/docs/98-reference/21-svelte-legacy.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/legacy
+use_cases: "migration helpers, backwards compatibility, gradual migration"
 ---
 
 This module provides various functions for use during the migration, since some features can't be replaced one to one with new features. All imports are marked as deprecated and should be migrated away from over time.
diff --git a/documentation/docs/98-reference/21-svelte-motion.md b/documentation/docs/98-reference/21-svelte-motion.md
index f1d5a6ce5757..ee4098a79ff0 100644
--- a/documentation/docs/98-reference/21-svelte-motion.md
+++ b/documentation/docs/98-reference/21-svelte-motion.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/motion
+use_cases: "spring animations, tweened values, physics-based animations"
 ---
 
 > MODULE: svelte/motion
diff --git a/documentation/docs/98-reference/21-svelte-reactivity-window.md b/documentation/docs/98-reference/21-svelte-reactivity-window.md
index cc544dc5ba3f..6d772764d837 100644
--- a/documentation/docs/98-reference/21-svelte-reactivity-window.md
+++ b/documentation/docs/98-reference/21-svelte-reactivity-window.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/reactivity/window
+use_cases: "window properties, reactive viewport dimensions, scroll position"
 ---
 
 This module exports reactive versions of various `window` values, each of which has a reactive `current` property that you can reference in reactive contexts (templates, [deriveds]($derived) and [effects]($effect)) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners.
diff --git a/documentation/docs/98-reference/21-svelte-reactivity.md b/documentation/docs/98-reference/21-svelte-reactivity.md
index 8070331f481b..d0f49e0a8cfa 100644
--- a/documentation/docs/98-reference/21-svelte-reactivity.md
+++ b/documentation/docs/98-reference/21-svelte-reactivity.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/reactivity
+use_cases: "reactive collections, Map/Set alternatives, reactive URLs, reactive utilities"
 ---
 
 Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity.
diff --git a/documentation/docs/98-reference/21-svelte-server.md b/documentation/docs/98-reference/21-svelte-server.md
index 7a3fc3c6a2ba..c553c315625c 100644
--- a/documentation/docs/98-reference/21-svelte-server.md
+++ b/documentation/docs/98-reference/21-svelte-server.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/server
+use_cases: "SSR, server-side rendering, static generation"
 ---
 
 > MODULE: svelte/server
diff --git a/documentation/docs/98-reference/21-svelte-store.md b/documentation/docs/98-reference/21-svelte-store.md
index 23ff6c5e376f..4e0992660b1c 100644
--- a/documentation/docs/98-reference/21-svelte-store.md
+++ b/documentation/docs/98-reference/21-svelte-store.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/store
+use_cases: "writable stores, readable stores, derived stores, store contract"
 ---
 
 > MODULE: svelte/store
diff --git a/documentation/docs/98-reference/21-svelte-transition.md b/documentation/docs/98-reference/21-svelte-transition.md
index 396bc0aebf69..21c196aca891 100644
--- a/documentation/docs/98-reference/21-svelte-transition.md
+++ b/documentation/docs/98-reference/21-svelte-transition.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/transition
+use_cases: "fade, fly, slide, scale, draw transitions, crossfade"
 ---
 
 > MODULE: svelte/transition
diff --git a/documentation/docs/98-reference/30-compiler-errors.md b/documentation/docs/98-reference/30-compiler-errors.md
index ae22029155d3..d0847611b06e 100644
--- a/documentation/docs/98-reference/30-compiler-errors.md
+++ b/documentation/docs/98-reference/30-compiler-errors.md
@@ -1,5 +1,6 @@
 ---
 title: 'Compiler errors'
+use_cases: "error reference, debugging, troubleshooting compilation"
 ---
 
 @include .generated/compile-errors.md
diff --git a/documentation/docs/98-reference/30-compiler-warnings.md b/documentation/docs/98-reference/30-compiler-warnings.md
index 43ba71250f5b..df429c579f6f 100644
--- a/documentation/docs/98-reference/30-compiler-warnings.md
+++ b/documentation/docs/98-reference/30-compiler-warnings.md
@@ -1,5 +1,6 @@
 ---
 title: 'Compiler warnings'
+use_cases: "warning reference, best practices, code quality"
 ---
 
 Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.
diff --git a/documentation/docs/98-reference/30-runtime-errors.md b/documentation/docs/98-reference/30-runtime-errors.md
index 43ce98958751..6963ef190f44 100644
--- a/documentation/docs/98-reference/30-runtime-errors.md
+++ b/documentation/docs/98-reference/30-runtime-errors.md
@@ -1,5 +1,6 @@
 ---
 title: 'Runtime errors'
+use_cases: "error reference, debugging runtime issues, troubleshooting"
 ---
 
 ## Client errors
diff --git a/documentation/docs/98-reference/30-runtime-warnings.md b/documentation/docs/98-reference/30-runtime-warnings.md
index edc5890ac0fa..e853ceb5b6ff 100644
--- a/documentation/docs/98-reference/30-runtime-warnings.md
+++ b/documentation/docs/98-reference/30-runtime-warnings.md
@@ -1,5 +1,6 @@
 ---
 title: 'Runtime warnings'
+use_cases: "warning reference, performance optimization, best practices"
 ---
 
 ## Client warnings
diff --git a/documentation/docs/98-reference/index.md b/documentation/docs/98-reference/index.md
index b98302768eb0..1c0e0238bd0f 100644
--- a/documentation/docs/98-reference/index.md
+++ b/documentation/docs/98-reference/index.md
@@ -1,3 +1,4 @@
 ---
 title: Reference
+use_cases: "API reference, module documentation, error reference"
 ---
diff --git a/documentation/docs/99-legacy/00-legacy-overview.md b/documentation/docs/99-legacy/00-legacy-overview.md
index 638a77ec1a76..31208d7cc347 100644
--- a/documentation/docs/99-legacy/00-legacy-overview.md
+++ b/documentation/docs/99-legacy/00-legacy-overview.md
@@ -1,5 +1,6 @@
 ---
 title: Overview
+use_cases: "Svelte 3/4 documentation, legacy syntax, migration reference"
 ---
 
 Svelte 5 introduced some significant changes to Svelte's API, including [runes](what-are-runes), [snippets](snippet) and event attributes. As a result, some Svelte 3/4 features are deprecated (though supported for now, unless otherwise specified) and will eventually be removed. We recommend that you incrementally [migrate your existing code](v5-migration-guide).
diff --git a/documentation/docs/99-legacy/01-legacy-let.md b/documentation/docs/99-legacy/01-legacy-let.md
index 0d1a0a72bf11..025fd1784364 100644
--- a/documentation/docs/99-legacy/01-legacy-let.md
+++ b/documentation/docs/99-legacy/01-legacy-let.md
@@ -1,5 +1,6 @@
 ---
 title: Reactive let/var declarations
+use_cases: "legacy: reactive variables, Svelte 3/4 state"
 ---
 
 In runes mode, reactive state is explicitly declared with the [`$state` rune]($state).
diff --git a/documentation/docs/99-legacy/02-legacy-reactive-assignments.md b/documentation/docs/99-legacy/02-legacy-reactive-assignments.md
index 5abd481bfc74..a1240e8d0c77 100644
--- a/documentation/docs/99-legacy/02-legacy-reactive-assignments.md
+++ b/documentation/docs/99-legacy/02-legacy-reactive-assignments.md
@@ -1,5 +1,6 @@
 ---
 title: Reactive $: statements
+use_cases: "legacy: reactive statements, derived values, side effects"
 ---
 
 In runes mode, reactions to state updates are handled with the [`$derived`]($derived) and [`$effect`]($effect) runes.
diff --git a/documentation/docs/99-legacy/03-legacy-export-let.md b/documentation/docs/99-legacy/03-legacy-export-let.md
index 877e105b1fa2..528baa4b0d28 100644
--- a/documentation/docs/99-legacy/03-legacy-export-let.md
+++ b/documentation/docs/99-legacy/03-legacy-export-let.md
@@ -1,5 +1,6 @@
 ---
 title: export let
+use_cases: "legacy: component props, Svelte 3/4 props"
 ---
 
 In runes mode, [component props](basic-markup#Component-props) are declared with the [`$props`]($props) rune, allowing parent components to pass in data.
diff --git a/documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md b/documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md
index 33cac97035af..744309e60f1e 100644
--- a/documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md
+++ b/documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md
@@ -1,5 +1,6 @@
 ---
-title: $$props and $$restProps
+title: $props and $restProps
+use_cases: "legacy: spread props, rest props, prop forwarding"
 ---
 
 In runes mode, getting an object containing all the props that were passed in is easy, using the [`$props`]($props) rune.
diff --git a/documentation/docs/99-legacy/10-legacy-on.md b/documentation/docs/99-legacy/10-legacy-on.md
index f2ee694cc1e0..3c9beb01c3c1 100644
--- a/documentation/docs/99-legacy/10-legacy-on.md
+++ b/documentation/docs/99-legacy/10-legacy-on.md
@@ -1,5 +1,6 @@
 ---
 title: on:
+use_cases: "legacy: event handling, event modifiers, component events"
 ---
 
 In runes mode, event handlers are just like any other attribute or prop.
diff --git a/documentation/docs/99-legacy/20-legacy-slots.md b/documentation/docs/99-legacy/20-legacy-slots.md
index 3474782e93ae..90c45e813fda 100644
--- a/documentation/docs/99-legacy/20-legacy-slots.md
+++ b/documentation/docs/99-legacy/20-legacy-slots.md
@@ -1,5 +1,6 @@
 ---
 title: <slot>
+use_cases: "legacy: content projection, component composition, slot props"
 ---
 
 In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render).
diff --git a/documentation/docs/99-legacy/21-legacy-$$slots.md b/documentation/docs/99-legacy/21-legacy-$$slots.md
index 7ca1cef8445a..9b7fb0d3c34b 100644
--- a/documentation/docs/99-legacy/21-legacy-$$slots.md
+++ b/documentation/docs/99-legacy/21-legacy-$$slots.md
@@ -1,5 +1,6 @@
 ---
-title: $$slots
+title: $slots
+use_cases: "legacy: slot detection, conditional slots"
 ---
 
 In runes mode, we know which [snippets](snippet) were provided to a component, as they're just normal props.
diff --git a/documentation/docs/99-legacy/22-legacy-svelte-fragment.md b/documentation/docs/99-legacy/22-legacy-svelte-fragment.md
index 779931f94753..7751cfcac1f0 100644
--- a/documentation/docs/99-legacy/22-legacy-svelte-fragment.md
+++ b/documentation/docs/99-legacy/22-legacy-svelte-fragment.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:fragment>
+use_cases: "legacy: wrapper-free slots, multiple slot elements"
 ---
 
 The `<svelte:fragment>` element allows you to place content in a [named slot](legacy-slots) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
diff --git a/documentation/docs/99-legacy/30-legacy-svelte-component.md b/documentation/docs/99-legacy/30-legacy-svelte-component.md
index a0407e58bfbf..ef38989c8f89 100644
--- a/documentation/docs/99-legacy/30-legacy-svelte-component.md
+++ b/documentation/docs/99-legacy/30-legacy-svelte-component.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:component>
+use_cases: "legacy: dynamic components, component switching"
 ---
 
 In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#svelte:component-is-no-longer-necessary) for an example.
diff --git a/documentation/docs/99-legacy/31-legacy-svelte-self.md b/documentation/docs/99-legacy/31-legacy-svelte-self.md
index bfd140ac49dc..edc07b0bcbb9 100644
--- a/documentation/docs/99-legacy/31-legacy-svelte-self.md
+++ b/documentation/docs/99-legacy/31-legacy-svelte-self.md
@@ -1,5 +1,6 @@
 ---
 title: <svelte:self>
+use_cases: "legacy: recursive components, self-referencing"
 ---
 
 The `<svelte:self>` element allows a component to include itself, recursively.
diff --git a/documentation/docs/99-legacy/40-legacy-component-api.md b/documentation/docs/99-legacy/40-legacy-component-api.md
index a08f53951c20..8f959ad1142b 100644
--- a/documentation/docs/99-legacy/40-legacy-component-api.md
+++ b/documentation/docs/99-legacy/40-legacy-component-api.md
@@ -1,5 +1,6 @@
 ---
 title: Imperative component API
+use_cases: "legacy: Svelte 3/4 component API, programmatic component control"
 ---
 
 In Svelte 3 and 4, the API for interacting with a component is different than in Svelte 5. Note that this page does _not_ apply to legacy mode components in a Svelte 5 application.