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 面板性能与稳定性。
需要实现或优化 3D 场景渲染
处理 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
将原始二进制消息数据转换为结构化JavaScript对象，支持ROS、Protobuf等多种格式的反序列化及WASM解压。
解析MCAP等二进制数据源
处理不同Schema编码的消息反序列化
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的 E2E 测试开发指南，涵盖 Web 与 Electron 双平台架构、文件组织规范、测试标签策略及 Fixtures 引用，辅助 AI 高效编写高质量端到端测试。
需要编写或重构 E2E 测试代码
询问 Playwright 在 Lichtblick 项目中的最佳实践
查询测试文件放置位置或命名规范
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供Electron应用内部架构知识，涵盖主/渲染进程通信、contextBridge模式、BrowserWindow生命周期及原生菜单集成与安全规范。
询问Electron进程架构
配置contextBridge或preload脚本
处理BrowserWindow生命周期问题
解决Electron安全策略或IPC通信
npx skills add lichtblick-suite/lichtblick --skill electron-internals -g -y
提供扩展系统内部实现知识，涵盖IExtensionLoader接口、IndexedDB存储、版本缓存及.sandbox机制，辅助开发和维护扩展功能。
查询扩展加载器实现细节
调试扩展安装或加载问题
了解扩展存储结构
npx skills add lichtblick-suite/lichtblick --skill extensions-internals -g -y
提供前端布局系统内部实现知识，涵盖ILayoutStorage接口、IndexedDB存储细节、命名空间存储及写透缓存机制，用于理解布局数据的CRUD、同步与冲突处理逻辑。
查询布局存储实现细节
排查布局数据同步问题
理解命名空间隔离机制
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消息路径字符串
从嵌套消息中提取特定字段数据
在React组件中集成消息路径查询功能
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
提供面板扩展基础设施知识，涵盖PanelExtensionAdapter、RenderState增量构建、Context API及生命周期管理。用于指导开发自定义面板或调试面板渲染与数据流问题。
需要开发新的面板组件
调试面板渲染性能或数据同步问题
理解面板与消息管道的交互机制
npx skills add lichtblick-suite/lichtblick --skill panel-extension-api -g -y
解析3D渲染器中图像面板的知识，涵盖Worker解码、相机投影及标注叠加。用于理解图像加载流程与性能优化。
需要查看或修改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数据展示。核心通过像素级稀疏网格去重优化海量点位渲染性能，处理GeoJSON及ROS消息类型，实现高效地图交互与内存控制。
需要在前端面板中集成地图功能
需处理高频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批量刷新防抖机制及高性能数据集构建逻辑。
分析状态转换面板的数据流与性能优化
查询TimeBasedChart组件的使用与配置
排查消息路径解析或批量渲染问题
npx skills add lichtblick-suite/lichtblick --skill panel-state-transitions -g -y
提供面板用户脚本技能的深度知识，涵盖Monaco编辑器集成、TypeScript编译、沙箱运行时Worker执行及脚本API，支持消息转换功能的开发与调试。
询问UserScripts Panel架构或组件细节
查询TypeScript编译与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 内部实现，涵盖状态机流转、300ms Tick 循环机制及数据源迭代器架构（序列化/反序列化包装与缓存）。
询问播放器状态转换逻辑
分析播放性能与 Tick 循环
理解数据源迭代器设计
npx skills add lichtblick-suite/lichtblick --skill player-internals -g -y
详解 Plot 面板的 Chart.js Worker 渲染架构、数据集构建逻辑及自定义降采样算法，涵盖数据截断策略与交互处理机制。
需要深入理解前端图表渲染性能优化
排查时序数据可视化中的显示异常或卡顿问题
修改图表组件的数据处理与渲染逻辑
npx skills add lichtblick-suite/lichtblick --skill plot-internals -g -y
提供软件发布流程知识，涵盖稳定版与预发布版的流水线机制、分支命名与版本映射规则及构建发布步骤。用于执行发布、验证结果或排查流水线故障。
执行软件版本发布
验证发布是否成功
排查发布流水线故障
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
详解远程 MCAP 文件读取的 HTTP 层缓存架构，涵盖连接管理、LRU 内存块缓存及流式处理管线，用于优化大文件远程访问性能。
分析远程文件读取性能瓶颈
排查 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 (MUI) 主题系统，包括深色/浅色配色、字体规范及 tss-react 样式约定。指导如何读取 palette 和 typography 文件，通过 createMuiTheme 工厂函数和应用 ThemeProvider 来管理应用视觉设计。
需要配置或修改应用的主题颜色（如切换暗色/亮色模式）
在组件中使用 MUI 主题变量定义样式
调整全局字体族或字号比例
了解项目特定的 UI 样式规范
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 防泄漏机制及多种 Transfer Handler（AbortSignal/OffscreenCanvas/ArrayBuffer），旨在优化前端主线程与 Worker 间的通信效率。
需要创建或配置 Web Worker
涉及跨线程数据传递或资源转移
处理 Worker 生命周期与清理逻辑
npx skills add lichtblick-suite/lichtblick --skill web-workers -g -y
提供Foxglove WebSocket实时数据连接知识，涵盖状态机、Worker通信协议及重连机制。用于实现机器人或仿真数据到可视化的低延迟传输，处理二进制帧传输与RAF刷新。
需要建立或调试WebSocket实时数据流
优化前端可视化性能以应对高频消息
理解Foxglove协议握手与订阅逻辑
npx skills add lichtblick-suite/lichtblick --skill websocket-connection -g -y
