Agent Skills
› lichtblick-suite/lichtblick
lichtblick-suite/lichtblick
GitHub提供THREE.js WebGL渲染、动态缓冲几何体管理及点云数据处理等3D面板开发知识，涵盖渲染管线、性能优化及TF坐标转换，辅助前端3D可视化功能实现。
Install All Skills
npx skills add lichtblick-suite/lichtblick --all -g -y
Skills in Collection (27)
提供THREE.js WebGL渲染、动态缓冲几何体管理及点云数据处理等3D面板开发知识，涵盖渲染管线、性能优化及TF坐标转换，辅助前端3D可视化功能实现。
需要配置或优化THREE.js渲染器
处理WebGL缓冲区与几何体内存管理
实现点云数据的高效渲染与过滤
解决3D场景中的坐标变换与层级问题
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析Lichtblick预加载子系统的缓存内部机制，涵盖CachingIterableSource的内存预算、LRU驱逐及Key设计，以及BufferedIterableSource的前向读取、生产者-消费者协调与背压控制。
查询数据流预加载策略
分析内存缓存淘汰逻辑
理解播放器缓冲与背压机制
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
提供MCAP数据反序列化能力，支持ROS、Protobuf等多种格式解析，通过parseChannel分发解码并封装为DeserializingIterableSource流式处理二进制消息。
解析MCAP文件中的二进制消息数据
需要将原始字节转换为结构化JavaScript对象
处理不同Schema编码的反序列化逻辑
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的端到端测试开发指南，涵盖 Web 与 Electron 双平台架构、文件组织规范、命名规则及 CI 标签策略。
编写 E2E 测试用例
配置 Playwright 测试环境
确定测试文件路径和命名
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
解析Electron核心机制，涵盖主渲染进程通信、contextBridge模式、窗口生命周期及原生菜单集成。旨在提供安全架构指导与开发规范，辅助开发者构建高效稳定的桌面应用。
询问Electron主进程与渲染进程通信方式
需要配置contextBridge或preload脚本
调试BrowserWindow生命周期问题
实现原生菜单或处理深链接
npx skills add lichtblick-suite/lichtblick --skill electron-internals -g -y
详解扩展系统内部实现，涵盖IExtensionLoader接口契约、三种加载器类型、IndexedDB存储方案、版本缓存策略及.foxe打包格式，辅助开发者理解与集成扩展功能。
需要实现或修改扩展加载逻辑
查询扩展安装卸载流程
调试扩展存储相关错误
npx skills add lichtblick-suite/lichtblick --skill extensions-internals -g -y
提供前端布局系统底层实现知识，涵盖ILayoutStorage接口、IndexedDB存储、命名空间管理及缓存机制，用于辅助理解布局状态同步与冲突解决。
查询布局存储接口定义
分析IndexedDB数据结构
排查布局同步或缓存问题
npx skills add lichtblick-suite/lichtblick --skill layouts-internals -g -y
提供MCAP文件格式规范知识，涵盖二进制结构、记录类型、索引策略及压缩选项。旨在指导创建优化Lichtblick读取性能的MCAP文件，适用于机器人和自动驾驶数据录制场景。
需要解析或生成MCAP格式文件
优化MCAP文件的读取性能
处理ROS1/ROS2时间戳数据录制
npx skills add lichtblick-suite/lichtblick --skill mcap-format -g -y
提供message-path包深度知识，涵盖ROS/Foxglove消息路径语法、解析、数据提取及React集成。用于支持Plot等面板的数据提取需求。
查询消息路径语法
解析消息路径结构
获取嵌套数据提取方法
了解React钩子集成
npx skills add lichtblick-suite/lichtblick --skill message-path -g -y
解析 MessagePipeline 数据总线架构，涵盖 zustand 状态管理、React Context 及面板订阅机制。用于指导前端组件间通信、状态同步与性能优化相关的开发工作。
查询播放器与面板间的数据流逻辑
排查状态更新或订阅合并问题
了解 zustand store 结构以进行功能开发
npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y
提供面板扩展基础设施知识，涵盖PanelExtensionAdapter、RenderState增量构建、生命周期管理及pauseFrame背压机制。
查询面板组件架构与数据流
排查面板渲染性能或背压问题
了解面板上下文API用法
npx skills add lichtblick-suite/lichtblick --skill panel-extension-api -g -y
描述3D渲染面板中图像模式的架构，涵盖Worker解码、相机投影及标注叠加。用于理解图像渲染管线与性能优化。
询问图像面板实现原理
排查图像解码或渲染性能问题
了解相机模型与标注功能
npx skills add lichtblick-suite/lichtblick --skill panel-image -g -y
高性能日志面板技能，支持react-window虚拟渲染、动态行高缓存与自动滚动。提供ROS1/2及Foxglove日志格式统一标准化，以及基于等级和文本的高效过滤功能。
查看或分析大量日志数据
需要自定义日志过滤条件
处理多源日志格式标准化
npx skills add lichtblick-suite/lichtblick --skill panel-log -g -y
基于Leaflet的地理可视化面板，支持GPS/NavSatFix数据展示。核心亮点为FilteredPointLayer像素去重网格算法，解决高频点渲染性能瓶颈，实现O(可见像素)复杂度，确保大规模轨迹数据流畅交互。
需要查看GPS或位置数据轨迹
涉及地图组件性能优化
配置自定义瓦片图层
npx skills add lichtblick-suite/lichtblick --skill panel-map -g -y
解析原始消息面板的知识，涵盖新旧两种实现、共享逻辑钩子、树数据扁平化、展开状态管理及差异对比模式。
询问消息面板实现细节
查询TreeNode结构或展开逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -g -y
提供状态转换面板的知识，涵盖时间轴可视化、消息路径提取、250ms批量刷新机制及数据合并逻辑，用于高效渲染离散状态变化图表。
询问状态转换面板的实现细节
查询消息路径配置与数据流
排查前端渲染性能问题
npx skills add lichtblick-suite/lichtblick --skill panel-state-transitions -g -y
提供面板用户脚本开发知识，涵盖Monaco编辑器集成、TypeScript编译转换及沙箱化运行时Worker执行机制。
询问UserScripts面板架构
调试用户脚本编译错误
了解Worker隔离与执行流程
npx skills add lichtblick-suite/lichtblick --skill panel-user-scripts -g -y
提供Lichtblick代码库的深度性能优化知识，涵盖Chrome DevTools分析、常见瓶颈（消息处理、渲染、3D场景）及内存管理策略，旨在提升实时数据可视化的帧率和响应速度。
应用性能分析
解决卡顿或掉帧问题
优化内存泄漏
提升渲染性能
npx skills add lichtblick-suite/lichtblick --skill performance -g -y
解析IterablePlayer播放器的内部实现，涵盖状态机流转、Tick循环调度及数据源迭代器架构。
分析播放器状态转换逻辑
理解数据源缓存与反序列化机制
排查播放卡顿或状态异常
npx skills add lichtblick-suite/lichtblick --skill player-internals -g -y
解析 Plot 面板底层架构，涵盖 Chart.js Worker 渲染、数据集构建、流式数据限流及自定义像素间隔降采样算法，明确内存与渲染点数上限。
询问 Plot 面板渲染原理
排查图表性能或数据截断问题
理解 Worker 间通信机制
npx skills add lichtblick-suite/lichtblick --skill plot-internals -g -y
提供软件发布流程知识，涵盖稳定版自动流水线、预发布手动流程、分支命名与版本映射及NPM/GHCR发布。用于执行发布、验证或排查流水线问题。
执行软件版本发布
验证发布结果
排查CI/CD流水线故障
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
详解远程MCAP文件读取的HTTP层缓存架构，涵盖CachedFilelike、VirtualLRUBuffer及连接管理算法，用于优化大文件流式访问性能。
分析远程文件读取性能瓶颈
调试HTTP缓存与连接管理逻辑
理解MCAP数据流处理流水线
npx skills add lichtblick-suite/lichtblick --skill remote-caching -g -y
定义Lichtblick仓库中所有测试代理的共享测试规范，包括GWT模式、核心质量规则及标准测试编写工作流，适用于单元测试和E2E测试。
需要编写单元测试或E2E测试
审查现有测试代码是否符合规范
生成新的测试用例
npx skills add lichtblick-suite/lichtblick --skill test-conventions -g -y
提供 Material-UI 主题系统知识，涵盖深色/浅色调色板、字体排版及 tss-react 样式规范。指导通过 createMuiTheme 工厂函数和 ThemeProvider 应用主题，确保 UI 视觉一致性。
需要配置或修改应用的主题颜色方案
在组件中实现符合规范的样式
查询字体或色彩令牌定义
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供 Lichtblick monorepo 单元测试的 Mock Builder 使用指南，涵盖 ADR-0002 架构、基础与领域构建器用法及数据构造策略，旨在提升测试代码的可复用性与一致性。
编写单元测试用例
创建 Mock 测试数据
集成测试数据准备
npx skills add lichtblick-suite/lichtblick --skill unit-testing -g -y
规范 Lichtblick 项目中 Web Worker 的使用模式，涵盖 ComlinkWrap 生命周期管理、FinalizationRegistry 防泄漏、AbortSignal/OffscreenCanvas/ArrayBuffer 传输处理及 SharedWorker 隔离策略。
需要创建或管理 Web Worker
实现主线程与 Worker 间的高效数据通信
处理 OffscreenCanvas 或大二进制数据传输
防止 Worker 内存泄漏
npx skills add lichtblick-suite/lichtblick --skill web-workers -g -y
提供 Foxglove WebSocket 连接、协议握手及数据流处理知识，涵盖 Worker 线程通信、二进制帧传输、自动重连及基于 RAF 的状态发射机制。
实现或调试 WebSocket 实时数据连接
优化前端与后端/仿真器之间的消息传输性能
排查 Worker 线程与主线程间的数据同步问题
npx skills add lichtblick-suite/lichtblick --skill websocket-connection -g -y
