SuperAPI AI 工具集

frontend-svelte

前端与建站

查看项目

更新于 10-15 21:09

技能介绍

用途:为 SvelteKit 5 开发提供技术参考,帮助构建响应式应用,覆盖 Svelte 5 的编译期响应式写法与 SvelteKit 的工程约定。

主要能力:

  • Svelte 5 Runes:$state、$derived、$effect、$props 的用法与边界。
  • 组件规范:单文件 .svelte 组件,默认 TypeScript,脚本→标记→样式结构,组件保持较小(<200 行),用 $props() 显式导出 props。
  • 状态管理:本地状态优先,跨组件用 Svelte stores 或 context;必要时用 writable、derived 创建 store。
  • SvelteKit 约定:+page.svelte、+page.server.ts、+layout.svelte 路由文件;在 +page.server.ts 中用 load 函数加载数据,用 actions 处理表单提交。
  • 表单与校验:bind:value 双向绑定,失焦时校验,提交用 form actions,交互后展示错误。
  • 样式:默认作用域样式,CSS 变量做主题,谨慎使用 :global()。
  • 性能:{#key} 强制重建、懒加载重组件、长列表虚拟化、防抖耗时操作。
  • 反模式:不用 $effect() 做派生状态、不为一切建 store、不直接修改 props、避免嵌套响应式语句、不滥用 bind:。

使用方式:资料给出 MCP 使用优先级——先查 svelte 官方文档,第三方库用 context7(如 shadcn-svelte 路径 /huntabyte/shadcn-svelte),未覆盖时用 web_search。资料含少量代码片段示例(Runes、store、load 与 actions),实际使用时应以官方文档为准。

适用场景:SvelteKit 5 项目开发、组件与状态设计、路由数据加载与表单处理、性能优化与代码规范审查。

限制:资料为技术参考,未提供安装命令、版本要求、收费或平台信息;具体 API 细节与最新变更需查阅官方文档。