sveltekit-patterns

What problem does it solve?

This Skill provides essential SvelteKit patterns for building full-stack applications, focusing on efficient and type-safe communication between client and server using remote functions. It addresses common challenges like data fetching, form submissions, mutations, and reactive UI updates, enabling developers to build robust and highly interactive applications with less boilerplate.

Core Features & Use Cases

• Remote Functions (query, form, command): Defines clear patterns for read-only data fetching, validated form submissions with redirects, and AJAX-style mutations with return values.
• Reactive UI Updates: Emphasizes the .current property pattern to achieve smooth, in-place UI updates without jarring page reloads, preserving user context during data refreshes.
• Data Validation & Security: Integrates valibot for input validation and highlights the importance of row-level security in all server-side operations.
• N+1 Prevention: Demonstrates query.batch() for optimizing data fetching and preventing redundant database queries, improving application performance.
• Use Case: Build a contact management application where users can view, create, update, and delete contacts. This Skill provides the patterns for defining remote functions for each operation, ensuring data is fetched efficiently, forms are validated, and the UI updates smoothly without full page refreshes.

Quick Start

For data fetching, use export const get_data = query(() => ...);. For forms with redirects, use export const create_item = form(schema, async () => redirect(303, '/path'));. For AJAX mutations, use export const update_item = command(schema, async () => ({ success: true }));. For smooth UI updates, store queries in variables (const my_query = get_data();) and access data via my_query.current.