skills.rest
tankpkg
tankpkgOFFICIAL
Explore all skills by this author →
GitHub

@tank/svelte-kit

Design Svelte 5 and SvelteKit application architecture for routing, reactivity, forms, and deployment.

1|1|Updated Feb 20, 2026
Search Tags:#testing#deployment#routing#forms#runes#sveltekit#svelte 5
One-click install
npx skills add https://github.com/tankpkg/packages --skill tank-svelte-kit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: @tank/svelte-kit
Source: https://github.com/tankpkg/packages/tree/main/skills/svelte-kit
Command: npx skills add https://github.com/tankpkg/packages --skill tank-svelte-kit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement production-grade Svelte 5 and SvelteKit applications without guessing at routing, reactivity, data loading, form handling, or deployment choices. It reduces framework confusion by turning best-practice guidance into clear decisions for real web app work.

Core Features & Use Cases

  • Svelte 5 runes guidance: Choose between $state, $derived, $effect, $props, and $bindable for local state, computed values, effects, and component APIs.
  • SvelteKit app architecture: Plan file-based routing, layouts, route groups, params, load functions, server-only modules, hooks, and error boundaries.
  • Forms and mutations: Build progressive-enhancement form actions, validation flows, named actions, uploads, and endpoint fallbacks.
  • Testing and delivery: Apply Vitest, Playwright, state-scope patterns, rendering modes, and adapter selection for reliable releases.
  • Use case: If you are building a dashboard with authenticated data, this Skill helps you place secrets in server-only code, choose the right load function, preserve form state, and pick the correct rendering mode.

Quick Start

Use this skill to plan a SvelteKit feature by describing your route structure, data sources, forms, and deployment target in plain English.

Frequently Asked Questions about @tank/svelte-kit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between $state, $derived, and $effect for Svelte 5 runes?▼

Svelte 5 runes selection depends on your data needs: use $state for local reactive state, $derived for computed values, and $effect for side effects. This Skill provides architecture guidance to map each rune to the correct component pattern for your application.

What is the best way to structure routing and load functions in SvelteKit?▼

SvelteKit routing uses file-based layouts, route groups, and load functions to manage data. This Skill helps you plan route structures, choose between server and client load functions, and establish server-only boundaries for authenticated data fetching.

How do I build SvelteKit forms with progressive enhancement and validation?▼

SvelteKit forms use named actions and progressive enhancement to handle mutations without JavaScript. This Skill guides you through building validation flows, form actions, and endpoint fallbacks to preserve form state during server-side processing.

Does this SvelteKit architecture guidance cover SSR, SSG, and SPA rendering modes?▼

SvelteKit rendering mode selection covers SSR, SSG, and SPA configurations. This Skill helps you choose the correct rendering mode and deployment adapter based on your application's routing, data loading, and state management requirements.

How do I test SvelteKit applications using Vitest and Playwright?▼

SvelteKit testing with Vitest and Playwright ensures reliable releases through state-scope patterns and component rendering checks. This Skill integrates testing workflows into your architecture plan for routing, forms, and reactivity validation.

When should I use server-only modules and hooks in SvelteKit?▼

Server-only modules and hooks in SvelteKit secure secrets and manage server/client data boundaries. Use this Skill to determine when to place logic in hooks, error boundaries, or server-only code for authenticated dashboard applications.

Related Skills

Explore More Software Engineering Skills→
ps-carvalhops-carvalho

sveltekit-patterns

Provide SvelteKit patterns for routing, load functions, form actions, and deployment.

Community
Intermediate
Celia-12Celia-12

deployment

Configure deployment targets, run/build commands, and static directories for MERN applications.

Community
Intermediate
Impertio-StudioImpertio-Studio

tailwind-errors-utility-soup

Analyze Tailwind CSS utility soup and provide refactoring suggestions.

Official
Intermediate
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate