svelte

# Svelte Skill Expert assistance for building applications with Svelte and SvelteKit. ## Capabilities - Create Svelte components with reactive declarations - Implement Svelte stores for state management - Configure SvelteKit for SSR/SSG/SPA - Build API routes and form actions - Set up load functions for data fetching - Implement transitions and animations ## Usage Invoke this skill when you need to: - Build Svelte/SvelteKit applications - Create reactive components - Implement server-side rendering - Set up form handling with actions - Configure deployment ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | componentName | string | Yes | Component name | | sveltekit | boolean | No | Using SvelteKit (default: true) | | typescript | boolean | No | Use TypeScript (default: true) | | ssr | boolean | No | Enable SSR (default: true) | ## Component Patterns ### Basic Component ```svelte <!-- src/lib/components/UserCard.svelte --> <script lang="ts"> interface User { id: string; name: string; email: string; avatar?: string; } export let user: User; export let editable = false; let isEditing = false; let editedName = user.name; // Reactive declaration $: initials = user.name .split(' ') .map(n => n[0]) .join('') .toUpperCase(); function save() { user = { ...user, name: editedName }; isEditing = false; } </script> <div class="user-card"> <div class="avatar"> ...