Svelte5

What it does

This skill, Svelte5, generates clean and optimized Svelte component code snippets for rapid frontend development and prototyping. It focuses specifically on utilizing Svelte 5 syntax and patterns, ensuring compatibility with the latest version of the framework. The tool provides a quick reference guide to transitioning from Svelte 4 to Svelte 5 conventions and offers examples of how to implement various features within Svelte components.

When to use it

• Generating boilerplate code for new Svelte components.
• Quickly prototyping user interface elements in Svelte.
• Converting existing Svelte 4 codebases to utilize Svelte 5 syntax.
• Understanding and implementing specific Svelte 5 features like runes and derived values.
• Creating snippets with parent-passed content, such as headers and footers.

Key capabilities

• Generates Svelte 5 compliant code.
• Provides examples of transitioning from Svelte 4 syntax to Svelte 5.
• Demonstrates the use of runes for props, state, derived values, effects, and events.
• Supports snippets for rendering dynamic content within components.
• Offers references for typing props, handling context, and addressing reactivity edge cases.

Example prompts

• "Generate a Svelte component with a reactive counter."
• "Show me how to create a two-way bindable prop in Svelte 5."
• "Give me an example of using $derived for a complex calculation."

Tips & gotchas

• This skill is specifically designed for Svelte 5; it will not be suitable for older versions.
• Refer to the provided references (typescript.md, patterns.md, gotchas.md) for more in-depth information on specific features and potential pitfalls.
• The skill uses $props(), $state(), $derived() and other runes – ensure your environment supports these Svelte 5 constructs.