Agent Skills › lichtblick-suite/lichtblick › panel-user-scripts

panel-user-scripts

GitHub

提供面板用户脚本技能的深度知识，涵盖Monaco编辑器集成、TypeScript编译、沙箱运行时执行及脚本API。用于指导自定义消息转换脚本的编写、调试与架构理解。

.github/skills/panel-user-scripts/SKILL.md lichtblick-suite/lichtblick

Trigger Scenarios

用户询问关于UserScripts面板的功能或配置需要解释Monaco编辑器在脚本中的集成方式涉及TypeScript编译、Worker隔离或沙箱执行机制的问题查询脚本生命周期、性能优化或错误处理策略

Install

npx skills add lichtblick-suite/lichtblick --skill panel-user-scripts -g -y

More Options

Non-standard path

npx skills add https://github.com/lichtblick-suite/lichtblick/tree/develop/.github/skills/panel-user-scripts -g -y

Use without installing

npx skills use lichtblick-suite/lichtblick@panel-user-scripts

指定 Agent (Claude Code)

npx skills add lichtblick-suite/lichtblick --skill panel-user-scripts -a claude-code -g -y

安装 repo 全部 skill

npx skills add lichtblick-suite/lichtblick --all -g -y

预览 repo 内 skill

npx skills add lichtblick-suite/lichtblick --list

SKILL.md

Frontmatter

{
    "name": "panel-user-scripts",
    "description": "Deep UserScripts panel knowledge: Monaco editor integration, UserScriptPlayer wrapper, TypeScript compilation in the transformer Worker, sandboxed runtime Worker execution, diagnostics, and the script API."
}

Panel User Scripts Skill

The in-app TypeScript editor that lets users write custom message transformations.

Architecture

UserScripts Panel (Monaco editor)
    │
    ▼
UserScriptPlayer (wraps the base Player)
    │
    ├── Transformer Worker (compiles + reports diagnostics)
    │   └── TypeScript compiler (in-Worker)
    │
    └── Runtime Worker (sandboxed script execution)
        └── user code runs here (isolated)

Core Components

File	Role
`panels/UserScriptEditor/`	Monaco editor UI, diagnostics display
`players/UserScriptPlayer/index.ts`	Player wrapper, Worker pool management
`players/UserScriptPlayer/transformerWorker/`	TypeScript compilation in a Worker
`players/UserScriptPlayer/runtimeWorker/`	Sandboxed script execution

Script Lifecycle

User writes TypeScript in Monaco
On save: code is sent to the Transformer Worker for compilation
Transformer compiles TS → JS and reports diagnostics (errors/warnings)
On success: the JS bundle is sent to the Runtime Worker
During playback: messages on input topics → Runtime Worker → output messages
Output messages are injected into PlayerState as additional topics

Worker Naming Pattern

// unique name per instance — isolates workers per tab (no cross-tab sharing)
new SharedWorker(new URL("./transformerWorker/index", import.meta.url), {
  name: uuidv4(),
});

SharedWorker is the worker type, but cross-tab instance reuse is disabled by unique naming.
Within a single player lifetime, runtime workers are reused/pooled where possible.
Each active script processor maps to an isolated runtime execution context.

Monaco Integration

Full TypeScript language service (autocomplete, errors, hover)
Custom Lichtblick script-API type definitions injected
Diagnostics shown inline and in a panel below the editor

Script API

export const inputs = ["/camera/image"];
export const output = "/processed_image";

export default function transform(event: MessageEvent): OutputMessage {
  return {
    /* processed data */
  };
}