Agent Skills
› lichtblick-suite/lichtblick
lichtblick-suite/lichtblick
GitHub提供基于 THREE.js 的 3D 渲染技能，涵盖 WebGL 管线、缓冲区管理、实例化渲染及场景优化。重点解析 DynamicBufferGeometry 的增长行为、点云数据流与衰减历史处理，以及 TF 树变换解析，助力高性能 3D 面板开发。
Install All Skills
npx skills add lichtblick-suite/lichtblick --all -g -y
Skills in Collection (27)
提供基于 THREE.js 的 3D 渲染技能，涵盖 WebGL 管线、缓冲区管理、实例化渲染及场景优化。重点解析 DynamicBufferGeometry 的增长行为、点云数据流与衰减历史处理，以及 TF 树变换解析，助力高性能 3D 面板开发。
需要实现高性能 3D 可视化面板
优化 WebGL 渲染性能或内存管理
处理点云数据实时渲染与过滤
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析Lichtblick预加载子系统的缓存内部机制，涵盖CachingIterableSource的内存预算、LRU淘汰策略及缓存键设计，以及BufferedIterableSource的前读缓冲、生产者消费者协调与背压机制。
分析数据流预加载性能
排查缓存命中率或内存溢出问题
理解播放器的块加载与调度逻辑
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
将原始二进制消息数据转换为结构化 JavaScript 对象，支持 ROS、Protobuf 等多种格式的反序列化及 WASM 解压。
需要解析 MCAP 或类似格式的原始二进制数据
处理不同 Schema 编码（如 ROS1/2, Protobuf, JSONSchema）的消息反序列化
实现高性能的流式数据反序列化与 Worker 处理
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的 E2E 测试开发指南，涵盖 Web 与桌面端架构、文件组织规范、标签策略及 Fixture 用法，辅助编写高质量自动化测试。
编写 E2E 测试用例
配置 Playwright 测试环境
确定测试文件路径和命名
设置 CI 测试标签
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供Electron核心架构知识，涵盖主/渲染进程通信、contextBridge模式、BrowserWindow生命周期及原生菜单集成与安全规范。
询问Electron进程间通信机制
配置preload脚本安全策略
排查Electron应用崩溃或性能问题
npx skills add lichtblick-suite/lichtblick --skill electron-internals -g -y
提供扩展系统内部实现知识，涵盖IExtensionLoader接口契约、IndexedDB存储模式、版本缓存策略及沙箱机制。
查询扩展加载器接口定义
排查扩展安装或加载失败问题
了解IndexedDB存储结构
npx skills add lichtblick-suite/lichtblick --skill extensions-internals -g -y
提供前端布局系统内部实现知识，涵盖ILayoutStorage接口、IndexedDB存储细节、命名空间存储包装及写入缓存机制。
查询布局存储实现细节
了解布局数据同步与冲突解决逻辑
排查布局持久化相关问题
npx skills add lichtblick-suite/lichtblick --skill layouts-internals -g -y
提供MCAP文件格式规范知识，涵盖二进制结构、记录类型、索引策略及压缩选项，旨在指导创建优化Lichtblick读取性能的MCAP文件。
需要解析或生成MCAP格式数据
咨询MCAP文件结构与规范
npx skills add lichtblick-suite/lichtblick --skill mcap-format -g -y
提供ROS/Foxglove消息路径的DSL解析、数据提取及React缓存集成知识，用于支持多面板的数据抽取。
解析ROS/Foxglove消息路径语法
提取嵌套消息字段数据
优化React组件中的数据提取性能
npx skills add lichtblick-suite/lichtblick --skill message-path -g -y
解析MessagePipeline数据总线，涵盖Zustand状态管理、React Context及面板订阅机制。
查询消息管道架构
理解面板与播放器通信流程
分析状态更新逻辑
npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y
提供面板扩展基础设施知识，涵盖适配器、增量渲染状态构建、上下文API及背压机制。用于指导面板生命周期管理与性能优化。
询问面板架构细节
排查渲染性能问题
开发自定义面板组件
npx skills add lichtblick-suite/lichtblick --skill panel-extension-api -g -y
描述3D渲染面板中图像模式的架构与实现，涵盖Worker解码、相机投影及标注叠加。用于理解图像显示流程、性能优化及组件交互。
询问3D面板图像模式的工作原理
排查图像解码或渲染性能问题
了解相机模型与标注系统实现
npx skills add lichtblick-suite/lichtblick --skill panel-image -g -y
高性能日志面板技能，支持虚拟滚动、动态行高缓存、自动滚动及多格式日志归一化与过滤。
需要查看或分析系统日志
处理ROS1/ROS2/Foxglove日志数据
npx skills add lichtblick-suite/lichtblick --skill panel-log -g -y
基于Leaflet的地理可视化面板，支持GPS/NavSatFix数据展示。核心优化为FilteredPointLayer像素去重网格，解决高频点位渲染性能问题，支持多消息类型解析与瓦片图层配置。
需要在前端地图面板中展示GPS或位置追踪数据
前端地图渲染大量坐标点导致性能瓶颈需优化
npx skills add lichtblick-suite/lichtblick --skill panel-map -g -y
提供消息检查面板（RawMessages）的深度知识，涵盖旧版与虚拟滚动两种实现、树数据扁平化、展开状态管理及Diff模式逻辑。
需要理解或修改消息树形展示面板的逻辑
排查虚拟滚动性能问题或展开状态异常
分析消息数据的Diff对比功能实现
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 编辑器集成、UserScriptPlayer 封装、Transformer Worker 中的 TypeScript 编译及 Runtime Worker 的沙箱执行机制，支持自定义消息转换开发。
询问 UserScripts Panel 架构
调试脚本编译或运行时错误
了解 Worker 隔离与生命周期
npx skills add lichtblick-suite/lichtblick --skill panel-user-scripts -g -y
针对Lichtblick代码库的性能优化指南，涵盖Chrome DevTools分析流程、常见瓶颈（消息处理、渲染、内存）及零拷贝、对象池等优化策略。
应用出现卡顿或掉帧
需要降低内存占用或GC压力
进行前端性能分析与调优
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
描述Lichtblick项目的发布流程，包括稳定版和预发布版的触发条件、分支命名与版本号映射规则，以及自动化构建、打包、发布到NPM/GHCR等步骤。用于指导版本切割、验证或排错。
执行版本发布流程
验证已完成的发布状态
排查发布流水线问题
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
详解远程MCAP文件访问的HTTP层缓存实现，涵盖连接管理、LRU内存块缓存及流式读取流水线，优化大文件读取性能与并发控制。
需要理解远程大文件流式读取机制
排查HTTP缓存或连接相关问题
优化前端数据加载性能
npx skills add lichtblick-suite/lichtblick --skill remote-caching -g -y
定义Lichtblick仓库中所有测试代理（单元和E2E）的共享测试规范，包括GWT模式、核心质量规则及标准测试编写工作流。
需要编写单元测试或E2E测试
审查现有测试代码是否符合规范
npx skills add lichtblick-suite/lichtblick --skill test-conventions -g -y
掌握 Material-UI 主题系统，包括创建主题工厂、深色/浅色调色板、字体排版及样式规范。指导通过 ThemeProvider 应用颜色方案，并规定使用 tss-react/mui 进行组件样式定义，禁止使用其他 MUI 样式方法。
需要创建或修改 MUI 主题配置
实现深色或浅色模式切换
为组件添加样式且需遵循 tss-react 规范
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供Lichtblick单体仓库的单元测试规范，核心为Mock Builder模式。通过BasicBuilder和领域特定构建器生成一致、可复用的测试数据，支持字段覆盖与组合，提升测试代码的可读性与维护性。
编写单元测试用例
创建测试数据或Mock对象
重构测试以使用Builder模式
npx skills add lichtblick-suite/lichtblick --skill unit-testing -g -y
定义 Lichtblick 中 Web Worker 的标准模式，涵盖 ComlinkWrap 生命周期管理、FinalizationRegistry 防泄漏、AbortSignal/OffscreenCanvas/ArrayBuffer 传输处理及 SharedWorker 用法。
实现多线程后台计算逻辑
配置主线程与 Worker 通信协议
处理大二进制数据零拷贝传输
解决 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
