Opik Frontend 是 Opik 项目前端的 React 开发模式与规范集合，适用于在 apps/opik-frontend 目录下处理组件、状态或数据获取时参考。
架构决策：路由使用基于文件的 TanStack Router；数据获取使用 TanStack Query，禁止使用原生 fetch 或 useEffect；全局状态用 Zustand，局部状态用 React state；组件基于 shadcn/ui 与 Radix UI；表单使用 React Hook Form 配合 Zod 校验。
关键注意点：不要用 useEffect 做数据获取，应使用 useQuery，例如 const { data } = useQuery({ queryKey: ['data'], queryFn: fetchData })。记忆化需有选择性：复杂计算和大数据转换用 useMemo，传给子组件的函数用 useCallback，简单值、原始类型和局部函数无需记忆化。使用 Zustand 时应选择具体字段，避免选择整个 store 导致重渲染。
分层架构为 ui → shared → pages-shared → pages，仅单向依赖，禁止循环依赖和跨页面导入。修改导入后运行 npm run deps:validate。状态位置：URL 状态用于筛选、分页、选中项；Zustand 用于用户偏好和跨组件状态；React state 用于表单输入和 UI 开关。
组件结构建议按状态钩子、查询/变更、记忆化、事件处理器的顺序组织，并处理加载与错误状态。查询模式包括带参数的查询和带失效的变更，变更成功后通过 queryClient.invalidateQueries 失效相关查询。
参考文件涵盖 forms.md、ui-components.md、responsive-design.md、testing.md、code-quality.md、performance.md 等主题。资料未提供安装命令、收费信息或具体平台限制。