用途：该技能适用于构建或调试 xterm.js 终端实现、将 xterm.js 与 React（hooks、state、refs）集成、实现基于 WebSocket 的终端 I/O、用 tmux 等后端管理终端持久化、把终端相关 React 组件重构为自定义 hooks、排查初始化/resize/渲染问题、实现分屏布局或多窗口终端，以及处理 detach/reattach 功能。
主要能力与关键模式：
- refs 与 state 管理：ref 跨状态变化持续存在，清除 state 时须同步清除相关 ref，否则同一 agentId 重连消息会被忽略。
- WebSocket 消息类型：disconnect 为优雅断开并保留会话，close 为强制关闭并杀死会话（破坏性），detach 应仅调用 API 端点，不发 WebSocket 消息。
- React hooks 重构：抽取共享资源的 hook 时，若 ref 在 hook 外被使用，应作为参数传入而非在 hook 内新建。
- 终端初始化：xterm.js 不能在 0x0 尺寸容器上初始化，应使用 visibility 隐藏而非 display:none。
- useEffect 依赖：提前 return 的 effect 需把 ref.current 加入依赖，待 ref 可用后重跑。
- 会话命名与重连：重连时使用已有 sessionName，不要生成新名字。
- 多窗口管理：后端输出路由须按归属追踪，只发给持有该终端的 WebSocket，不可广播；前端按 windowId 过滤终端。
- 测试流程：重构后立即实测，依次验证编译、spawn、输入、resize、TUI 工具与日志。
- 调试：先加诊断日志再修复，便于定位代码路径与数据不匹配。
- 多步状态变更：同时更新 Zustand 状态、refs、WebSocket 通知、事件监听与 localStorage。
- tmux 分屏与 EOL 转换：共享 tmux 会话的多个 xterm 实例须设置 convertEol: false，避免输出错乱，并将 scrollback 设为 0。
- resize 与输出协调：输出活跃时不应 resize，可设 500ms 静默期；tmux 用两步 resize 技巧（先减一列再恢复）强制重绘，resize 后清空写入队列，重连时先缓冲输出 1000ms 再刷新并强制 resize；快速连续 resize 需记录并取消挂起的延时操作。
- tmux resize 策略：tmux 会话跳过 ResizeObserver，仅在初次连接与浏览器窗口真实 resize 时调整，避免焦点、点击、布局变化触发多余 SIGWINCH。
限制与说明：相关 best practices 具体代码示例与 references 目录下的详细文档（如 refs-state-patterns.md、websocket-patterns.md、react-hooks-patterns.md、resize-patterns.md 及 CLAUDE.md 的多窗口章节）需查阅原始资料；本资料未提供安装命令、依赖版本、收费信息与平台支持说明。