用途:该技能面向使用 SvelteKit 或 Svelte 5 代码的场景。资料指出,AI 代理多按 Svelte 4 模式训练,常生成基于 stores、响应式声明 $: 和 export let 的过时代码;本技能用于强制使用 Svelte 5 runes、load 函数与表单动作。
主要能力与规则:
- 用 Svelte 5 runes,不用 Svelte 4 stores 或响应式声明;$state、$derived、$effect 取代 stores 与 $:。
- 响应式状态用 $state,普通 let 不具响应性。
- 计算值用 $derived,而非 $:。
- 副作用用 $effect,而非 $: 响应式语句。
- 组件属性用 $props(),而非 export let。
- 双向绑定属性需用 $bindable()。
- 数据获取用 load 函数(+page.server.ts),而非 onMount 中 fetch。
- 表单提交用 form actions,而非为表单 POST 单独建 API 路由。
- 共享布局数据用 +layout.server.ts。
- 错误页用 +error.svelte 渲染 load/action 错误。
- 需要服务端与客户端共用数据时用 +page.ts,仅服务端数据用 +page.server.ts。
- 中间件(鉴权、重定向)用 hooks.server.ts 的 handle。
- 少用 $app/stores,优先通过 load 数据传参。
- 可复用模板片段用 Svelte 5 的 snippet 块与 @render。
常见模式:+page.server.ts 的 load 返回对象,+page.svelte 通过 $props() 接收 data;表单用 method="POST" 与 use:enhance;流式返回未 await 的 promise,模板用 {#await};TypeScript 使用 import type { PageServerLoad, PageProps } from './$types'。
限制与反模式:不要使用 svelte/store 的 writable、readable、derived、get;不要用 $: 做派生或副作用;不要用 export let 声明属性;SSR 需要的数据不要只在 onMount 中 fetch;不要仅为处理表单 POST 而建 +server.ts;未用 $bindable() 的属性不要用 bind:value。资料未提供安装命令、价格或平台信息。