sveltekit-svelte5-tailwind-skill

SvelteKit 2 + Svelte 5 + Tailwind v4 統合スキル

このスキルは、SvelteKit 2 + Svelte 5 + Tailwind CSS v4 スタックでモダンな Web アプリケーションを構築するための包括的なガイダンスを提供します。

この統合スタックについて

SvelteKit 2 は、以下の特徴を持つモダンなフルスタックフレームワークです：

• レイアウトを伴うファイルベースのルーティング
• サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）
• プログレッシブエンハンスメントを備えたフォームアクション
• 複数のデプロイアダプター（Vercel、Cloudflare、Node、静的）

Svelte 5 は、以下の新しいリアクティビティシステムを導入します：

• Runes：$state()、$derived()、$effect()、$props()
• 簡素化されたコンポーネントの記述
• より優れた TypeScript サポート
• スロットを置き換えるスニペット

Tailwind CSS v4 は、以下を提供します：

• CSS ファーストの設定
• 新しい Vite プラグインアーキテクチャ
• 改善された JIT パフォーマンス
• 簡素化されたセットアップ

このスキルが対処する統合の課題：

• 3 つのツールすべてを連携させるための設定
• SSR コンテキストにおける Svelte 5 runes の理解
• フォームアクションによるプログレッシブエンハンスメント
• 開発環境と本番環境での CSS の読み込み
• さまざまなプラットフォームへのデプロイ
• 以前のバージョンからの移行

このスキルの使い方

重要：リサーチファーストの方法論

ユーザーがこのスタックで何かの構築を依頼した場合：

1. まずリサーチする - ドキュメントを検索して以下を理解します：

   • SvelteKit がこのユースケースをどのように処理するか
   • どの Svelte 5 runes パターンが適用されるか
   • Tailwind v4 でどのようにスタイリングするか
   • 避けるべき一般的な統合の落とし穴

2. 次に実行する - ドキュメントから得た知識を使ってソリューションを実装します

これが重要な理由：

• この統合には特定の制約があります（例：runes は SSR では動作しません）
• ドキュメントは設定に関する権威あるガイダンスを提供します
• まずリサーチすることで、やり直しが必要になるミスを防げます
• ベストプラクティスに従ったソリューションを実装できます

ワークフロー：

1. ユーザーのリクエスト：「SvelteKit/Svelte 5/Tailwind で [機能] の構築を手伝って」
2. 以下のプロセスを使ってドキュメントを検索します
3. 推奨されるアプローチを理解します
4. 最初から正しくソリューションを実装します

ドキュメントコレクション

このスキルには、検索可能な 2 つのドキュメントコレクションが含まれています：

references/（問題に焦点を当てたガイド）

特定の統合の課題に対処する 17 の厳選されたガイド：

• セットアップ：getting-started.md、project-setup.md
• コアコンセプト：svelte5-runes.md、routing-patterns.md、server-rendering.md、data-loading.md
• フォームとスタイリング：forms-and-actions.md、styling-with-tailwind.md、styling-patterns.md
• デプロイ：deployment-guide.md
• 移行：migration-svelte4-to-5.md、tailwind-v4-migration.md
• 最適化：best-practices.md、performance-optimization.md
• トラブルシューティング：common-issues.md、troubleshooting.md
• 検索システム：documentation-search-system.md

docs/（包括的なリファレンス）

完全な API を網羅する 7 つの適応されたドキュメントガイド：

• sveltekit-configuration.md - 完全な svelte.config.js と Vite 設定
• svelte5-api-reference.md - すべての Svelte 5 runes とテンプレート構文
• tailwind-configuration.md - Tailwind v4 の設定オプション
• adapters-reference.md - デプロイアダプターの仕様
• advanced-routing.md - 高度な SvelteKit ルーティングパターン
• advanced-ssr.md - SSR フック、ストリーミング、最適化
• integration-patterns.md - 完全な統合例

ドキュメントの検索

重要：実装する前に必ず検索してください！

このスキルは、効率的なドキュメント検索のために 5 段階の検索プロセスを使用します：

ステージ 0：利用可能なドキュメントを発見する

すべてのドキュメントインデックスを見つけます：

