Agent Skills
› lichtblick-suite/lichtblick
lichtblick-suite/lichtblick
GitHub提供基于THREE.js的3D渲染技能，涵盖WebGL管线、动态缓冲区管理（无几何倍增）、点云渲染优化及TF树变换解析。适用于构建高性能3D可视化面板，处理场景优化与数据流更新。
Install All Skills
npx skills add lichtblick-suite/lichtblick --all -g -y
Skills in Collection (26)
提供基于THREE.js的3D渲染技能，涵盖WebGL管线、动态缓冲区管理（无几何倍增）、点云渲染优化及TF树变换解析。适用于构建高性能3D可视化面板，处理场景优化与数据流更新。
需要实现或优化基于THREE.js的3D可视化功能
处理WebGL渲染性能问题
管理动态几何体缓冲区或点云数据
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析Lichtblick预加载子系统的缓存内部机制，涵盖CachingIterableSource的LRU淘汰策略、内存预算管理及BlockLoader的优先级加载逻辑。
询问Lichtblick缓存实现细节
分析数据预加载与内存管理策略
排查回放过程中的缓存命中或淘汰问题
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
将原始二进制消息数据转换为结构化 JavaScript 对象。支持 ROS1/2、Protobuf、Flatbuffers 等多种格式的解码，通过 parseChannel 分发并封装为 DeserializingIterableSource 实现流式反序列化与 WASM 解压。
需要将 MCAP 等二进制源数据解析为 JS 对象
处理不同 schema 编码的通道反序列化
需要配置 WASM 压缩格式（zstd/lz4/bz2）的解压器
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于Playwright MCP的E2E测试开发指南，涵盖Lichtblick项目的Web与Electron架构、文件命名规范、@smoke/@regression标签策略及桌面/Web端Fixtures引用，辅助AI高效编写高质量自动化测试。
编写Playwright E2E测试脚本
查询Lichtblick项目测试架构与配置
确定测试标签(@smoke或@regression)
查找Desktop或Web端Fixture用法
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供Electron内部机制知识，涵盖主/渲染进程通信、contextBridge模式、BrowserWindow生命周期及原生菜单集成。强调安全规范，如隔离Node访问、禁止直接暴露ipcRenderer，并解析多桥接架构与窗口管理实现细节。
询问Electron进程架构
配置contextBridge或preload脚本
处理BrowserWindow生命周期
集成原生菜单系统
解决Electron安全限制问题
npx skills add lichtblick-suite/lichtblick --skill electron-internals -g -y
提供扩展系统底层实现知识，涵盖IExtensionLoader接口、IndexedDB存储结构、版本缓存策略、贡献点注册及.sandbox沙箱机制。
查询扩展加载器接口定义与实现
了解IndexedDB扩展存储Schema
分析扩展安装与加载流程
确认命名空间隔离机制
npx skills add lichtblick-suite/lichtblick --skill extensions-internals -g -y
解析布局系统底层实现，涵盖ILayoutStorage接口、IndexedDB存储结构、NamespacedLayoutStorage命名空间封装及WriteThroughCache缓存机制，用于深入理解布局数据的CRUD操作与同步逻辑。
查询布局存储接口定义
分析IndexedDB数据库Schema
了解命名空间存储包装器实现
探究布局数据读写流程
npx skills add lichtblick-suite/lichtblick --skill layouts-internals -g -y
提供MCAP文件格式规范知识，涵盖二进制结构、记录类型、索引策略及压缩选项。旨在指导创建优化Lichtblick读取性能的MCAP文件，包含格式概览、头部、数据段、摘要段等详细结构说明。
询问MCAP文件格式细节
分析MCAP文件结构
优化MCAP文件以改善Lichtblick性能
了解MCAP记录类型和索引
npx skills add lichtblick-suite/lichtblick --skill mcap-format -g -y
提供ROS/Foxglove消息路径的DSL解析、数据提取及React集成能力。支持字段访问、数组切片过滤等语法，用于Plot等面板高效提取嵌套消息数据。
需要解析或构建ROS消息路径字符串
从Foxglove消息中提取特定嵌套字段数据
在React组件中优化大量消息路径的数据提取性能
npx skills add lichtblick-suite/lichtblick --skill message-path -g -y
解析MessagePipeline数据总线，涵盖Zustand状态管理、React上下文、订阅合并及渲染流程。用于理解Player与Panel间的数据交互、状态更新机制及性能优化策略。
查询MessagePipeline架构或数据流
调试面板状态同步问题
了解订阅合并与去重逻辑
分析Zustand store结构
npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y
提供面板扩展基础设施知识，涵盖PanelExtensionAdapter、增量渲染状态构建、上下文API、背压机制及面板生命周期管理。
询问面板扩展架构
查询RenderState增量构建逻辑
了解PanelExtensionContext API用法
排查pauseFrame背压问题
咨询面板生命周期钩子
npx skills add lichtblick-suite/lichtblick --skill panel-extension-api -g -y
解析ThreeDeeRender中ImageMode面板机制，涵盖Worker解码、相机投影及标注渲染。
询问3D面板图像显示原理
查询Worker图片解码流程
了解相机模型与标注叠加逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-image -g -y
高性能日志面板技能，基于react-window实现虚拟滚动与动态行高缓存。支持ROS1/2及Foxglove格式归一化，提供按级别和文本的高效过滤，具备智能自动滚动功能，适用于大规模日志数据展示。
查看或调试系统日志
分析ROS或Foxglove格式的日志数据
需要高性能渲染大量日志条目
对日志进行级别筛选或关键词搜索
npx skills add lichtblick-suite/lichtblick --skill panel-log -g -y
基于Leaflet的地理可视化面板，支持NavSatFix、GeoJSON等GPS数据。核心包含FilteredPointLayer，通过像素级稀疏网格去重优化渲染性能，实现海量点位的高效展示与自动居中功能。
需要查看或调试GPS轨迹数据
分析地图面板的性能瓶颈
配置自定义瓦片图层或地图行为
npx skills add lichtblick-suite/lichtblick --skill panel-map -g -y
解析RawMessages面板知识，涵盖遗留与虚拟化两种实现、树数据扁平化、展开状态管理及Diff模式。适用于需深入理解消息检查面板底层逻辑、性能优化及共享核心代码的开发场景。
需要查看或修改RawMessages面板的渲染逻辑
处理消息数据的树形结构转换与展开状态管理
调试或优化消息对比（Diff）功能
npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -g -y
解析离散状态转换面板知识，涵盖时间轴可视化、消息路径提取、250ms批量刷新机制及高性能数据集转换。
询问关于 StateTransitions 面板的实现细节或结构
需要优化或理解基于时间的图表渲染逻辑
查询如何配置消息路径以提取特定状态值
分析高频率消息下的性能瓶颈与批处理策略
npx skills add lichtblick-suite/lichtblick --skill panel-state-transitions -g -y
提供面板用户脚本技能的深度知识，涵盖Monaco编辑器集成、TypeScript编译、沙箱运行时执行及脚本API。用于指导自定义消息转换脚本的编写、调试与架构理解。
用户询问关于UserScripts面板的功能或配置
需要解释Monaco编辑器在脚本中的集成方式
涉及TypeScript编译、Worker隔离或沙箱执行机制的问题
查询脚本生命周期、性能优化或错误处理策略
npx skills add lichtblick-suite/lichtblick --skill panel-user-scripts -g -y
提供Lichtblick代码库的性能优化指南，涵盖Chrome DevTools剖析流程、常见瓶颈（消息处理、渲染、内存）及零拷贝、对象池等优化模式。
性能分析与调优
解决卡顿或帧率问题
内存泄漏排查
实时数据可视化性能优化
npx skills add lichtblick-suite/lichtblick --skill performance -g -y
详解IterablePlayer状态机、Tick循环及数据源迭代架构。涵盖状态转换逻辑、带预算控制的播放循环、防抖状态发射机制，以及序列化/反序列化数据源的包装与缓存层级结构。
询问播放器内部状态机逻辑
分析播放性能或Tick实现
排查数据源迭代与缓存问题
npx skills add lichtblick-suite/lichtblick --skill player-internals -g -y
提供Plot面板的Chart.js Worker架构深度知识，涵盖数据集构建、5万点累积上限、5000点渲染预算及基于像素区间的自定义降采样算法，强调非LTTB机制。
查询Plot面板渲染性能优化策略
询问图表数据降采样具体实现逻辑
排查Worker与主线程通信及数据集管理问题
npx skills add lichtblick-suite/lichtblick --skill plot-internals -g -y
解析远程MCAP文件读取的HTTP层缓存机制，涵盖BrowserHttpReader、FetchReader流式传输及CachedFilelike组件。重点说明LRU块缓存、单连接管理算法、并发控制及内存预算策略，用于优化大文件远程访问性能。
需要实现或优化远程大文件的流式读取
排查HTTP缓存失效或内存溢出问题
理解MCAP索引文件的异步加载流程
npx skills add lichtblick-suite/lichtblick --skill remote-caching -g -y
定义Lichtblick仓库中所有测试代理的共享约定，包括GWT模式、核心质量规则及标准测试编写工作流。
需要编写单元测试或E2E测试
询问测试规范或最佳实践
npx skills add lichtblick-suite/lichtblick --skill test-conventions -g -y
掌握 Material-UI 主题系统，包括深色/浅色调色板、字体比例及 createMuiTheme 工厂方法。遵循 tss-react/mui 样式规范，禁止使用 sx 或 styled。核心配置以 palette.ts 和 typography.ts 为准。
创建或修改 MUI 主题配置
实现组件的 CSS-in-JS 样式逻辑
查询色值或字体定义
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供Lichtblick单体仓库的单元测试技能，基于ADR-0002规范。通过可复用的Mock Builders（如PlayerBuilder）自动生成有效测试数据，支持默认值、字段覆盖及复杂对象组合，提升测试代码的一致性与可读性。
需要编写单元测试时
构建或修改测试数据时
使用Mock Builder模式时
npx skills add lichtblick-suite/lichtblick --skill unit-testing -g -y
规范 Lichtblick 中 Web Worker 的使用模式，涵盖 ComlinkWrap 生命周期管理、FinalizationRegistry 防泄漏、AbortSignal/OffscreenCanvas/ArrayBuffer 传输处理、Webpack URL 兼容及 SharedWorker 隔离策略。
需要创建 Web Worker 进行后台计算
涉及 OffscreenCanvas 或大二进制数据跨线程传输
需要确保 Worker 资源正确释放以防内存泄漏
使用 SharedWorker 实现多标签页共享
npx skills add lichtblick-suite/lichtblick --skill web-workers -g -y
处理机器人或仿真器到可视化的实时数据流。涵盖Foxglove WebSocket协议握手、订阅管理、二进制消息传输及RAF帧同步，利用Worker线程优化性能并实现自动重连。
建立WebSocket实时连接
解析Foxglove协议消息
配置Worker通信与状态发射
npx skills add lichtblick-suite/lichtblick --skill websocket-connection -g -y
