Agent Skills
› lichtblick-suite/lichtblick
lichtblick-suite/lichtblick
GitHub提供THREE.js 3D渲染深度知识，涵盖WebGL管线、动态缓冲区管理、实例化渲染及场景优化。指导点云数据处理与变换解析，确保高性能实时渲染。
安装全部 Skills
npx skills add lichtblick-suite/lichtblick --all -g -y
集合内 Skills (27)
提供THREE.js 3D渲染深度知识，涵盖WebGL管线、动态缓冲区管理、实例化渲染及场景优化。指导点云数据处理与变换解析，确保高性能实时渲染。
需要实现或优化基于THREE.js的3D可视化面板
处理大规模点云数据渲染性能问题
配置WebGL渲染器参数及渲染循环
npx skills add lichtblick-suite/lichtblick --skill 3d-rendering -g -y
解析Lichtblick预加载子系统的缓存内部机制，涵盖CachingIterableSource的内存预算与LRU驱逐、BufferedIterableSource的前读缓冲及背压协调、BlockLoader的分块策略与加载优先级。
分析数据流播放器性能瓶颈
排查缓存命中率低或内存溢出问题
理解MCAP文件读取的前置加载逻辑
npx skills add lichtblick-suite/lichtblick --skill caching-internals -g -y
提供MCAP数据反序列化能力，支持ROS、Protobuf等格式解析。通过parseChannel分发解码器，利用DeserializingIterableSource流式处理二进制消息为JS对象，并集成WASM压缩处理与Worker优化性能。
解析MCAP文件中的二进制消息数据
需要将原始字节流转换为结构化JavaScript对象
处理不同Schema编码（如ros2msg, protobuf）的反序列化逻辑
npx skills add lichtblick-suite/lichtblick --skill deserialization -g -y
提供基于 Playwright MCP 的 E2E 测试开发指南，涵盖桌面/Web 架构、文件规范、标签策略及 Fixtures 引用。
编写端到端测试代码
配置 Playwright 测试环境
查阅 E2E 测试规范
npx skills add lichtblick-suite/lichtblick --skill e2e-playwright-mcp -g -y
提供Electron内部架构知识，涵盖主渲染进程通信、contextBridge模式、窗口生命周期及原生菜单集成。指导开发者安全高效地构建桌面应用，避免常见陷阱。
询问Electron进程间通信机制
配置或优化preload脚本
处理BrowserWindow生命周期问题
实现原生菜单或深链接功能
npx skills add lichtblick-suite/lichtblick --skill electron-internals -g -y
详解插件系统内部实现，涵盖IExtensionLoader接口、三种加载器（浏览器/服务器/文件）、IndexedDB存储结构及安装加载流程，提供扩展开发底层知识。
需要理解或修改插件加载机制
调试扩展安装与持久化问题
查询索引库存储结构
npx skills add lichtblick-suite/lichtblick --skill extensions-internals -g -y
提供前端布局系统内部实现知识，涵盖存储接口、IndexedDB架构、缓存及同步机制。
查询布局数据存储结构
理解布局同步与冲突解决逻辑
排查前端UI状态持久化问题
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
提供ROS/Foxglove消息路径DSL的解析、数据提取及React集成知识，支持多面板的数据访问。
查询消息路径语法
解析ROS/Foxglove消息字段
npx skills add lichtblick-suite/lichtblick --skill message-path -g -y
描述 MessagePipeline 数据总线架构，涵盖 Zustand 状态管理、React Context 提供程序、订阅合并及渲染流程，连接 Player 与 Panel。
理解前端状态管理机制
排查面板数据同步问题
npx skills add lichtblick-suite/lichtblick --skill message-pipeline -g -y
提供面板扩展基础设施知识，涵盖适配器、增量渲染状态构建、上下文API及背压机制。用于帮助开发者理解面板生命周期与内部钩子，支持自定义面板开发与集成。
询问面板扩展API用法
查询RenderState增量构建逻辑
排查面板渲染性能或背压问题
了解PanelExtensionContext订阅机制
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的动态高度虚拟化渲染、多格式日志标准化及高效过滤。
构建或优化日志查看器UI
处理前端长列表虚拟滚动性能问题
实现ROS/Foxglove日志格式解析与过滤
npx skills add lichtblick-suite/lichtblick --skill panel-log -g -y
基于Leaflet的地理可视化面板，支持GPS/NavSatFix数据展示。核心通过像素级去重网格优化海量点位渲染性能，实现高效地图交互与配置管理。
需要查看或调试地图面板功能
分析GPS数据在地图上的渲染性能
修改地图图层或Marker显示逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-map -g -y
提供消息检查面板的原始数据展示知识，涵盖遗留与虚拟化两种实现、树形数据结构扁平化、展开状态管理及差异对比模式的核心逻辑。
需要理解或修改消息面板的前端渲染逻辑
处理大规模JSON数据的虚拟滚动性能优化
排查消息树节点的展开/折叠状态异常
npx skills add lichtblick-suite/lichtblick --skill panel-raw-messages -g -y
解析状态转换面板的可视化逻辑，涵盖消息路径提取、250ms批量刷新防抖及图表数据合并，旨在优化高频消息下的渲染性能与用户体验。
分析状态转换面板的数据处理流程
排查前端图表渲染性能问题
理解消息路径提取与数据集构建逻辑
npx skills add lichtblick-suite/lichtblick --skill panel-state-transitions -g -y
提供应用内 TypeScript 用户脚本编辑面板的深度知识，涵盖 Monaco 编辑器集成、基于 Worker 的编译与沙箱执行架构、脚本生命周期管理及 API 规范。
询问用户脚本编辑器功能
排查脚本编译或运行错误
了解 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状态机、Tick循环及数据源迭代架构，涵盖状态流转、微任务去重及序列化/反序列化包装链。
需要理解播放器内部状态逻辑
排查播放卡顿或状态异常
设计新的数据源适配层
npx skills add lichtblick-suite/lichtblick --skill player-internals -g -y
提供 Plot 面板 Chart.js Worker 渲染架构、数据集构建、降采样策略及交互模式的深度内部知识，辅助开发者理解高性能时序图表实现。
需要优化或调试 Plot 面板渲染性能
询问 Chart.js Worker 通信机制或数据累积逻辑
澄清降采样算法细节（如区分 LTTB 与像素区间桶化）
npx skills add lichtblick-suite/lichtblick --skill plot-internals -g -y
定义软件发布流程，涵盖稳定版自动流水线、RC手动构建、分支版本映射及NPM/GHCR发布。用于执行发布、验证结果或排查流水线问题。
执行软件版本发布
验证发布完成状态
排查CI/CD发布流水线故障
npx skills add lichtblick-suite/lichtblick --skill release-process -g -y
详解远程文件访问的HTTP层缓存实现，涵盖CachedFilelike、VirtualLRUBuffer及连接管理算法。
需要优化远程大文件流式读取性能
排查网络I/O瓶颈或内存占用问题
理解MCAP数据加载流水线架构
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 样式规范。指导如何读取调色板与字体源文件，并通过 ThemeProvider 应用主题，确保视觉设计一致性。
需要创建或修改 MUI 主题配置
查询暗色或亮色模式的色彩值
了解前端组件的样式定义规范
npx skills add lichtblick-suite/lichtblick --skill theme -g -y
提供Lichtblick单体仓库的单元测试规范，包括Mock构建器模式、测试数据构造策略及复用机制，旨在统一测试数据生成，提升测试代码的可读性、一致性与维护效率。
编写单元测试用例
创建或更新Mock构建器
构造测试所需的数据对象
npx skills add lichtblick-suite/lichtblick --skill unit-testing -g -y
规范 Lichtblick 项目中 Web Worker 的使用模式，涵盖 ComlinkWrap 生命周期管理、AbortSignal/Canvas 等数据转移处理及 SharedWorker 隔离机制，确保线程安全与资源释放。
使用 Web Worker 进行后台计算
配置 Comlink 通信与数据转移
处理 Worker 生命周期与内存泄漏
npx skills add lichtblick-suite/lichtblick --skill web-workers -g -y
提供Foxglove WebSocket实时数据连接的知识，涵盖协议握手、Worker线程通信、消息队列处理及自动重连机制。
实现或调试WebSocket实时数据流
优化前端可视化组件与后端的数据同步性能
npx skills add lichtblick-suite/lichtblick --skill websocket-connection -g -y