find . -name "index.jsonl" -type f

期待される出力：

• ./references/index.jsonl（問題に焦点を当てた 17 のガイド）
• ./docs/index.jsonl（包括的な 7 つのリファレンス）

各コレクションをサンプリングして、その範囲を理解します：

Read references/index.jsonl with offset: 1, limit: 5
Read docs/index.jsonl with offset: 1, limit: 5

クエリに関連するコレクションを判断します。

ステージ 1：関連するインデックスを読み込む

選択したコレクションの完全なインデックスファイルを読み込みます：

Read references/index.jsonl  # For how-to guides and troubleshooting
Read docs/index.jsonl         # For API reference and configuration

ステージ 2: 候補について推論する

要約を分析して、最も関連性の高い 3～4 個のファイルを特定します:

セットアップに関する質問 → references/getting-started.md、references/project-setup.md runes に関する質問 → references/svelte5-runes.md、docs/svelte5-api-reference.md フォームに関する質問 → references/forms-and-actions.md、docs/integration-patterns.md スタイリングに関する質問 → references/styling-with-tailwind.md、docs/tailwind-configuration.md SSR に関する質問 → references/server-rendering.md、docs/advanced-ssr.md デプロイ → references/deployment-guide.md、docs/adapters-reference.md エラー → references/common-issues.md、references/troubleshooting.md

考慮すべき点:

• クエリの意図 (how-to か what-is かトラブルシューティングか)
• 統合固有の質問か単一パッケージの質問か
• 初心者向けか上級者向けのトピックか

ステージ 3: セクションの詳細を取得する

3～4 個の候補について、それぞれの sections.jsonl エントリを読みます:

Read references/sections.jsonl with offset: {index}, limit: 1
Read docs/sections.jsonl with offset: {index}, limit: 1

重要: index.jsonl のインデックス番号 = sections.jsonl の行番号

セクションの要約を分析して、どのセクションがクエリに対応するかを特定します。

ステージ 4: 対象セクションを読む

関連するセクションのみを読みます:

Read references/getting-started.md with offset: 45, limit: 89
Read docs/svelte5-api-reference.md with offset: 120, limit: 65

正確に読むために、sections.jsonl データの offset と limit を使用します。

ステージ 5: 統合して回答する

複数のソースから情報を組み合わせます:

1. ユーザーの質問への直接的な回答
2. コード例 (完全で実行可能なもの)
3. 統合固有の考慮事項
4. さらに読むためのファイル参照

ファイル参照の例:

See: references/svelte5-runes.md:156-245 (Server-Side Constraints)
See: docs/advanced-ssr.md:89-134 (SSR Load Functions)

例を含む完全な検索方法論については、references/documentation-search-system.md を参照してください

クイックスタート (5 分)

完全なチュートリアルについては、references/getting-started.md を検索してください

基本的なセットアップコマンド:

# 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

重要な設定:

• Tailwind プラグインは vite.config.js 内で SvelteKit プラグインより前に置く必要があります
• ルートの +layout.svelte で CSS をインポートしてください (app.html ではありません)
• Tailwind v4 パッケージには @next タグを使用してください

一般的なユースケース

セットアップと設定 → 検索: references/getting-started.md、references/project-setup.md → 主要セクション: Installation、Vite Configuration、Directory Structure

SSR を伴う Svelte 5 Runes → 検索: references/svelte5-runes.md → 重要: 「Server-Side Constraints」セクション - $state() は SSR では動作しません!

フォームとプログレッシブエンハンスメント → 検索: references/forms-and-actions.md → 主要パターン: rune 互換性のための手動 enhance()

コンポーネントのスタイリング → 検索: references/styling-with-tailwind.md、references/styling-patterns.md → 主要トピック: 動的クラス、ダークモード、コンポーネントパターン

データローディング → 検索: references/data-loading.md、docs/advanced-ssr.md → 主要パターン: load() データを rune の state に渡す

デプロイ → 検索: references/deployment-guide.md、docs/adapters-reference.md → プラットフォーム固有: Vercel、Cloudflare、Node、静的

