SvelteKit 2 + Svelte 5 + Tailwind v4 Integration Skill

A comprehensive Claude skill for building modern web applications with SvelteKit 2, Svelte 5 (with runes), and Tailwind CSS v4.

Overview

This skill provides searchable, curated documentation for building full-stack web applications using the modern SvelteKit + Svelte 5 + Tailwind v4 stack. It addresses the unique integration challenges when using these three frameworks together, with special focus on Svelte 5's new runes system and its interaction with server-side rendering.

Integration Stack:

• SvelteKit 2: Full-stack framework with file-based routing, SSR/SSG, form actions, and deployment adapters
• Svelte 5: Modern reactivity with runes ($state, $derived, $effect, $props)
• Tailwind CSS v4: CSS-first configuration with new Vite plugin architecture

Key Features

• 24 comprehensive guides covering setup, core concepts, patterns, deployment, migration, and troubleshooting
• Fully indexed documentation with 24 searchable entries across two collections
• Problem-focused approach with ❌ vs ✅ code comparisons and decision rules
• Integration-specific guidance for combining all three frameworks correctly
• 18,881 lines of documentation created specifically for this integration
• Research-first methodology designed to prevent common integration mistakes

Documentation Collections

references/ - Problem-Focused Guides (17 files)

Curated guides addressing specific integration challenges:

Setup & Configuration:

• getting-started.md - Quick start and initial setup
• project-setup.md - Complete project configuration

Core Concepts:

• svelte5-runes.md - Svelte 5 runes system and SSR constraints
• routing-patterns.md - File-based routing and layouts
• server-rendering.md - SSR/SSG patterns
• data-loading.md - Load functions and data flow

Forms & Styling:

• forms-and-actions.md - Progressive enhancement with form actions
• styling-with-tailwind.md - Component styling patterns
• styling-patterns.md - Advanced styling techniques

Deployment & Migration:

• deployment-guide.md - Platform-specific deployment (Vercel, Cloudflare, Node, static)
• migration-svelte4-to-5.md - Upgrading from Svelte 4 to 5
• tailwind-v4-migration.md - Upgrading from Tailwind v3 to v4

Optimization & Best Practices:

• best-practices.md - Architecture and conventions
• performance-optimization.md - Bundle size, loading, Core Web Vitals

Troubleshooting:

• common-issues.md - Quick fixes for frequent problems
• troubleshooting.md - Systematic debugging methodology

Search System:

• documentation-search-system.md - Complete search methodology

docs/ - Comprehensive Reference (7 files)

Complete API reference and configuration guides:

• sveltekit-configuration.md - Complete svelte.config.js and Vite configuration
• svelte5-api-reference.md - All Svelte 5 runes and template syntax
• tailwind-configuration.md - Tailwind v4 configuration options
• adapters-reference.md - Deployment adapter specifications
• advanced-routing.md - Advanced SvelteKit routing patterns
• advanced-ssr.md - SSR hooks, streaming, optimization
• integration-patterns.md - Complete integration examples

Quick Start

Installation

# 1. Create SvelteKit project
npm create svelte@latest my-app
cd my-app
npm install

# 2. Add Tailwind v4
npm install -D tailwindcss@next @tailwindcss/vite@next