mcpField
S
sveltekit-structure

sveltekit-structure

github.com/spences10開発941.1k 回インストール2 週間前に更新
リポジトリ

sveltekit-structure について

sveltekit-structureは、SvelteKit開発者向けにルーティングとファイル構成を説明する開発スキルです。ネストしたレイアウトやエラー境界、関連資料を扱います。

主な機能

  1. 01ページ・レイアウト・サーバーファイルを解説
  2. 02ルートと動的ルートの対応を提示
  3. 03ネストしたレイアウトの適用範囲を説明
  4. 04エラー処理とSSRの参考資料を掲載

活用シーン

  1. 01SvelteKitのルート構成の設計
  2. 02ネストしたルートへのレイアウト適用
  3. 03エラー境界やブラウザー専用コードの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/spences10/svelte-skills-kit --skill sveltekit-structure

インストール後、Claude Code で/sveltekit-structureを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/
error-handling.md
file-naming.md
layout-patterns.md
ssr-hydration.md
svelte-boundary.md

詳細

SvelteKit の構造

クイックスタート

ファイルの種類： +page.svelte（ページ） | +layout.svelte（ラッパー） | +error.svelte（エラーバウンダリ） | +server.ts（API エンドポイント）

ルート： src/routes/about/+page.svelte → /about | src/routes/posts/[id]/+page.svelte → /posts/123

レイアウト： すべての子ルートに適用されます。任意の階層にある +layout.svelte が 子孫のルートをラップします。

例

src/routes/
├── +layout.svelte              # Root layout (all pages)
├── +page.svelte                # Homepage /
├── about/+page.svelte          # /about
└── dashboard/
    ├── +layout.svelte          # Dashboard layout (dashboard pages only)
    ├── +page.svelte            # /dashboard
    └── settings/+page.svelte   # /dashboard/settings


<script>
	let { children } = $props();
</script>

<nav></nav>
<main>{@render children()}</main>
<footer></footer>

リファレンスファイル

メモ

  • レイアウト：{@render children()} | エラー：失敗するルートの 上位 に +error.svelte を配置
  • グループ：(name) フォルダーは URL に影響しません | クライアント専用：browser を確認
  • 最終確認日： 2025-01-11

コメント

Markdown 対応