How can I preview the code generated by this skill?

The skill can generate a Playground link using the playground-link tool, which allows you to view and interact with the code in a live browser environment instantly.

Can I use this for SvelteKit-specific features?

Absolutely. It provides comprehensive support for SvelteKit's file-based routing, load functions, form actions, adapter configurations, and API endpoints.

How does the code validation work?

The skill utilizes the svelte-autofixer tool to automatically analyze, lint, and repair code patterns before presenting the final solution to ensure production-grade quality.

Does it support TypeScript?

Yes, Svelte Expert includes full TypeScript support and follows best practices for type safety in Svelte components and SvelteKit load functions.

Does this skill support Svelte 5?

Yes, it is fully optimized for Svelte 5 and emphasizes the use of modern Runes like $state, $effect, and $props for state management and reactivity.

Svelte Expert

Name: Svelte Expert
Author: Raudbjorn

byRaudbjorn

•

デザインツール

Builds production-ready Svelte components and SvelteKit applications with automated code validation and documentation access.

概要

This skill transforms Claude into a specialized Svelte architect, capable of building high-performance web applications using the latest Svelte 5 runes and SvelteKit features. It streamlines the development workflow by providing real-time access to official documentation, enforcing code quality through mandatory svelte-autofixer validation, and offering instant playground link generation for rapid testing. Whether migrating from Svelte 4 or architecting complex reactive state patterns, this tool ensures adherence to best practices, accessibility standards, and modern deployment strategies.

主な機能

Instant Svelte playground link generation
Svelte 5 Rune support ($state, $effect, $props)
Real-time official documentation access
Mandatory code validation with svelte-autofixer
2 GitHub stars
Integrated SvelteKit routing and data loading patterns

ユースケース

Developing accessible, reactive UI components with built-in state management and animations.
Building full-stack SvelteKit applications with server-side logic and form actions.
Migrating legacy Svelte 4 components to modern Svelte 5 syntax using runes.

概要

主な機能

Instant Svelte playground link generation
Svelte 5 Rune support ($state, $effect, $props)
Real-time official documentation access
Mandatory code validation with svelte-autofixer
2 GitHub stars
Integrated SvelteKit routing and data loading patterns

ユースケース

Developing accessible, reactive UI components with built-in state management and animations.
Building full-stack SvelteKit applications with server-side logic and form actions.
Migrating legacy Svelte 4 components to modern Svelte 5 syntax using runes.