mcpField
S
sveltekit-structure

sveltekit-structure

github.com/spences10开发16101 次安装16 周前更新
代码仓库

关于 sveltekit-structure

用于梳理 SvelteKit 路由、布局和错误边界的参考技能，面向构建 SvelteKit 应用的开发者。它以文件路径示例说明路由组织，并提示路由组和仅浏览器端代码的处理方式。

主要功能

  1. 01说明 SvelteKit 文件的用途
  2. 02解释目录结构对应的路由路径
  3. 03展示嵌套布局的组织方式
  4. 04介绍路由错误边界的位置
  5. 05提示路由组和仅浏览器端代码

适用场景

  1. 01规划 SvelteKit 路由目录树
  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