Agent Skills
› lichtblick-suite/lichtblick
lichtblick-suite/lichtblick
GitHub提供基于THREE.js的3D渲染技能，涵盖WebGL管线、动态缓冲区管理及场景优化。重点解析DynamicBufferGeometry的精确扩容机制与点云渲染的数据流、衰减历史及预算控制策略，旨在提升3D面板性能与稳定性。
Install All Skills
npx skills add lichtblick-suite/lichtblick --all -g -y
Skills in Collection (27)
提供基于THREE.js的3D渲染技能，涵盖WebGL管线、动态缓冲区管理及场景优化。重点解析DynamicBufferGeometry的精确扩容机制与点云渲染的数据流、衰减历史及预算控制策略，旨在提升3D面板性能与稳定性。
需要配置或优化THREE.js WebGL渲染器时
处理大规模点云数据渲染与性能瓶颈时
实现动态几何体内存管理与缓冲区分配时
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析 Lichtblick 预加载子系统的缓存机制，涵盖内存预算、LRU 驱逐策略、块生命周期及缓冲读取的前后预取与背压协调实现细节。
分析数据回放性能瓶颈
排查缓存命中率低的问题
理解内存管理与数据加载逻辑
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
将原始二进制消息数据转换为结构化 JavaScript 对象，支持 ROS1/2、Protobuf、FlatBuffers 等多种 Schema 格式的解析与反序列化。
需要解析 MCAP 等二进制源中的消息数据
处理不同编码格式（如 protobuf, jsonschema）的反序列化逻辑
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的 E2E 测试开发指南，涵盖桌面与 Web 平台架构、文件规范、标签策略及 Fixtures 参考，用于构建高质量自动化测试。
编写 E2E 测试用例
配置 Playwright 测试环境
设计测试夹具和选择器
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供 Electron 内部架构知识，涵盖主/渲染进程通信、contextBridge 模式、BrowserWindow 生命周期及原生菜单集成，指导安全规范的桌面应用开发。
询问 Electron 主进程与渲染进程通信机制
查询 contextBridge 使用规范与安全限制
了解 BrowserWindow 生命周期管理
Electron 桌面应用架构设计咨询
npx skills add lichtblick-suite/lichtblick --skill electron-internals -g -y
提供扩展系统内部实现知识，涵盖IExtensionLoader接口、IndexedDB存储、版本缓存策略及.foxe打包格式，用于指导扩展加载与安装流程。
询问扩展加载机制
查询IndexedDB存储结构
开发或调试扩展功能
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二进制结构或记录类型定义时
优化MCAP文件以改善读取性能时
npx skills add lichtblick-suite/lichtblick --skill mcap-format -g -y
提供message-path包的DSL语法、解析及数据提取知识，支持ROS/Foxglove消息字段访问与React集成。
查询message-path语法规范
解析ROS或Foxglove消息路径
理解数据提取逻辑
npx skills add lichtblick-suite/lichtblick --skill message-path -g -y
MessagePipeline是连接Player与Panel的核心数据总线，基于Zustand和React Context实现。涵盖状态流、订阅合并、选择器通知及渲染优化，提供细粒度更新能力。
理解前端状态管理架构
排查面板数据同步问题
优化订阅性能
npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y
提供面板扩展基础设施知识，涵盖适配器、增量渲染状态构建、上下文API及背压机制。用于帮助理解和管理面板生命周期与数据流。
询问面板扩展架构细节
排查面板渲染性能问题
了解PanelExtensionContext API用法
npx skills add lichtblick-suite/lichtblick --skill panel-extension-api -g -y
解析3D渲染面板中的图像显示模式，涵盖Worker解码、相机投影及标注叠加。用于理解图像渲染架构与性能优化。
需要查看或修改图像渲染逻辑
排查Worker解码相关问题
调整相机投影模型
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和GeoJSON数据可视化。核心优化为FilteredPointLayer像素去重网格，解决海量点位渲染性能问题，提供自动居中及瓦片配置功能。
需要展示GPS或传感器位置数据
处理大规模地理坐标渲染性能瓶颈
集成Leaflet地图组件
npx skills add lichtblick-suite/lichtblick --skill panel-map -g -y
提供消息面板中结构化数据的树形展示知识，涵盖旧版与虚拟化实现、数据扁平化、展开状态管理及差异对比逻辑。
查询消息面板数据结构或渲染逻辑
处理消息树的展开/折叠状态
分析消息内容的差异对比功能
npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -g -y
提供状态转换面板的开发知识，涵盖时间轴可视化、消息路径提取、250ms批量刷新机制及数据集构建。用于指导前端图表组件的性能优化与数据流实现。
需要开发或维护状态转换时间轴面板
优化高频消息下的React渲染性能
理解消息路径提取与数据集合并逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-state-transitions -g -y
提供应用内TypeScript脚本编辑器的深度知识，涵盖Monaco编辑器集成、Worker架构及沙箱运行时，支持用户编写消息转换逻辑。
询问UserScripts面板功能
调试脚本编译或执行错误
了解Transformer/Runtime 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 循环及数据源迭代架构，涵盖状态流转、性能预算控制、去抖状态发射及反序列化缓存链。
查询播放器内部状态流转逻辑
分析播放卡顿或延迟原因
理解数据源加载与缓存机制
npx skills add lichtblick-suite/lichtblick --skill player-internals -g -y
解析 Plot 面板的 Chart.js Worker 渲染架构，涵盖数据集构建、5万数据点累积上限及自定义像素区间降采样算法，辅助开发者深入理解高性能图表内部机制。
询问图表渲染性能优化
排查大数据量下的绘图异常
了解 Worker 与主线程通信机制
npx skills add lichtblick-suite/lichtblick --skill plot-internals -g -y
提供Lichtblick项目的发布流程知识，涵盖稳定版与RC版的流水线触发条件、分支命名到版本号的映射规则、自动化构建打包步骤及NPM/GHCR发布机制。用于执行发布、验证完成状态或排查流水线故障。
执行软件发布操作
验证发布是否成功
排查CI/CD流水线故障
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
详解远程MCAP文件读取的HTTP层缓存架构，涵盖CachedFilelike、VirtualLRUBuffer及连接管理算法。用于理解流式读取中的内存LRU缓存、并发控制与数据缓冲机制。
分析远程文件读取性能瓶颈
排查HTTP流式缓存逻辑错误
优化大文件分块读取策略
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 (MUI) 主题系统的深度知识，涵盖深色/浅色调色板、字体排版及 tss-react 样式规范。用于指导正确创建主题、应用配色方案及使用特定样式库，确保视觉设计一致性。
需要创建或修改 MUI 主题配置时
询问深色或浅色模式的颜色定义与字体设置时
在组件中实现样式且需遵循 tss-react/mui 规范时
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供Lichtblick单体仓库的单元测试规范，核心为Mock Builder模式。通过可复用的Builder集中管理测试数据构建，支持默认值与局部覆盖，提升测试一致性、灵活性与可读性，涵盖基础类型及领域特定对象的构造策略。
编写单元测试用例
创建或复用Mock数据生成器
处理测试中的复杂对象实例化
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实时数据流接入
调试Web Worker与主线程通信问题
优化高频消息处理的性能瓶颈
npx skills add lichtblick-suite/lichtblick --skill websocket-connection -g -y
