mcpField
S
sveltekit-structure

sveltekit-structure

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

sveltekit-structure について

SvelteKit のルート、レイアウト、エラーバウンダリーを整理するリファレンススキルです。SvelteKit アプリを構成する開発者向けに、ファイルパスの例とルート設計、ブラウザー専用コードの注意点を示します。

主な機能

  1. 01SvelteKit ファイルの役割を説明
  2. 02ディレクトリ構造とルートパスの対応を解説
  3. 03ネストされたレイアウトの構成を提示
  4. 04ルートのエラーバウンダリー配置を説明
  5. 05ルートグループとブラウザー専用コードの注意点

活用シーン

  1. 01SvelteKit のルートツリーを設計
  2. 02ページや API エンドポイントのファイルを選択
  3. 03ネストされた領域のレイアウトを整理

インストール

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

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

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

同梱ファイル

SKILL.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 を確認
  • 最終確認日： 2026-05-14

コメント

Markdown 対応