composition-svelte

Decompose a Svelte 5 feature by ROLE. Wrong role assignment is the root cause of every architectural fuckup. Before generating files, pin three decisions: composition shape, snippet API, state location. Per-file contracts fall out from those.

Rules from frontend:code-style, svelte-5:code-style-svelte, frontend:editing, svelte:svelte-code-writer, svelte:svelte-core-bestpractices apply throughout. Run mcp__svelte__svelte-autofixer after every .svelte edit.

When to use

• Designing a wrapper / Provider-style component (popup, menu, drawer, modal, tooltip, panel, slide-in, accordion)
• Autofixer flagged bind:this
• About to type $effect(() => { new ThirdPartyThing(...) })
• About to write prop={appState.x} or prop={someStore.value}
• Naming a new file Default.svelte / Feature.svelte / Wrapper.svelte
• Calling setDOMContent / appendChild(svelteRenderedNode) / similar
• Deciding default vs named snippets
• Fixing a focus / ESC / keyboard bug in one of several similar menus
• About to add a maplibre Marker, leaflet L.marker, d3 selection
• About to type :global(...) inside a wrapper's <style> block