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渲染器时
处理大规模点云或动态几何体的内存与性能问题时
解决3D场景中坐标变换和帧同步问题时
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析Lichtblick预加载子系统的缓存内部机制,涵盖CachingIterableSource的LRU淘汰策略、BufferedIterableSource的前向读取与背压协调,以及BlockLoader的分块加载优先级逻辑。
询问数据流预加载原理
分析内存缓存与淘汰策略
调试播放器卡顿或背压问题
理解缓冲读取实现细节
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
负责将原始二进制消息数据(如ROS、Protobuf等)反序列化为结构化JavaScript对象,支持多种Schema编码及WASM解压。
解析MCAP二进制消息
处理不同Schema编码的反序列化
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的端到端测试开发指南,涵盖桌面与 Web 平台架构、文件组织、命名规范、CI 标签策略及 Fixtures 参考,辅助 AI 生成高质量 E2E 测试代码。
编写或重构前端/桌面应用的端到端测试
配置 Playwright 测试环境和 Fixtures
根据功能模块创建新的 E2E 测试用例
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供 Electron 应用内部机制知识,涵盖主渲染进程通信、contextBridge 安全模式、BrowserWindow 生命周期及原生菜单集成,指导开发者正确构建安全高效的桌面客户端。
询问 Electron 架构原理
配置 contextBridge 安全策略
调试主渲染进程通信问题
实现 BrowserWindow 生命周期管理
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
提供前端布局系统的内部实现细节,涵盖ILayoutStorage接口、IndexedDB存储结构、命名空间管理及缓存机制,用于辅助理解布局数据的持久化与同步逻辑。
查询布局存储接口定义
了解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
提供 message-path 包深度知识,涵盖 ROS/Foxglove 消息的 DSL 路径语法、nearley 解析、嵌套数据提取及 React 缓存集成,支持 Plot 等面板的数据展示。
询问 message-path 路径语法或组件含义
需要解析 ROS/Foxglove 消息字段并提取数据
排查消息提取性能或 React 缓存问题
npx skills add lichtblick-suite/lichtblick --skill message-path -g -y
MessagePipeline是连接Player与Panel的核心数据总线,基于Zustand和React Context实现。涵盖状态流转、订阅合并、选择器通知及性能优化机制,为面板提供细粒度渲染支持。
理解或修改消息管道架构
排查Panel数据同步问题
优化Zustand订阅性能
npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y
提供面板扩展基础设施知识,涵盖PanelExtensionAdapter、RenderState增量构建、Context API及生命周期管理。帮助Agent理解面板渲染机制、背压控制及状态订阅逻辑。
询问面板API用法
排查面板渲染性能问题
理解面板生命周期流程
npx skills add lichtblick-suite/lichtblick --skill panel-extension-api -g -y
描述3D渲染面板中图像模式的架构与实现,涵盖Worker解码、相机投影及标注叠加。
询问图像面板内部机制
排查图像解码性能问题
配置相机模型或标注
npx skills add lichtblick-suite/lichtblick --skill panel-image -g -y
高性能日志面板技能,支持虚拟渲染、动态行高缓存、自动滚动及多格式日志标准化与过滤。
实现高性能日志列表组件
处理多源日志数据标准化
优化长列表虚拟滚动性能
npx skills add lichtblick-suite/lichtblick --skill panel-log -g -y
基于Leaflet的地理可视化组件,支持GPS/NavSatFix数据展示。核心优化为FilteredPointLayer像素去重网格,解决高频点位渲染性能瓶颈,提升大数据量下的地图交互流畅度。
需要开发或维护基于Leaflet的地图面板功能
处理高频GPS数据的地图渲染性能优化
集成NavSatFix或GeoJSON消息类型的地图显示
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
提供应用内 TypeScript 用户脚本编辑器的架构与 API 知识,涵盖 Monaco 集成、Worker 编译执行流程及沙箱隔离机制。
询问用户脚本编辑器实现细节
调试或开发自定义消息转换脚本
理解 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 循环及数据源迭代架构,涵盖状态流转、UI 预算控制、防抖发射及反序列化与缓存链设计。
分析播放器状态转换逻辑
排查播放卡顿或性能问题
理解数据源迭代器链路
npx skills add lichtblick-suite/lichtblick --skill player-internals -g -y
提供Plot面板Chart.js内部实现知识,涵盖Worker渲染、数据集构建、降采样算法及交互处理,辅助开发者理解与调试图表逻辑。
询问Plot面板渲染机制
排查图表性能或数据展示问题
理解降采样策略细节
npx skills add lichtblick-suite/lichtblick --skill plot-internals -g -y
掌握Lichtblick发布流程,涵盖稳定版与RC版的GitHub Actions工作流、分支命名到版本号的映射规则及NPM/GHCR发布机制。用于执行版本切割、验证发布状态或排查流水线故障。
执行软件版本发布
验证已完成的发布流程
排查CI/CD流水线故障
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
详解远程文件HTTP层缓存架构,涵盖BrowserHttpReader、FetchReader流式传输及CachedFilelike的LRU块缓存与连接管理算法,适用于MCAP数据的高效读取。
分析远程文件缓存实现细节
排查HTTP流式读取性能问题
理解MCAP数据加载流水线
npx skills add lichtblick-suite/lichtblick --skill remote-caching -g -y
定义Lichtblick仓库中所有测试代理(单元/E2E)的共享测试规范,包括GWT模式、核心质量规则及标准编写工作流。
需要遵循统一规范编写单元测试或E2E测试
审查现有测试代码是否符合GWT和质量要求
npx skills add lichtblick-suite/lichtblick --skill test-conventions -g -y
管理 Material-UI 主题系统,涵盖深色/浅色配色、字体排版及 tss-react 样式规范。提供 createMuiTheme 工厂函数与调色板配置,确保 UI 视觉一致性。
需要创建或修改 MUI 主题配置
实现组件的暗色或亮色模式适配
使用 tss-react/mui 进行组件样式开发
查询全局颜色变量或字体缩放比例
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供 Lichtblick monorepo 的单元测试技能,涵盖 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 使用规范。
需要创建或配置 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


