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 (27)
提供基于THREE.js的3D渲染技能，涵盖WebGL管线、动态缓冲区管理及场景优化。指导点云渲染的数据流与降采样策略，以及TF树变换解析，旨在提升3D面板的性能与渲染准确性。
需要配置或优化THREE.js WebGL渲染器时
处理动态几何体缓冲区增长与内存管理时
实现点云数据渲染及性能调优时
解析ROS TF树坐标变换用于3D可视化时
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析 Lichtblick 预加载子系统的缓存内部机制，涵盖 CachingIterableSource、BufferedIterableSource 及 BlockLoader 的实现细节，包括内存预算、LRU 驱逐、预读缓冲及背压协调。
询问缓存策略或内存管理
排查播放卡顿或预加载问题
理解 LRU 驱逐逻辑
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
将原始二进制消息数据转换为结构化 JavaScript 对象，支持 ROS、Protobuf、FlatBuffers 等多种编码格式的解析与反序列化。
需要解析 MCAP 或类似格式的二进制消息流
处理不同 schema 编码的数据转换
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的 E2E 测试开发指南，涵盖桌面与 Web 平台架构、文件组织规范、命名模式及 CI 标签策略。
编写 E2E 自动化测试
配置 Playwright 测试环境
确定测试执行标签
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供Electron内部架构知识，涵盖主/渲染进程通信、contextBridge安全模式及BrowserWindow生命周期。用于指导开发者正确实现跨进程数据交互与桌面应用功能集成。
询问Electron进程间通信机制
配置preload脚本或contextBridge
处理BrowserWindow生命周期问题
排查Electron安全相关错误
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
提供前端布局系统底层实现知识，涵盖存储接口、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 包的深度知识，涵盖 ROS/Foxglove 消息路径语法、解析逻辑及数据提取。包含 React Hook 集成与性能优化细节，用于支持 Plot 等面板的数据抽取功能。
询问 message-path 包的路径语法或 DSL 规则
查询消息数据提取的实现逻辑与性能优化
排查基于 message-path 的 UI 面板数据渲染问题
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及背压机制。
查询面板生命周期管理
理解RenderState增量更新逻辑
使用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
高性能日志面板技能，涵盖基于react-window的虚拟滚动、动态行高测量与缓存、自动滚动逻辑，以及ROS1/2/Foxglove多格式日志归一化和多级文本过滤功能。
需要实现或优化前端高性能列表渲染
处理多种日志格式的归一化与解析
实现日志级别与关键词过滤逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-log -g -y
基于 Leaflet 的地图可视化技能，支持 GPS/NavSatFix/GeoJSON 数据展示。核心通过像素去重网格优化海量点位渲染性能，提供瓦片配置、自动居中及批量标记操作功能。
需要展示 GPS 轨迹或定位点
处理高频 GPS 数据导致的前端渲染卡顿
集成 NavSatFix 或 GeoJSON 地理数据到面板
npx skills add lichtblick-suite/lichtblick --skill panel-map -g -y
提供RawMessages面板的树形数据展示、虚拟滚动渲染及Diff对比逻辑知识，涵盖新旧实现差异、节点扁平化、展开状态管理及共享Hook细节。
询问消息面板的实现原理或代码结构
需要处理消息数据的树形视图与性能优化
调试消息面板的差异对比功能
npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -g -y
解析面板状态转换技能，涵盖时间轴可视化、消息路径提取、批量刷新及高性能数据转换。
需要展示离散状态变化的时间线可视化
处理高频消息并优化前端渲染性能
npx skills add lichtblick-suite/lichtblick --skill panel-state-transitions -g -y
提供面板用户脚本技能的深度知识，涵盖Monaco编辑器集成、TypeScript编译、沙箱运行时Worker执行及脚本API。用于指导用户编写和调试自定义消息转换脚本。
需要理解或开发用户脚本编辑器功能
调试UserScriptPlayer的编译或运行错误
查询脚本生命周期与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
详解播放器内部状态机、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
管理稳定版与RC版的发布流水线，涵盖分支命名到版本号的映射、自动触发流程、NPM/GHCR发布及故障排查。
执行版本发布操作
验证已完成发布的正确性
排查发布流水线异常
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
解析远程MCAP文件读取的HTTP层缓存实现，涵盖连接管理、LRU内存块缓存及流式读取流水线，用于优化大文件访问性能。
需要理解或优化远程大文件（如MCAP）的HTTP流式读取与缓存策略
排查浏览器端网络请求并发、连接复用或内存溢出问题
分析CachedFilelike等核心缓存组件的内部逻辑
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 主题系统，包括深色/浅色调色板、字体比例及 tss-react 样式规范。提供 createMuiTheme 工厂函数用法，指导正确读取 palette 和 typography 配置，避免硬编码颜色值。
需要修改应用颜色或字体配置
使用 MUI 组件进行样式开发
排查主题相关显示问题
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供Lichtblick单体仓库的单元测试技能，涵盖Mock Builder模式、测试数据构建策略及ADR-0002规范，旨在提升测试代码的可复用性、一致性和可读性。
编写单元测试用例
创建或更新Mock Builder
构造测试数据
npx skills add lichtblick-suite/lichtblick --skill unit-testing -g -y
定义Lichtblick代码库中Web Worker的标准开发模式，涵盖ComlinkWrap生命周期管理、FinalizationRegistry防泄漏、AbortSignal/OffscreenCanvas/ArrayBuffer传输处理及SharedWorker用法。
实现主线程与Worker通信
配置Comlink代理和生命周期
处理跨线程数据转移如Canvas或二进制数据
npx skills add lichtblick-suite/lichtblick --skill web-workers -g -y
掌握 Foxglove WebSocket 连接技能，涵盖协议握手、Worker 线程通信及 RAF 帧同步机制。用于处理机器人或仿真数据的实时可视化数据流，实现高效二进制传输与状态管理。
需要建立或调试 Foxglove WebSocket 连接
优化前端实时数据接收性能
理解 Worker 与主线程间的数据传输模式
npx skills add lichtblick-suite/lichtblick --skill websocket-connection -g -y
