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
Adversarial code review that breaks the self-review monoculture. Use when you want a genuinely critical review of recent changes, before merging a PR, or when you suspect Claude is being too agreeable about code quality. Forces perspective shifts through hostile reviewer personas that catch blind spots the author's mental model shares with the reviewer.
Use this skill whenever the user wants to commit changes and create a Pull Request (e.g., 'commit and PR', 'push my changes', 'create a PR'). It automates branch checkout, conventional commits, and uses the create-github-pull-request-from-specification skill to open a PR.
Provides comprehensive guidance for Electron framework including main process, renderer process, IPC communication, window management, and desktop app development. Use when the user asks about Electron, needs to create desktop applications, implement Electron features, or build cross-platform desktop apps.
| name | sveltekit-svelte5-tailwind-skill |
| description | Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4 |
| version | 1.0.0 |
| scope | integration |
| distribution | author-only |
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.