svelte-core-bestpractices

Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.

270stars31forksUpdated 6/10/2026

Code Review Documentation #best-practices #documentation #svelte #reactivity #code-review #javascript

Security Assessment

Safe(100/100)

Security Score100/100

About svelte-core-bestpractices

The `svelte-core-bestpractices` skill provides guidance for developing efficient, maintainable, and modern Svelte applications. It focuses on teaching best practices for reactivity, state management, event handling, styling, and integrating with external libraries. By standardizing how developers use Svelte's reactive constructs, this skill helps prevent common pitfalls such as inefficient updates, improper effect usage, or stale derived values. It is designed to assist developers in writing code that is both performant and easy to reason about, especially in complex Svelte projects.

The skill covers key reactive constructs such as `$state` for deeply reactive variables, `$derived` for computed values, and `$effect` for side effects, emphasizing their appropriate use cases. It provides recommendations for handling props dynamically with `$props` and debugging reactivity issues using `$inspect.trace`. Additionally, it addresses best practices for event listeners on elements, the document, and the window, and explains how to use snippets for reusable template fragments. Overall, the skill promotes structured patterns for Svelte development that improve clarity, maintainability, and debugging efficiency.

This skill is particularly useful for Svelte developers who want to adhere to core best practices and avoid common mistakes. It is suitable for both individual contributors and teams looking to standardize coding patterns across projects. Typical use cases include creating or refactoring Svelte components, analyzing reactivity performance, implementing interactive UI elements, and integrating third-party libraries while keeping the reactive model intact. By following these guidelines, developers can ensure their Svelte applications remain robust, performant, and scalable.

FAQ

When should I use `$state` instead of a normal variable?

Use `$state` for variables that should be reactive and trigger updates in `$effect`, `$derived`, or template expressions. For large objects that are only reassigned, `$state.raw` is recommended to avoid performance overhead.

How do I compute derived values correctly?

Use `$derived` for computed values instead of `$effect`. Provide an expression directly to `$derived` or use `$derived.by` if a function is necessary. Derived values will re-evaluate when their dependencies change.

Can I use `$effect` for all reactive updates?

No, `$effect` should be avoided for normal state updates. It is mainly for side effects such as syncing with external libraries or logging. State updates should be handled with `$state` and `$derived` instead.

How should I attach event listeners to the window or document?

Use `<svelte:window>` or `<svelte:document>` tags with the appropriate event attributes. Avoid using `$effect` or `onMount` for global event listeners.

What are snippets and how are they used?

Snippets are reusable template fragments declared within the template. They can be instantiated with the `{@render ...}` tag or passed as props to components, helping to keep markup DRY and maintainable.