# Build FigJam Plugin Features

FigJam plugin changes can fail when main-thread and UI APIs are mixed. This skill guides Claude, Codex, and Claude Code through the project structure, build flow, and import workflow.

## Install

```bash
npx skillstore add 7nohe/figjam-plugin
```

## Metadata

- Status: approved
- Slug: 7nohe-figjam-plugin
- Skillstore revision: r1
- Version status: missing
- Tree hash: b69bf0eb0ce31bf4466e24769a3128ff75b4a47b4ecd79345081e53f02d40173
- Author: 7nohe
- GitHub username: 7nohe
- License: MIT
- Repository: https://github.com/7nohe/figram/tree/main/.claude/skills/figjam-plugin
- Ref: e9e4712298ed071d92417a41714be123eb8364fa
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/7nohe-figjam-plugin
- Manifest: https://skillstore.pages.dev/api/skills/7nohe-figjam-plugin/manifest

## Capabilities

- Explains the split between code.ts and ui.ts responsibilities.
- Identifies which APIs belong in the plugin main thread.
- Shows the local build command for the plugin package.
- Describes how to import the manifest in Figma Desktop.
- Documents debugging locations for UI and main-thread errors.
- Summarizes JSON import handling and validation behavior.

## Use Cases

- Add Canvas Rendering: Use the skill to place rendering changes in code.ts and keep browser APIs out of the main thread.
- Repair UI Messaging: Use the skill to trace WebSocket, postMessage, and canvas communication when plugin data does not arrive.
- Prepare Local Plugin Testing: Use the skill to build the package and import the manifest through Figma Desktop development tools.

## Prompt Templates

### Locate the Right File

```
I need to change a FigJam plugin feature. Tell me whether the change belongs in code.ts or ui.ts, and explain why.
```

### Fix a Build Error

```
Review this FigJam plugin build error. Identify the likely thread boundary issue and suggest the smallest fix.
```

### Debug Message Flow

```
Trace the CLI to UI to main-thread message flow for this plugin bug. List the checks I should run in order.
```

### Plan a Rendering Feature

```
Design an implementation plan for a new FigJam rendering feature. Separate UI work, message passing, validation, and canvas rendering.
```

## Limitations

- It does not include source code for the plugin implementation.
- It does not validate manifest contents by itself.
- It assumes the project uses the documented packages/plugin layout.
- It does not replace Figma Desktop testing.

## Best Practices

- Keep browser APIs in ui.ts and FigJam canvas APIs in code.ts.
- Run the documented build before importing the manifest in Figma Desktop.
- Check UI and main-thread consoles separately when debugging.

## Anti Patterns

- Do not call window, document, fetch, or WebSocket from code.ts.
- Do not treat WebSocket delivery as proof that canvas rendering succeeded.
- Do not import a stale manifest after changing plugin package files.

## Security Audit

- Audited at: 2026-07-04T17:30:47.104\+00:00
- Summary: The static findings are false positives caused by Markdown backticks and code fences in SKILL.md. The only command shown is a fixed local build command, and no prompt injection, exfiltration intent, or malicious instruction was found.

## Stats

- Views: 177
- Downloads: 13
- Favorites: 0
- Popularity score: 0