Is this skill useful for debugging reactive state issues?

Yes, it provides guidance on using the $inspect rune for development-only debugging and identifies common pitfalls like destructuring reactive objects.

Can it help me decide between universal and server-only load functions?

Absolutely. The skill includes a decision tree to help you determine which load function to use based on security, serializability, and SEO needs.

Does this skill support the latest Svelte 5 features?

Yes, this skill is optimized for Svelte 5, prioritizing 'runes' like $state, $derived, and $effect for reactivity over legacy syntax.

How does it handle component communication?

It follows Svelte 5 best practices by using callback props and $bindable for parent-child communication, moving away from createEventDispatcher.

Svelte & SvelteKit Development

Name: Svelte & SvelteKit Development
Author: xobotyi

byxobotyi

•

디자인 도구

Builds high-performance web applications using Svelte 5 runes-first reactivity and SvelteKit full-stack conventions.

This skill provides expert guidance for Svelte development, specifically optimized for the Svelte 5 'runes' reactivity model and SvelteKit patterns. It assists with writing, refactoring, and debugging .svelte and .svelte.js/ts files by enforcing compiler-driven best practices. From managing complex state with $state and $derived to architecting full-stack SvelteKit applications with server-only load functions and form actions, this skill ensures your frontend code is minimal, explicit, and performant without the overhead of a virtual DOM.

주요 기능

01Advanced event handling via standard attributes and callback props instead of deprecated dispatchers.

02Transitioning from legacy slots to modern, reusable Snippet patterns for component composition.

034 GitHub stars

04SSR-safe state management patterns using context and module-level reactivity best practices.

05Comprehensive SvelteKit orchestration including universal vs. server-only load functions and routing.

06Implementation of Svelte 5 runes ($state, $derived, $effect) for explicit, compiler-driven reactivity.

사용 사례

01Optimizing reactive performance by replacing $effect synchronization with $derived computation.

02Architecting full-stack SvelteKit projects with complex data fetching and form action requirements.

03Migrating legacy Svelte 4 applications to Svelte 5 runes and modern component structures.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xobotyi/cc-foundry svelte

For use in Claude.ai and ChatGPT

Download Skill