用途：设计泳道式（swimlane）UI 模式，用于实时可视化 AI 开发工作流（ADW）的执行情况，适合构建可观测性仪表盘、监控智能体工作流进度、制作实时状态显示、设计事件检查界面及工作流调试工具。
主要能力：提供泳道布局规范（按步骤分列 Plan、Build、Review、Fix、Status，含 Pending/Active/Complete/Failed 状态图标与颜色）；事件卡片设计（按事件类型区分图标与边框样式，如 TextBlock、ToolUseBlock、ThinkingBlock、PreToolUse、PostToolUse、StepStart、StepEnd）；状态面板（成本、Token、时长指标）；实时更新（WebSocket 订阅与事件缓冲，含 100ms flush 示例）；过滤与导航（按步骤、类型、搜索词筛选，实时模式开关）；事件详情面板（类型、步骤、时间、时长、工具、路径、摘要、原始负载）；并附设计检查清单与反模式表。
使用方式：需了解 WebSocket 架构与钩子事件模式，并具备 Vue/React 等前端开发能力；该技能只提供 UI 规范与组件模式（含 Lane、EventCard、StatusPanel 示例模板），实际实现需自行完成前端开发。
限制：文中指出事件类型名称、钩子事件负载及 Claude Code 内部 API 属于动态内容，可能随版本变化，硬编码前须通过 hook-management 技能委托 docs-management 获取权威文档。
分类：该技能面向 AI 智能体工作流监控与前端可视化设计，归入智能体与模型。