Debug Connection Agent Skill

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.

5k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

404

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/aiskillstore/marketplace --skill debug-connection

What comes with it

18 636 bytes besides the instruction

skill-report.json

The instruction itself

7 sections, as written by the author

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"}

Other skills for the same job

different authors, same section of the catalogue

Pydicom

by christophacham

×3

Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.

Remotion Best Practices

by ncklrs

×3

Best practices for Remotion - Video creation in React

Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creation from content, or integrating with Azure OpenAI Realtime API for real audio output. Covers full-stack implementation from React frontend to Python FastAPI backend with WebSocket streaming.

4k tokens scripts

Remotion Best Practices

by ComeOnOliver

×2

Best practices for Remotion - Video creation in React

Use this skill when building applications with Gemini API hosted models, including Gemini and Gemma 4, working with multimodal content (text, images, audio, video), implementing function calling, using structured outputs, or needing current model specifications. Covers SDK usage...

Turn error logs, screenshots, voice notes, and rough bug reports into crisp, developer-ready GitHub issues with repro steps, impact, and evidence.

1k tokens

Trackpy Particle Tracking

by BioTender-max

×1

Python library for single-particle tracking (SPT) in video microscopy via the Crocker-Grier algorithm. Locate particles (fluorescent spots, colloids, vesicles, cells) per frame, link into trajectories, filter short tracks, and compute MSD for diffusion analysis. 2D/3D with subpixel accuracy; reads TIF stacks, AVI, image series via pims. Use for quantitative SPT and diffusion coefficient extraction from fluorescence or brightfield video.

7k tokens

How to use it

Copy the folder

Take aiskillstore/debug-connection from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.