skills.rest
danielbush
danielbushCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svelte-core-bestpractices

Provide best-practice guidance for writing Svelte components with $state, $derived, and $effect.

Updated Apr 24, 2025
Search Tags:#svelte#events#best-practices#reactivity#bindings#snippets#component-design
One-click install
npx skills add https://github.com/danielbush/oneput --skill svelte-core-bestpractices-danielbush
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-core-bestpractices
Source: https://github.com/danielbush/oneput/tree/main/.agents/skills/svelte-core-bestpractices
Command: npx skills add https://github.com/danielbush/oneput --skill svelte-core-bestpractices-danielbush

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guidance on writing fast, robust, modern Svelte code. It helps developers when asked to write, edit, or analyze Svelte components or modules by clarifying reactive patterns, event handling, styling, and library integration.

Core Features & Use Cases

  • Clear reactivity guidance using $state, $derived, and $effect to avoid legacy features.
  • Event handling and binding patterns that align with modern Svelte conventions.
  • Snippet usage, attachments, and library integration guidance to streamline component design.

Quick Start

Load this skill in a Svelte project and ask for best-practice guidance when creating or editing components.

Frequently Asked Questions about svelte-core-bestpractices

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

FAQPage Schema
How do I use $state, $derived, and $effect for Svelte reactivity?▼

Svelte reactivity uses $state for mutable values, $derived for computed state, and $effect to synchronize side effects. Best-practice guidance helps refactor components to adopt these modern runes and avoid legacy reactivity patterns.

What is the best way to handle events and bindings in modern Svelte components?▼

Modern Svelte components handle events and bindings using standard DOM attributes and rune-based state. Best-practice guidance aligns event handling and binding patterns with current conventions to ensure robust component design.

How do I use snippets and attachments in Svelte component design?▼

Snippets and attachments in Svelte component design streamline reusable template logic and element associations. Guidance covers proper snippet usage and attachment integration to improve component composition and maintainability.

Can I use this Svelte guidance for refactoring and library integration?▼

Yes, this Svelte guidance applies to refactoring components, reviewing state management, and improving library integration. It ensures proper coverage of reactivity, styling, and asynchronous patterns during project refactoring.

Why should I avoid legacy Svelte features when writing components?▼

Avoiding legacy Svelte features prevents deprecated reactivity bugs and performance issues. Modern Svelte coding enforces rune-based state management and updated event handling to create fast, robust components.

Does Svelte best-practice guidance cover asynchronous patterns and styling?▼

Svelte best-practice guidance explicitly covers asynchronous patterns and styling alongside reactivity and event handling. It provides conventions for integrating libraries and managing async operations within modern Svelte projects.

Related Skills

Explore More Software Engineering Skills→
xobotyixobotyi
19

svelte

Guide Svelte and SvelteKit development with runes and framework conventions.

Community
Intermediate
AnExiledDevAnExiledDev
9

svelte5

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

Community
Advanced
curiositechcuriositech
181

frontend-architect

Recommend frontend stacks and Cloudflare deployment patterns for web applications.

Official
Advanced
xiaobei930xiaobei930
49

frontend

Implement frontend patterns for component design, state management, performance, and accessibility across Vue, React, Svelte, and Angular.

Community
Advanced