skills.rest
DavidTeju
DavidTejuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svelte-best-practices

Enforces Svelte 5 best practices for reactivity, components, and ESLint configuration.

9|2|Updated Mar 5, 2026
Search Tags:#components#eslint#patterns#svelte#best-practices#reactivity
One-click install
npx skills add https://github.com/DavidTeju/shared-skills --skill svelte-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-best-practices
Source: https://github.com/DavidTeju/shared-skills/tree/main/skills/svelte-best-practices
Command: npx skills add https://github.com/DavidTeju/shared-skills --skill svelte-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Svelte codebases often struggle with maintaining predictable reactivity and consistent component patterns as projects scale. This Skill collects proven patterns for Svelte 5, including the runes mode, state derivation, props handling, effect usage, and ESLint integration, to help teams write robust, maintainable components.

Core Features & Use Cases

  • Provides a mapped set of reactivity primitives ($state, $derived, $props) and recommended usage to reduce bugs.
  • Documents common patterns (dependency tracking, $effect.pre vs $effect, and legacy feature replacements) to improve consistency across teams.
  • Includes ESLint configuration guidance and practical examples for Svelte 5 projects.

Quick Start

Apply the Svelte 5 best-practices guide to an existing component to improve reactivity patterns and styling consistency.

Frequently Asked Questions about svelte-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Svelte 5 runes for state management and reactivity?▼

Svelte 5 runes like $state, $derived, and $props map to specific reactivity primitives, reducing bugs by enforcing predictable state derivation and dependency tracking in your components. Use $state for local variables, $derived for computed values, and $props for component inputs.

What is the difference between $effect and $effect.pre in Svelte 5?▼

Svelte 5 best practices document specific usage patterns for $effect versus $effect.pre to handle side effects correctly. $effect runs after DOM updates, while $effect.pre runs before, allowing you to sequence component logic and improve consistency across your application.

How do I migrate legacy Svelte features to the new runes mode?▼

Migration notes for Svelte 5 runtime guide you through replacing legacy reactive features with runes mode equivalents. This structured approach ensures your existing components transition smoothly to $state, $derived, and $props patterns while maintaining tooling compatibility.

Can I use ESLint to enforce Svelte 5 component patterns in my project?▼

Yes, you can apply recommended ESLint configurations within Svelte projects to enforce consistent component patterns. ESLint guidance is included to help teams automatically validate reactivity rules, dependency tracking, and proper rune usage across the codebase.

What's the best way to handle props in Svelte 5 components?▼

The $props rune is the recommended Svelte 5 pattern for handling component inputs, replacing legacy export let syntax. Applying this structured best practice ensures predictable data flow and reduces reactivity bugs as your UI projects scale.

Related Skills

Explore More Software Engineering Skills→
bobmatnycbobmatnyc
68

svelte5-runes-static

Bridge Svelte stores to Svelte 5 runes for hydration-safe static sites.

Community
Intermediate
mgd34msumgd34msu
4

svelte

Build Svelte 5 user interfaces with runes and stores.

Community
Intermediate
pingqLINpingqLIN

svelte

Guide Svelte 5 and SvelteKit development with runes-based reactivity and TypeScript.

Community
Advanced
AnExiledDevAnExiledDev
9

svelte5

Adopt Svelte 5 runes for explicit component reactivity and state management.

Community
Advanced