SuperAPI AI 工具集

svelte-ui-integration

前端与建站

查看项目

更新于 10-15 20:07

技能介绍

用途:在 SvelteKit 应用中实现或扩展面向用户的功能流程,利用其全栈能力,包括 load 函数、表单 action 和 API 路由,并遵循 SvelteKit 的路由、状态管理与渐进增强约定。

适用场景:功能主要是 UI/UX 变更且依托 SvelteKit 架构;需要服务端渲染与客户端交互结合的渐进增强;后端契约、认证模型与核心业务规则已存在或将以 SvelteKit API 路由实现;变更仅影响 SvelteKit 应用,不涉及外部服务。

主要能力与约定:使用 TypeScript;基于文件的路由,涉及 +layout.svelte、+page.svelte、+page.server.ts;样式可用 shadcn-svelte、Skeleton UI、Melt UI 或内部设计系统组件,使用组件时调用 shadcn-svelte-management 技能发现组件、获取安装命令并选择组件库;状态管理优先使用 Svelte stores、响应式语句和表单 action;数据获取使用 load 函数。需为 props、load 数据与表单 action 提供强类型,处理加载、空、错误、成功状态,保证键盘可访问与屏幕阅读器友好,支持无 JavaScript 可用、有 JavaScript 增强的渐进增强,并遵守功能开关。

产出与验证:更新 src/lib/components/ 中的组件与 action,在 +page.server.ts 或 +layout.server.ts 中编写 load 函数,编写表单 action、单元测试及仓库已有的集成/组件测试,并在 PR 中提供简要变更说明。验证命令示例:pnpm lint、pnpm test -- --runInBand --watch=false、pnpm check、pnpm build、pnpm preview。

限制:不创建新后端服务或更改持久化数据模型,不修改认证/授权流程,不引入新前端框架或设计系统。若需外部后端契约变更应停止并改提后端任务;设计参考与无障碍标准冲突时优先无障碍并在 PR 中说明。