skills.rest
ps-carvalho
ps-carvalhoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svelte-patterns

Guide Svelte 5 development with Runes reactivity and component patterns.

Updated Mar 12, 2026
Search Tags:#performance#state management#svelte#runes#component patterns#svelte 5
One-click install
npx skills add https://github.com/ps-carvalho/spavn-agents --skill svelte-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-patterns
Source: https://github.com/ps-carvalho/spavn-agents/tree/main/.opencode/skills/svelte-patterns
Command: npx skills add https://github.com/ps-carvalho/spavn-agents --skill svelte-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and implement modern Svelte 5 patterns, focusing on Runes reactivity, efficient component composition, and performance optimization for building robust applications.

Core Features & Use Cases

  • Runes Reactivity: Learn to use $state, $derived, and $effect for fine-grained control over application state.
  • Component Architecture: Implement reusable components using $props, $bindable, and snippet blocks.
  • State Management: Explore context API and module-level $state for effective data sharing.
  • Performance: Apply best practices to ensure Svelte applications are fast and efficient.
  • Use Case: You are building a new Svelte 5 application and need guidance on structuring your components, managing state with the new Runes API, and optimizing for performance.

Quick Start

Use the svelte-patterns skill to generate a basic Svelte 5 component demonstrating the use of $state and $derived.

Frequently Asked Questions about svelte-patterns

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

FAQPage Schema
How do I use Svelte 5 Runes for state management?▼

Svelte 5 Runes like `$state`, `$derived`, and `$effect` provide fine-grained reactivity for state management. Use `$state` to declare reactive variables, `$derived` for computed values, and `$effect` for side effects, ensuring efficient application state updates.

What is the best way to share state across Svelte 5 components?▼

The best way to share state across Svelte 5 components is using the context API or module-level `$state`. Context API provides scoped state to component trees, while module-level `$state` allows global state management without prop drilling.

How do I optimize performance in Svelte 5 applications?▼

Optimize Svelte 5 performance by leveraging Runes for fine-grained reactivity, minimizing unnecessary `$effect` usage, and applying component composition best practices. This ensures applications remain fast and efficient by avoiding common anti-patterns.

Can I use bindable props and $props in Svelte 5 component architecture?▼

Yes, Svelte 5 allows two-way data binding using `$bindable` within `$props`. This component architecture pattern lets parent components bind directly to child state, creating robust and reusable interactive UI elements.

What are common Svelte 5 anti-patterns to avoid?▼

Common Svelte 5 anti-patterns include overusing `$effect` for state derivation instead of `$derived`, creating unnecessary module-level `$state`, and improper context API usage. Avoiding these ensures efficient reactivity and component performance.

Related Skills

Explore More Software Engineering Skills→
shredbxshredbx

frontend-svelte

Guide SvelteKit 5 development with runes, routes, and data loading.

Community
Basic
vladm3105vladm3105
16

doc-req

Decompose BRD, PRD, and EARS inputs into atomic REQ v3.0 documents.

Community
Advanced
Jonathan0823Jonathan0823
7

ts-vue-svelte

Provide TypeScript best-practice patterns for Vue 3 and Svelte 5 applications.

Community
Advanced
tanstack-skillstanstack-skills
29

tanstack-store

Manage immutable reactive state with stores, derived values, and effects.

Official
Intermediate