mcpField
S
sveltekit-structure

sveltekit-structure

github.com/spences10开发941.1k 次安装2 周前更新
代码仓库

关于 sveltekit-structure

sveltekit-structure 是一项介绍 SvelteKit 路由与文件组织的开发技能，面向构建 SvelteKit 项目的开发者。它涵盖嵌套路由布局、错误边界及相关参考资料。

主要功能

  1. 01说明页面、布局和服务端文件类型
  2. 02展示路由与动态路由映射
  3. 03解释嵌套布局的作用范围
  4. 04提供错误处理及 SSR 参考

适用场景

  1. 01规划 SvelteKit 路由文件结构
  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