Agent Skills
› lichtblick-suite/lichtblick
lichtblick-suite/lichtblick
GitHub提供 THREE.js 3D 渲染深度知识，涵盖 WebGL 管线、动态缓冲区管理、实例化渲染及场景优化。
Install All Skills
npx skills add lichtblick-suite/lichtblick --all -g -y
Skills in Collection (27)
提供 THREE.js 3D 渲染深度知识，涵盖 WebGL 管线、动态缓冲区管理、实例化渲染及场景优化。
需要配置或优化 WebGL 渲染器
处理大规模点云数据渲染性能问题
实现动态几何体缓冲区的内存管理与扩容逻辑
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析Lichtblick预加载子系统的缓存内部机制，涵盖CachingIterableSource的LRU内存管理、BlockLoader的分块策略及BufferedIterableSource的生产者-消费者协调与背压控制。
分析高性能数据流缓存实现
排查播放卡顿或内存溢出问题
理解预加载与背压机制
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
提供二进制消息反序列化能力，支持ROS、Protobuf等多种格式，通过Worker优化性能。
解析MCAP等数据源中的二进制消息
处理不同Schema编码的解码逻辑
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的 E2E 测试开发指南，涵盖桌面与 Web 平台架构、文件规范、标签策略及 Fixtures 用法，支持 AI 辅助探索。
编写或维护 E2E 测试用例
配置 Playwright 测试环境
解决自动化测试中的选择器或 fixture 问题
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供Electron内部机制知识，涵盖主渲染进程通信、contextBridge模式、窗口生命周期及原生菜单集成，指导安全开发。
询问Electron进程架构
配置contextBridge
处理窗口生命周期
npx skills add lichtblick-suite/lichtblick --skill electron-internals -g -y
提供扩展系统内部实现知识，涵盖IExtensionLoader接口、IndexedDB存储、版本缓存策略及.sfoxe打包格式。用于支持扩展加载、安装、卸载及沙箱机制的开发与调试。
查询扩展加载器实现细节
排查扩展安装或存储问题
了解扩展沙箱机制
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
提供message-path包的知识，涵盖ROS/Foxglove消息的DSL路径语法、解析逻辑及数据提取方法。支持React Hook集成与缓存优化，用于Plot等面板的数据提取。
询问关于message-path包的语法或用法
需要解析或提取ROS/Foxglove消息字段
涉及Plot面板的数据绑定配置
npx skills add lichtblick-suite/lichtblick --skill message-path -g -y
描述 MessagePipeline 数据总线架构，涵盖 Zustand 状态管理、React Context 集成、订阅合并与 memoization 优化及渲染流程。
理解 Player 到 Panel 的数据流
排查状态更新或订阅问题
开发新的 Panel 扩展
npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y
提供面板扩展基础设施知识，涵盖PanelExtensionAdapter、RenderState增量构建、Context API及生命周期管理。用于指导开发高性能面板，处理消息管道集成与背压机制。
询问面板渲染性能优化
查询PanelExtensionContext API用法
理解面板生命周期流程
排查面板渲染卡顿问题
npx skills add lichtblick-suite/lichtblick --skill panel-extension-api -g -y
解析ThreeDeeRender中ImageMode场景扩展，涵盖Worker解码管线、相机投影及标注渲染。
询问3D面板图像显示机制
排查图片解码或渲染性能问题
了解相机模型与标注叠加逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-image -g -y
高性能日志面板技能，基于react-window实现虚拟滚动与动态行高缓存，支持ROS1/2及Foxglove格式统一归一化，提供高效的多级日志过滤与智能自动滚动功能。
前端日志查看器开发
React虚拟列表性能优化
多源日志数据格式转换
npx skills add lichtblick-suite/lichtblick --skill panel-log -g -y
基于Leaflet的地理可视化面板，支持GPS和NavSatFix数据展示。核心通过像素级去重网格优化海量点渲染性能，实现高效地图交互与配置管理。
需要展示GPS或地理轨迹数据
处理高频传感器位置数据的地图渲染
npx skills add lichtblick-suite/lichtblick --skill panel-map -g -y
提供消息面板中原始数据树形展示的技能，涵盖新旧实现差异、扁平化逻辑、展开状态管理及Diff模式，辅助前端开发处理结构化消息的渲染与交互。
需要查看或修改RawMessages面板的实现细节
涉及消息数据的树形结构扁平化或虚拟滚动优化
调试消息面板的展开状态或Diff比较逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -g -y
提供状态转换面板的开发知识，涵盖时间轴可视化、消息路径提取、批量刷新优化及图表渲染逻辑。
询问状态转换面板的实现细节
需要配置或优化离散状态变化的时间轴可视化
涉及消息路径解析与数据集构建的性能调优
npx skills add lichtblick-suite/lichtblick --skill panel-state-transitions -g -y
提供应用内 TypeScript 脚本编辑器的深度知识，涵盖 Monaco 集成、Worker 架构（编译与沙箱执行）、生命周期管理及 Script API，辅助开发者理解消息转换功能的实现细节。
询问 UserScriptEditor 相关功能
调试或开发自定义用户脚本
了解 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循环及数据源迭代架构，涵盖播放控制逻辑、微任务去抖机制及序列化/反序列化数据流处理。
分析播放器内部状态流转
理解Tick循环性能预算与UIyield机制
排查数据源迭代与缓存问题
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版的流水线触发条件、分支命名到版本号的映射规则及构建发布步骤。用于指导切分版本、验证发布结果或排查发布管道故障。
执行软件版本发布
验证发布流程是否成功
排查CI/CD发布管道问题
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
解析远程 MCAP 文件读取流水线，涵盖 HTTP 层缓存、流式传输及并发控制。详解 CachedFilelike 的 LRU 内存管理、连接复用策略及读请求队列机制，旨在优化大文件远程访问性能与资源消耗。
需要理解或优化远程大文件（如 MCAP）的流式读取逻辑
排查 HTTP 连接管理、LRU 缓存命中率或并发读取性能问题
分析 BrowserHttpReader 到 McapIndexedIterableSource 的数据流转细节
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 主题系统，包括 createMuiTheme 工厂函数、暗/亮色板定义、字体排版规范及 tss-react 样式约定。指导如何正确引用颜色与字体 Token，避免硬编码，确保应用视觉一致性。
需要创建或修改 MUI 主题配置
实现深色或浅色模式切换逻辑
使用 tss-react 为组件编写样式
查阅全局颜色或字体变量定义
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供Lichtblick单体仓库的单元测试技能，核心为基于ADR-0002的可复用Mock Builder模式。支持测试数据构建、覆盖与组合，确保测试一致性并减少样板代码。
需要编写单元测试用例
构造复杂的测试数据或Mock对象
使用Builder模式生成测试实体
npx skills add lichtblick-suite/lichtblick --skill unit-testing -g -y
定义 Lichtblick 项目中 Web Worker 的标准使用模式，涵盖 ComlinkWrap 生命周期管理、FinalizationRegistry 防泄漏机制及 AbortSignal/OffscreenCanvas 等传输处理。
需要创建或配置 Web Worker
实现主线程与 Worker 通信
处理 Worker 资源清理与内存泄漏防护
npx skills add lichtblick-suite/lichtblick --skill web-workers -g -y
掌握Foxglove WebSocket实时数据连接知识，涵盖协议握手、Worker线程通信及RAF状态发射机制。
需要实现或维护WebSocket实时数据流
处理机器人或仿真数据的可视化连接
npx skills add lichtblick-suite/lichtblick --skill websocket-connection -g -y
