ReddRadar
Agent skill
figjam-plugin
FigJam plugin development workflow. Use when modifying code.ts (canvas rendering), ui.ts (WebSocket/UI), fixing plugin build errors, or adding new rendering features.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/figjam-plugin
SKILL.md
FigJam Plugin Development
Architecture
| Thread | File | APIs | Role |
|---|---|---|---|
| Main | code.ts |
figma.* only |
Canvas rendering |
| UI | ui.ts |
Browser APIs | WebSocket client, connection UI |
Critical: code.ts has NO browser APIs (window, document, fetch, WebSocket).
Communication
CLI ←─ WebSocket ─→ ui.ts ←─ postMessage ─→ code.ts ←─ figma.* ─→ Canvas
Build & Import
cd packages/plugin && bun run build
Import: Figma Desktop → Plugins → Development → Import from manifest → packages/plugin/manifest.json
Debugging
- UI errors: Right-click plugin UI → Inspect
- Main errors: Plugins → Development → Open console
JSON Import
- Accepts DSL (nodes array) or IR (nodes object)
- Validates with
@figram/core, normalizes to IR - Errors shown in alert with path + message
Key Files
| File | Purpose |
|---|---|
manifest.json |
Plugin config |
src/code.ts |
Canvas rendering |
src/ui.ts |
WebSocket + UI |
src/icons/ |
Service icons |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?