ReactJS (Vite SPA) Developer
该技能用于构建生产可用的 ReactJS Web SPA 功能，技术栈为 Vite、React Router、TanStack Query、Zustand、Tailwind CSS、Framer Motion 和 ApexCharts。所有功能消费共享的 Rails API 后端。技能归属 std-reactjs（限定于 Vite SPA 工作）。
开发工作流
第 1 步：理解功能 明确需要哪些页面/路由及其 URL 结构；识别数据需求，即消费哪些 Rails API 端点；确定客户端状态需求（过滤器、侧边栏、主题）；检查是否需要实时更新（Centrifugo 订阅）；识别动画或图表需求。
第 2 步：定义领域类型 在 web/src/domain/ 或 web/src/types/ 中创建 TypeScript 类型。示例（节选）：在 web/src/domain/order.ts 中定义 Order 接口（id、status、totalAmount、items、createdAt）和 OrderStatus 联合类型（'pending' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled'）。要求纯 TypeScript，不引入 React；在 hooks、组件和 API 客户端间共享。
第 3 步：构建 API 层 在 web/src/api/ 中创建 TanStack Query hooks。示例文件 web/src/api/orders.ts 中引入 useQuery、useMutation、useQueryClient、apiClient 以及类型，导出的 useOrders 使用 queryKey ['orders', params]、queryFn 调用 apiClient.get('/api/v1/orders', { params }) 并设置 staleTime: 30_000；useCreateOrder 使用 mutationFn 调用 apiClient.post('/api/v1/orders', payload)，并在 onSuccess 中失效 ['orders'] 查询。
第 4 步：构建页面组件 在 web/src/pages/ 中创建页面组件：页面保持轻量，组合 hooks 与展示型组件；所有样式使用 Tailwind CSS；将交互区块包裹在 <Suspense> 边界中。
第 5 步：配置路由 在 web/src/router/index.tsx 中添加懒加载路由，例如 const OrdersPage = lazy(() => import('../pages/Orders')); 并在路由配置中加入适当的鉴权守卫。
第 6 步：添加动画（可选） 使用 Framer Motion 实现页面过渡与微交互，示例使用 AnimatePresence mode="wait" 包裹 motion.div，设置 key={pathname}、initial/animate/exit 的透明度与位移，transition duration 0.2。
第 7 步：添加图表（可选） 使用 ApexCharts 实现仪表盘可视化，示例引入 react-apexcharts 的 Chart，设置 type="area"、height={350}、options 中 chart.id 为 'revenue'、xaxis.categories 为 months，series 为 [{ name: 'Revenue', data: revenueData }]。
第 8 步：添加表单 所有表单使用 react-hook-form + zod。示例用 z.object 定义 schema（email 为字符串邮箱、name 至少 1 字符），通过 z.infer 得到 FormData 类型，并用 useForm<FormData> 配合 zodResolver(schema) 获取 register、handleSubmit、formState.errors。
第 9 步：测试 为所有组件编写 Vitest + React Testing Library 测试，使用 MSW mock API 调用，测试用户交互而非实现细节，查询优先级：getByRole > getByLabelText > getByText > getByTestId。
完成前检查清单 TypeScript 严格模式，无 any 类型；所有路由懒加载；服务端数据放在 TanStack Query，仅客户端状态放在 Zustand；表单使用 react-hook-form + zod；所有样式使用 Tailwind CSS（不用内联样式或 CSS 模块）；响应式设计（移动优先断点）；可访问性：语义化 HTML、键盘导航、ARIA 标签；使用 Vitest + React Testing Library 编写测试；使用 vite-bundle-visualizer 检查包体积。
深度指南（按需阅读，不预加载） 页面组件、鉴权守卫、react-hook-form + zod + Tailwind、cn() 工具 → references/component-patterns.md；Zustand 持久化、React Router 配置、带拦截器的 axios 客户端、Vitest + MSW 测试 → references/data-patterns.md；Framer Motion 页面/列表过渡、ApexCharts 收入与环形图 → references/ui-patterns.md。
这些是决策型的，带有坏/好对照对。上述三个文件是成型的模式；以下回答用哪种模式及原因：状态放置——Zustand vs TanStack Query vs 本地 → @skills/std-reactjs/references/state-placement.md；数据获取（TanStack Query + axios）、staleTime/gcTime、key 工厂 → @skills/std-reactjs/references/data-fetching.md；路由、代码分割与包体积预算 → @skills/std-reactjs/references/routing-and-code-split.md；表单（react-hook-form + zod）→ @skills/std-reactjs/references/forms.md；测试（Vitest + RTL + MSW）→ @skills/std-reactjs/references/testing.md；动画（Framer Motion）→ @skills/std-reactjs/references/animation.md；图表（ApexCharts）→ @skills/std-reactjs/references/charts.md。
初始 JS 预算：小于 300KB 压缩/未压缩——由 vite.config.ts 中的 chunkSizeWarningLimit: 300 强制，即构建已检查的数字。staleTime 刻意按查询设置，而非单一默认值：data-fetching.md 中有对应表格。