Menu
Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Convert structured implementation plans into Beads-backed executable work graphs with prompt-contract metadata and generated formula templates. Use when the user asks to turn a plan into Beads, create plan-to-beads formulas or molecules, validate Beads work packets, or prepare plans for parallel agent execution.
Svelte 5 debugging with $inspect(). Use when the user asks about Svelte DevTools, debugging components, or inspecting reactive state. Also use when debugging Svelte 5 issues where static code analysis is insufficient; reactive chains not propagating ($derived โ $effect โ render but UI not updating), $state values stale or unexpected at runtime, components receiving wrong props, or $effects firing too often or not at all.
Use when working with Effect-TS patterns, services, layers, schemas, error handling, streams, concurrency, or writing/refactoring code that imports from 'effect'. Also covers Svelte 5 + Effect integration and conduit's ongoing Effect migration.
Use when working with Effect-TS patterns, services, layers, schemas, error handling, streams, concurrency, or writing/refactoring code that imports from 'effect'. Also covers Svelte 5 + Effect integration and conduit's ongoing Effect migration.
Convene the Council of High Intelligence โ multi-persona deliberation with historical thinkers for deeper analysis of complex problems.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
| description | Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4 |
| distribution | author-only |
| metadata | {"github-path":".claude/skills/sveltekit-svelte5-tailwind-skill","github-ref":"refs/heads/main","github-repo":"https://github.com/dibstern/opencode-relay","github-tree-sha":"23c5675469f1954ffd48012a554d3c15fabf908e"} |
| name | sveltekit-svelte5-tailwind-skill |
| scope | integration |
| version | 1.0.0 |
This skill provides comprehensive guidance for building modern web applications with the SvelteKit 2 + Svelte 5 + Tailwind CSS v4 stack.
SvelteKit 2 is a modern full-stack framework with:
Svelte 5 introduces a new reactivity system with:
$state(), $derived(), $effect(), $props()Tailwind CSS v4 offers:
Integration challenges this skill addresses:
CRITICAL: Research-First Methodology
When a user asks you to build something with this stack:
Research first - Search the documentation to understand:
Then execute - Implement the solution using the knowledge gained from documentation
Why this matters:
Workflow:
This skill includes two searchable documentation collections:
17 curated guides addressing specific integration challenges:
7 adapted documentation guides covering complete APIs:
IMPORTANT: Always search before implementing!
This skill uses a 5-stage search process for efficient documentation lookup:
Find all documentation indexes:
find . -name "index.jsonl" -type f
Expected output:
./references/index.jsonl (17 problem-focused guides)./docs/index.jsonl (7 comprehensive references)Sample each collection to understand its scope:
Read references/index.jsonl with offset: 1, limit: 5
Read docs/index.jsonl with offset: 1, limit: 5
Determine which collection(s) are relevant to your query.
Read the complete index file(s) for your chosen collection(s):
Read references/index.jsonl # For how-to guides and troubleshooting
Read docs/index.jsonl # For API reference and configuration
Analyze the summaries to identify 3-4 most relevant files:
For setup questions โ references/getting-started.md, references/project-setup.md For runes questions โ references/svelte5-runes.md, docs/svelte5-api-reference.md For forms questions โ references/forms-and-actions.md, docs/integration-patterns.md For styling questions โ references/styling-with-tailwind.md, docs/tailwind-configuration.md For SSR questions โ references/server-rendering.md, docs/advanced-ssr.md For deployment โ references/deployment-guide.md, docs/adapters-reference.md For errors โ references/common-issues.md, references/troubleshooting.md
Consider:
For your 3-4 candidates, read their sections.jsonl entries:
Read references/sections.jsonl with offset: {index}, limit: 1
Read docs/sections.jsonl with offset: {index}, limit: 1
Important: Index number from index.jsonl = line number in sections.jsonl
Analyze the section summaries to identify which sections address your query.
Read only the relevant sections:
Read references/getting-started.md with offset: 45, limit: 89
Read docs/svelte5-api-reference.md with offset: 120, limit: 65
Use the offset and limit from the sections.jsonl data for precise reading.
Combine information from multiple sources:
Example file references:
See: references/svelte5-runes.md:156-245 (Server-Side Constraints)
See: docs/advanced-ssr.md:89-134 (SSR Load Functions)
For complete search methodology with examples, see references/documentation-search-system.md
For a complete walkthrough, search references/getting-started.md
Basic setup commands:
# 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
# 3. Configure Vite (vite.config.js)
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
export default {
plugins: [
tailwindcss(), // MUST be before sveltekit()
sveltekit()
]
};
# 4. Create app.css
@import "tailwindcss";
# 5. Import in root layout (src/routes/+layout.svelte)
<script>
import '../app.css';
</script>
<slot />
# 6. Verify
npm run dev
Critical configuration:
@next tag for Tailwind v4 packagesSetup and Configuration โ Search: references/getting-started.md, references/project-setup.md โ Key sections: Installation, Vite Configuration, Directory Structure
Svelte 5 Runes with SSR โ Search: references/svelte5-runes.md โ Critical: "Server-Side Constraints" section - $state() doesn't work in SSR!
Forms and Progressive Enhancement โ Search: references/forms-and-actions.md โ Key pattern: Manual enhance() for rune compatibility
Styling Components โ Search: references/styling-with-tailwind.md, references/styling-patterns.md โ Key topics: Dynamic classes, dark mode, component patterns
Data Loading โ Search: references/data-loading.md, docs/advanced-ssr.md โ Key pattern: Passing load() data to rune state
Deployment โ Search: references/deployment-guide.md, docs/adapters-reference.md โ Platform-specific: Vercel, Cloudflare, Node, static
Troubleshooting Errors โ Search: references/common-issues.md first (quick fixes) โ Then: references/troubleshooting.md (systematic debugging)
CSS not loading in production โ Search: references/common-issues.md section "CSS Loading Issues" โ Quick check: Vite plugin order, CSS import location
Runes causing SSR errors โ Search: references/svelte5-runes.md section "Server-Side Constraints" โ Quick fix: Don't use $state() or $effect() in SSR components
Form losing state on submit โ Search: references/forms-and-actions.md section "Handling use:enhance Reactivity" โ Quick fix: Use manual enhance() callback
HMR breaking โ Search: references/common-issues.md section "Hot Module Reload Problems" โ Quick fix: Check Vite plugin order and file watch settings
Tailwind classes not working โ Search: references/styling-with-tailwind.md section "Content Detection and Purging" โ Quick fix: Check content paths in config, use full class names
For systematic troubleshooting, see references/troubleshooting.md
Server + Client Component Split
<!-- +page.svelte (SSR-safe) -->
<script>
export let data;
</script>
<ClientCounter initialCount={data.count} />
<!-- ClientCounter.svelte (client-only runes) -->
<script>
let { initialCount } = $props();
let count = $state(initialCount);
</script>
Form with Progressive Enhancement
<script>
import { enhance } from '$app/forms';
let { form } = $props();
let submitting = $state(false);
</script>
<form method="POST" use:enhance={() => {
submitting = true;
return async ({ result, update }) => {
submitting = false;
await update();
};
}}>
<!-- form fields -->
</form>
Conditional Tailwind Classes
<script>
let active = $state(false);
</script>
<!-- โ
GOOD: Full class names -->
<div class:bg-blue-500={active} class:bg-gray-200={!active}>
Button
</div>
<!-- โ BAD: Dynamic class parts -->
<div class="bg-{active ? 'blue' : 'gray'}-500">
Button
</div>
For complete patterns, search docs/integration-patterns.md
Search references/best-practices.md for comprehensive guidance on:
Migrating from Svelte 4 to Svelte 5 in SvelteKit โ Search: references/migration-svelte4-to-5.md โ Key topics: Stores to runes, reactive statements to $derived, slots to snippets
Migrating from Tailwind v3 to v4 โ Search: references/tailwind-v4-migration.md โ Key topics: CSS-first config, Vite plugin, syntax changes
Search references/performance-optimization.md for:
This skill covers:
All code examples and patterns are tested with these versions.
sveltekit-svelte5-tailwind-skill/
โโโ SKILL.md # This file
โโโ references/ # Problem-focused guides (17 files)
โ โโโ index.jsonl # Search index
โ โโโ sections.jsonl # Section details
โ โโโ index.meta.json # Collection metadata
โ โโโ documentation-search-system.md # Complete search methodology
โ โโโ getting-started.md
โ โโโ project-setup.md
โ โโโ svelte5-runes.md
โ โโโ forms-and-actions.md
โ โโโ styling-with-tailwind.md
โ โโโ server-rendering.md
โ โโโ data-loading.md
โ โโโ deployment-guide.md
โ โโโ routing-patterns.md
โ โโโ styling-patterns.md
โ โโโ best-practices.md
โ โโโ performance-optimization.md
โ โโโ migration-svelte4-to-5.md
โ โโโ tailwind-v4-migration.md
โ โโโ common-issues.md
โ โโโ troubleshooting.md
โโโ docs/ # Comprehensive references (7 files)
โ โโโ index.jsonl # Search index
โ โโโ sections.jsonl # Section details
โ โโโ index.meta.json # Collection metadata
โ โโโ sveltekit-configuration.md
โ โโโ svelte5-api-reference.md
โ โโโ tailwind-configuration.md
โ โโโ adapters-reference.md
โ โโโ advanced-routing.md
โ โโโ advanced-ssr.md
โ โโโ integration-patterns.md
โโโ provenance.jsonl # Source attribution
โโโ skill.manifest.json # Skill metadata
This skill uses author-only distribution:
adapted_from)Always search documentation before implementing! The research-first approach prevents common mistakes and ensures you follow integration best practices.
Start with Stage 0 (discover indexes) and work through the 5-stage search process for every question.