skill/fullstack-task/references/frontend.md

@@ -0,0 +1,43 @@
+# 前端规范
+
+## 组件
+
+- 一个组件一个职责
+- 展示组件与容器组件分离
+- props 用 TypeScript 定义
+- 避免超过 200 行，超出则拆
+
+## 状态
+
+- 局部状态用 useState
+- 跨组件用 Context 或状态库
+- 服务端状态用 TanStack Query
+- 避免把服务端数据放进全局 store
+
+## 数据获取
+
+- Next.js 优先 Server Components
+- 客户端请求要有 loading / error / empty
+- 请求失败要有重试或提示
+
+## 表单
+
+- React Hook Form + Zod
+- 前端校验 + 后端校验
+- 提交中禁用按钮
+- 错误定位到字段
+
+## 可访问性
+
+- 语义化标签
+- 图片有 alt
+- 表单有 label
+- 键盘可操作
+- 颜色对比度达标
+
+## 性能
+
+- 图片用 next/image
+- 路由级代码分割
+- 长列表虚拟化
+- 避免不必要的 re-render