Agent Skills
返回列表
💻

前端开发

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @kunlungrowth/frontend-development。

技能介绍

要解决什么问题

在 React/TypeScript 项目里，常见痛点是：取数与 loading 写法不统一导致布局抖动（CLS）、目录随意增长难以维护、以及 TanStack Query / Router 与 MUI 版本混用时的约定缺失。本技能把「团队级前端约定」写成可执行的工作流，让生成的组件与特性代码在结构、取数模式和 TypeScript 上保持一致。

技能如何工作

技能按六步推进，并产出结构化工件 FrontendPlan（目标、目录、模式、样例片段）：

  • 组件层：React.FC + 严格 TS；重组件用 React.lazy；取数默认 useSuspenseQuery；路径别名 @/、~types、~components、~features；样式文件独立；子组件回调用 useCallback；通知统一 useMuiSnackbar。
  • 特性层：在 features/{name}/ 下划分 api/、components/、hooks/、helpers/、types/，配套 routes/{name}/index.tsx，懒加载 + Suspense，从 index.ts 导出公共 API。
  • 路由与 API：createFileRoute + loader 面包屑；业务路由形如 /form/route，API 集中在 *Api.ts 服务层。
  • 加载与错误：禁止组件内早返回 loading；用 SuspenseLoader 包裹；错误走 MUI Snackbar，而非 react-toastify。
  • 性能与 TS：useMemo / useCallback / React.memo；搜索防抖 300–500ms；useEffect 清理；strict、禁 any、import type、函数显式返回类型。
  • 样式：MUI v7 的 Grid 使用 size={{ xs, md }}，样式以 sx + SxProps 为主。

下游可把 FrontendPlan 交给视觉或样式类技能；本技能聚焦代码结构与工程模式。

适用边界

适用于新建组件/页面、特性开发、TanStack Query 取数、TanStack Router、MUI v7 与性能/组织优化。不适用纯视觉设计（应使用 frontend-design）与后端实现。

使用场景

  • 新建「订单列表」特性：在 `features/orders` 搭目录，用 `useSuspenseQuery` 拉列表并注册 `/orders` 路由。
  • 页面首屏要懒加载重组件，且不能用早返回 loading，需用 `SuspenseLoader` 包住避免 CLS。
  • 团队统一取数写法：把散落 fetch 收敛到 `ordersApi.ts`，路由 loader 配面包屑与 `createFileRoute`。
  • 表单/列表页用 MUI v7 的 `Grid` 与 `sx` 布局，样式文件控制在独立模块而非堆在组件里。

适合人员

  • 负责 React 业务仓的前端，要把新页面按 `features/{name}` 拆分并统一 TanStack Query 缓存策略。
  • 带 3～5 人前端小组的 Tech Lead，需要把 Suspense 取数、懒加载和 TS strict 写成可复制的 PR 模板。
  • 从旧项目迁移的工程师，要把 `react-toastify` 和手写 loading 改成 `useMuiSnackbar` + Suspense 边界。
  • 用 TanStack Router 做多级表单的开发者，要规范 `/form/route` 路径与 API 层而不是把请求写在页面组件里。