エラーのトラブルシューティング → まず検索: references/common-issues.md (簡単な修正) → 次に: references/troubleshooting.md (体系的なデバッグ)

よくある問題と簡単な修正

本番環境で CSS が読み込まれない → 検索: references/common-issues.md の「CSS Loading Issues」セクション → 簡単な確認: Vite プラグインの順序、CSS インポートの場所

Runes による SSR エラー → 検索: references/svelte5-runes.md の「Server-Side Constraints」セクション → 簡単な修正: SSR コンポーネントで $state() や $effect() を使用しない

送信時にフォームの状態が失われる → 検索: references/forms-and-actions.md の「Handling use:enhance Reactivity」セクション → 簡単な修正: 手動の enhance() コールバックを使用する

HMR が壊れる → 検索: references/common-issues.md の「Hot Module Reload Problems」セクション → 簡単な修正: Vite プラグインの順序とファイル監視設定を確認する

Tailwind クラスが機能しない → 検索: references/styling-with-tailwind.md の「Content Detection and Purging」セクション → 簡単な修正: 設定の content パスを確認し、完全なクラス名を使用する

体系的なトラブルシューティングについては、references/troubleshooting.md を参照してください

統合パターン

サーバー + クライアントコンポーネントの分割

<script>
  export let data;
</script>

<ClientCounter initialCount={data.count} />


<script>
  let { initialCount } = $props();
  let count = $state(initialCount);
</script>

プログレッシブエンハンスメントを用いたフォーム

<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>

条件付き Tailwind クラス

<script>
  let active = $state(false);
</script>


<div class:bg-blue-500={active} class:bg-gray-200={!active}>
  Button
</div>


<div class="bg-{active ? 'blue' : 'gray'}-500">
  Button
</div>

完全なパターンについては、docs/integration-patterns.md を検索してください

ベストプラクティス

以下の包括的なガイダンスについては、references/best-practices.md を検索してください:

• プロジェクトの構成とアーキテクチャ
• コンポーネント設計パターン
• 状態管理の戦略
• スタイリングの規約
• パフォーマンスの最適化
• セキュリティに関する考慮事項
• テスト戦略
• アクセシビリティのガイドライン

移行ガイド

SvelteKit で Svelte 4 から Svelte 5 への移行 → 検索: references/migration-svelte4-to-5.md → 主なトピック: ストアからルーンへ、リアクティブステートメントから $derived へ、スロットからスニペットへ

Tailwind v3 から v4 への移行 → 検索: references/tailwind-v4-migration.md → 主なトピック: CSS ファースト設定、Vite プラグイン、構文の変更

パフォーマンスの最適化

以下については references/performance-optimization.md を検索してください:

• バンドルサイズの最適化
• CSS のパージと圧縮
• コード分割の戦略
• 画像とフォントの最適化
• 遅延読み込みのパターン
• Core Web Vitals の最適化
• Lighthouse スコアの改善

バージョン情報

このスキルが対象とするもの:

• SvelteKit: 2.x (最新の安定版)
• Svelte: 5.x (ルーン対応)
• Tailwind CSS: 4.x (CSS ファースト設定)

すべてのコード例とパターンは、これらのバージョンでテストされています。

ヘルプの入手

1. まず検索から始める: 上記の 5 段階の検索プロセスを使用します
2. よくある問題を確認する: 簡単な修正については references/common-issues.md
3. 体系的なデバッグ: 方法論については references/troubleshooting.md
4. リファレンスを参照する: 特定のトピックに関する問題志向のガイド
5. API ドキュメントを確認する: 設定の詳細に関する包括的なリファレンス

スキルの構造

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

配布モード

このスキルは 作成者のみ の配布を使用します:

• すべてのコンテンツは新規に作成されています
• ベンダーのドキュメントをそのまま転載していません
• ソース資料は参照のみに使用されています
• すべてのガイドは frontmatter で出典を引用しています (adapted_from)

覚えておいてください

実装する前に必ずドキュメントを検索してください! リサーチファーストのアプローチは、よくある間違いを防ぎ、統合のベストプラクティスに従うことを確実にします。

ステージ 0 (インデックスの発見) から始めて、すべての質問に対して 5 段階の検索プロセスを進めてください。