免费在 GitHub 公开

debug-connection

Debug WebSocket connection issues between CLI and FigJam plugin. Use when diagrams aren't syncing, connection fails, plugin shows "Connecting..." indefinitely, or patches aren't being applied to canvas.

中文简介正在准备中。当前显示原文说明。

aiskillstore/marketplace

集成工具Figma

查看安装方法

包含的文件（2）

SKILL.md2.7 KB
skill-report.json18.2 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

WebSocket Connection Debugging

Architecture

CLI serve (Bun) ←── WebSocket ──→ Plugin UI (ui.ts) ←── postMessage ──→ Plugin Main (code.ts)
     │                                  │                                    │
  File watcher                    Browser APIs                          Figma API
  YAML parsing                    WebSocket client                      Canvas rendering

Common Issues

Issue	Symptom	Solution
CLI not running	"Connecting..." indefinitely	Start `bun run packages/cli/src/index.ts serve diagram.yaml`
Port in use	Connection refused	Check `lsof -i :3456`, use different port
Secret mismatch	Connects then immediately closes	Match `--secret` value in CLI and plugin
YAML errors	Connected but no updates	Fix validation errors in CLI output
docId mismatch	No response after hello	Ensure plugin docId matches YAML `docId`
Patches not applied	Connected, canvas unchanged	Check Plugin Main console for render errors

Debugging Steps

CLI side: Check terminal for errors, verify YAML with bun run packages/cli/src/index.ts build diagram.yaml
Plugin UI: Right-click plugin → Inspect → Console for WebSocket events
Plugin Main: Figma Desktop → Plugins → Development → Open console

Message Flow

Plugin                          CLI
  │                              │
  │──── hello ─────────────────►│  {type:"hello", docId, secret?}
  │◄──── full ─────────────────│  {type:"full", rev, ir}
  │                              │
  │      [YAML changes]          │
  │◄──── patch ────────────────│  {type:"patch", baseRev, nextRev, ops}
  │                              │
  │      [Reconnect]             │
  │──── requestFull ───────────►│  {type:"requestFull", docId}
  │◄──── full ─────────────────│

JSON Import Errors

JSON must be an object with version, docId, nodes
DSL format: nodes as array
IR format: nodes as object (Record)
Validation errors shown in alert with path + message

Quick Test

# Start server
bun run packages/cli/src/index.ts serve examples/diagram.yaml

# Test with wscat
wscat -c ws://localhost:3456
> {"type":"hello","docId":"test"}

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

academy-guide

免费

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

中文简介正在准备中。当前显示原文说明。