本技能提供在 Gram 仪表盘与 elements React 前端代码库中工作时的规则与最佳实践，属于前端编码规范类资料。
用途：统一团队在 React 前端开发中的代码风格、组件组织与性能处理方式，减少重复代码和常见错误。
主要能力与要求：
- 通用规范：使用 pnpm 包管理器；与服务器交互优先使用 @gram/sdk（位于 ./client/sdk 工作区）；数据获取与服务端状态使用 @tanstack/react-query，避免手写 useEffect/useState 模式；变更后失效 React Query 缓存时需失效所有相关查询键，可使用 invalidateAllToolset(queryClient) 等宽泛失效辅助函数。
- 组件结构与复用：出现超过两处的 UI 模式必须集中化；写 JSX 前先检查 client/dashboard/src/components/ 是否已有组件；相同 Tailwind className 在 3 处以上应提取为组件内置样式、cva 变体或 cn() 中的具名常量；禁止复制粘贴 JSX 块；禁止在 JSX 中使用 IIFE；组件 JSX 超过约 150 行需要拆分。
- React 性能模式：用 useMemo 提升 RegExp 创建，不在渲染回调中新建 RegExp；用 useDeferredValue 延迟昂贵搜索计算；在渲染期派生状态而非用 useEffect 同步；数据变化时重置键盘导航状态（如 currentLogIndex）。
- Tooltip 使用：App.tsx 已在全局包裹 TooltipProvider，禁止在组件内再添加 TooltipProvider，直接使用 Tooltip、TooltipTrigger、TooltipContent，简单场景可用 @/components/ui/tooltip 中的 SimpleTooltip。
- 样式与设计系统：必须使用 @speakeasy-api/moonshine 的 Moonshine 设计系统工具，禁止硬编码 Tailwind 颜色（如 bg-neutral-100、border-gray-200、text-gray-500）；@tailwindcss/typography 必须保留在 devDependencies 中，因为仪表盘直接使用 prose 和 not-prose 类。
适用场景：Gram 仪表盘相关 React 前端功能开发、审查与重构。
限制：本次资料未提供具体安装命令、版本要求、收费信息及平台限制；部分规则引用内部文件路径与 issue 编号，需结合仓库实际使用。