skills.rest
aguirrerjg
aguirrerjgCOMMUNITY
Explore all skills by this author →
GitHub

svelte5-best-practices

Review Svelte 5 components for correct rune syntax and SvelteKit patterns.

1|Updated Apr 6, 2026
Search Tags:#typescript#performance#frontend#migration#runes#sveltekit#svelte5
One-click install
npx skills add https://github.com/aguirrerjg/designoscompanion --skill svelte5-best-practices-aguirrerjg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte5-best-practices
Source: https://github.com/aguirrerjg/designoscompanion/tree/main/.agents/skills/svelte5-best-practices
Command: npx skills add https://github.com/aguirrerjg/designoscompanion --skill svelte5-best-practices-aguirrerjg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the confusion and errors that come with adopting Svelte 5's new runes system, migrating legacy Svelte 4 codebases, and implementing correct SvelteKit patterns that avoid bugs, performance issues, and server-side security risks.

Core Features & Use Cases

  • Runes & Reactive Patterns: Master $state, $derived, $effect, $props, $bindable, and $inspect for correct reactive state and component logic in Svelte 5.
  • Snippet Composition: Replace legacy Svelte 4 slots with type-safe snippets for flexible, reusable component design.
  • SvelteKit Best Practices: Implement secure load functions, form actions, SSR state isolation, and performance optimizations like parallel data loading and streaming.
  • Migration Guidance: Step-by-step instructions for converting Svelte 4 reactive statements, stores, and slot patterns to Svelte 5 equivalents, including automated migration tool usage.
  • Use Case: A developer migrating a Svelte 4 e-commerce app to Svelte 5 can use this Skill to correctly convert store-based state to runes, replace slot-based layouts with snippets, and fix SSR state leaks that caused cross-user data exposure.

Quick Start

Use the svelte5-best-practices skill to review your Svelte 5 component for correct rune syntax, proper snippet usage, and SvelteKit load function performance optimizations.

Frequently Asked Questions about svelte5-best-practices

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

FAQPage Schema
How do I migrate Svelte 4 reactive statements and stores to Svelte 5 runes?▼

Migrate Svelte 4 reactive statements and stores to Svelte 5 runes by replacing legacy reactive declarations with $state, $derived, and $effect, utilizing step-by-step conversion guidance and automated migration tools for accurate syntax updates.

How do I replace Svelte 4 slots with type-safe snippets in Svelte 5?▼

Replace Svelte 4 slots with type-safe snippets in Svelte 5 by using the new snippet composition syntax, enabling flexible and reusable component design while eliminating legacy slot implementation errors.

How do I fix SSR state isolation and prevent cross-user data exposure in SvelteKit?▼

Fix SSR state isolation and prevent cross-user data exposure in SvelteKit by implementing secure load functions and form actions, ensuring proper server-side state separation to eliminate security vulnerabilities.

What is the correct syntax for Svelte 5 $state, $derived, and $effect runes?▼

Correct syntax for Svelte 5 $state, $derived, and $effect runes involves using these reactive primitives to manage component logic, replacing legacy Svelte 4 patterns to prevent runtime bugs and performance degradation.

How do I optimize SvelteKit load functions for parallel data loading and streaming?▼

Optimize SvelteKit load functions for parallel data loading and streaming by applying performance best practices, ensuring efficient data fetching patterns that resolve suboptimal SvelteKit performance bottlenecks.

Related Skills

Explore More Software Engineering Skills→
SnakeOSnakeO
9

debug:svelte

Diagnose and fix Svelte 5 reactivity and runes issues.

Community
Advanced
hschnehschne
1

svelte

Enforce standardized Svelte 5 component development best practices.

Community
Intermediate
rp4rirp4ri

perf

Analyze SvelteKit applications for performance issues in load functions, server code, client code, and bundle size.

Community
Advanced
Seeker1911Seeker1911
6

svelte5-runes

Guide Svelte 5 rune usage for reactive state, props, and side effects.

Community
Basic