Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

FigJam Plugin Development · aiskillstore | DecimalAI

aiskillstore/figjam-plugin

SkillScore100Maintained

FigJam plugin development workflow. Use when modifying code.ts (canvas rendering), ui.ts (WebSocket/UI), fixing plugin build errors, or adding new rendering features.

codingby aiskillstore

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Coding pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/aiskillstore-figjam-plugin/SKILL.md

decimalai skills pull aiskillstore-figjam-plugin --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/aiskillstore-figjam-plugin/SKILL.md https://app.decimal.ai/s/aiskillstore-figjam-plugin/SKILL.md

Raw file: /s/aiskillstore-figjam-plugin/SKILL.md ↗ · machine-readable summary at /s/aiskillstore-figjam-plugin.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 8d ago

Yes — +23% lift-37% tokens0% turns100% of whole cases pass with skill (22/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-02	✗→✓	▲ Improved	-51%	0%
case-08	✗→✓	▲ Improved	-65%	0%
case-12	✗→✓	▲ Improved	-69%	0%
case-15	✗→✓	▲ Improved	-48%	0%
case-17	✗→✓	▲ Improved	-44%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

aiskillstore / marketplace

skills/7nohe/figjam-plugin/SKILL.md

View on GitHub ↗

Imported 8/3/2026Version v1

Skill contents

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

bash
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 |

Want to see if aiskillstore/figjam-plugin would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/21/2026, 19:18 UTC · 22 cases

Lift

+23%

100% vs 77%

Agent turns

1.0 vs 1.0

Tokens

-37%

1,138.5 vs 1,814.27

fail → pass · 5pass → pass · 17

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I am writing a FigJam plugin and tried to trigger a network fetch directly inside my canvas script, but it fails. How should I architect the communication flow between the UI layer and the main canvas handler to make API calls work properly?	pass→pass	14,443	10,211	-29%	1	1	0%	2,487	2,285	-8%	0	0	—
case-02 What is the procedure for building the plugin bundle inside the packages directory and then loading the manifest file into my local Figma Desktop application?	fail→pass	9,891	3,800	-62%	1	1	0%	1,758	867	-51%	0	0	—
case-03 I want to connect directly to a WebSocket server from inside my FigJam plugin's canvas renderer file (src/code.ts). Should I initialize the WebSocket client directly in code.ts?	pass→pass	10,254	5,238	-49%	1	1	0%	1,764	1,161	-34%	0	0	—
case-04 I am encountering a JavaScript runtime error in my FigJam plugin's custom UI window, but nothing shows up in the main Figma console. Where should I inspect to debug errors occurring in the UI layer?	pass→pass	10,332	3,094	-70%	1	1	0%	1,686	794	-53%	0	0	—
case-05 My node creation logic in the canvas renderer thread is failing quietly. How do I open the developer log console specifically for main thread canvas execution in Figma Desktop?	pass→pass	11,069	4,210	-62%	1	1	0%	1,734	931	-46%	0	0	—
case-11 In a standard FigJam plugin project layout under src/, which distinct TypeScript source files handle the UI connection layer and canvas rendering thread respectively?	pass→pass	6,840	2,316	-66%	1	1	0%	1,166	651	-44%	0	0	—
case-06 We are building a local CLI tool that needs to trigger live updates in a FigJam document through our plugin. How does external CLI communication reach the main canvas thread in this architecture?	pass→pass	17,426	8,085	-54%	1	1	0%	2,792	1,760	-37%	0	0	—
case-07 When importing external node representations into FigJam via JSON, does the plugin accept both raw DSL arrays and normalized intermediate representations (IR)?	pass→pass	14,026	1,992	-86%	1	1	0%	2,064	628	-70%	0	0	—
case-08 Which core npm package is responsible for validating JSON node payloads before normalizing them to IR during FigJam plugin imports?	fail→pass	9,678	8,372	-13%	1	1	0%	1,594	564	-65%	0	0	—
case-09 If an invalid node payload is supplied during a JSON import operation in the FigJam plugin, what specific path information should be included in the user alert?	pass→pass	8,372	3,739	-55%	1	1	0%	1,280	870	-32%	0	0	—
case-10 If an invalid node payload is supplied during a JSON import operation in the FigJam plugin, what specific message details should be shown to the user?	pass→pass	11,468	2,653	-77%	1	1	0%	1,830	683	-63%	0	0	—
case-12 Where should custom service icons be stored within the FigJam plugin repository structure?	fail→pass	11,215	1,853	-83%	1	1	0%	1,859	569	-69%	0	0	—
case-13 I need to access document.createElement or window.localStorage in my FigJam canvas rendering script (src/code.ts). Can I use DOM methods directly in code.ts?	pass→pass	9,576	5,756	-40%	1	1	0%	1,692	1,276	-25%	0	0	—
case-14 Which global API namespace is exclusively permitted inside src/code.ts for creating and manipulating canvas elements in Figma/FigJam?	pass→pass	3,392	2,109	-38%	1	1	0%	504	627	+24%	0	0	—
case-15 What is the relative file path for the plugin manifest configuration inside the packages workspace of this plugin repository?	fail→pass	6,138	1,775	-71%	1	1	0%	949	490	-48%	0	0	—
case-21 I am developing an interactive FigJam Widget (using @figma/widget) and need to persist counter state across multiple users in real-time. How should I use the useSyncedState hook in a FigJam widget component?	pass→pass	11,208	9,206	-18%	1	1	0%	2,060	1,999	-3%	0	0	—
case-16 When a DSL node array is provided to the JSON import module in this FigJam plugin, what internal structure is it normalized to prior to canvas rendering?	pass→pass	13,215	3,605	-73%	1	1	0%	2,014	838	-58%	0	0	—
case-17 What package runtime script command should be executed to build the plugin bundle in packages/plugin?	fail→pass	5,210	1,938	-63%	1	1	0%	871	487	-44%	0	0	—
case-18 Which runtime context (Main thread code.ts or UI thread ui.ts) has access to standard Browser APIs like fetch and WebSocket in a FigJam plugin?	pass→pass	9,584	2,213	-77%	1	1	0%	1,521	664	-56%	0	0	—
case-19 Outline the full step-by-step communication pipeline when an external CLI command creates a shape on the FigJam canvas.	pass→pass	16,259	8,192	-50%	1	1	0%	2,820	1,751	-38%	0	0	—
case-20 I am writing an external Node.js backend script using the Figma REST API (GET /v1/files/:key/images) to render SVG images of FigJam canvas frames. How should I set up the REST API request headers and query parameters?	pass→pass	13,965	10,662	-24%	1	1	0%	2,671	2,268	-15%	0	0	—
case-22 How do I apply CSS Tailwind classes or custom web fonts inside an HTML file loaded by figma.showUI(__html__) in a standard Figma plugin UI?	pass→pass	15,601	14,774	-5%	1	1	0%	2,798	2,884	+3%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +23 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 77.3%
Pass rate with the skill: 100%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/21/2026, 19:18 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-02

Prompt

What is the procedure for building the plugin bundle inside the packages directory and then loading the manifest file into my local Figma Desktop application?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run100

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns-33% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 7 days ago

Other measured skills in the registry, with their headline benchmark lift.