figjam-plugin
FigJam plugin development workflow. Use when working on plugin code (code.ts, ui.ts), debugging WebSocket communication, or building the plugin.
Best use case
figjam-plugin is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. FigJam plugin development workflow. Use when working on plugin code (code.ts, ui.ts), debugging WebSocket communication, or building the plugin.
FigJam plugin development workflow. Use when working on plugin code (code.ts, ui.ts), debugging WebSocket communication, or building the plugin.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "figjam-plugin" skill to help with this workflow task. Context: FigJam plugin development workflow. Use when working on plugin code (code.ts, ui.ts), debugging WebSocket communication, or building the plugin.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/figjam-plugin/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How figjam-plugin Compares
| Feature / Agent | figjam-plugin | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
FigJam plugin development workflow. Use when working on plugin code (code.ts, ui.ts), debugging WebSocket communication, or building the plugin.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
SKILL.md Source
# FigJam Plugin Development ## Architecture Two-thread model: - `packages/plugin/src/code.ts` - Main thread (Figma API, renderer) - NO browser APIs (window, document, fetch) - Access to figma.* API - Renders nodes/edges to FigJam canvas - `packages/plugin/src/ui.ts` - UI iframe (WebSocket client) - Browser APIs available - Manages WebSocket connection to CLI - Handles connection UI ## Communication Flow ``` CLI (serve) ←→ WebSocket ←→ Plugin UI (ui.ts) ←→ postMessage ←→ Plugin Main (code.ts) ``` ## JSON Import (UI) - Accepts DSL JSON (nodes as array) or IR JSON (nodes as object) - Validates with `@figram/core` and normalizes to IR before posting to main thread - Validation errors are surfaced in the UI alert with path/message details ## Build ```bash cd packages/plugin && bun run build ``` Output: `packages/plugin/dist/` (code.js, ui.html) ## Import Plugin 1. Open Figma Desktop 2. Menu → Plugins → Development → Import plugin from manifest 3. Select `packages/plugin/manifest.json` ## Debugging - **UI errors**: Browser DevTools console (right-click plugin UI → Inspect) - **Main thread errors**: Figma DevTools (Menu → Plugins → Development → Open console) - **WebSocket issues**: Check UI console for connection status ## Key Files - `manifest.json` - Plugin configuration - `src/code.ts` - Canvas rendering logic - `src/ui.ts` - WebSocket client and connection UI - `src/ui.html` - UI template (bundled by build) - `src/icons/` - AWS service icons
Related Skills
plugin-forge
Create and manage Claude Code plugins with proper structure, manifests, and marketplace integration. Use when creating plugins for a marketplace, adding plugin components (commands, agents, hooks), bumping plugin versions, or working with plugin.json/marketplace.json manifests.
wordpress-plugin-development
WordPress plugin development workflow covering plugin architecture, hooks, admin interfaces, REST API, and security best practices.
agentdb-learning-plugins
Create and train AI learning plugins with AgentDB's 9 reinforcement learning algorithms. Includes Decision Transformer, Q-Learning, SARSA, Actor-Critic, and more. Use when building self-learning agents, implementing RL, or optimizing agent behavior through experience.
claude-plugin
**Use MCP repo-map tools when:** - Searching for symbols by name pattern (faster than Grep) - Getting all symbols in a file (faster than Read + parsing)
building-plugins
Expert at creating and managing Claude Code plugins that bundle agents, skills, commands, and hooks into cohesive packages. Auto-invokes when the user wants to create, structure, validate, or publish a complete plugin, or needs help with plugin architecture and best practices. Also auto-invokes proactively when Claude is about to create plugin directory structures, write plugin.json manifests, or implement tasks that involve bundling components into a plugin package.
building-logseq-plugins
Expert guidance for building Logseq plugins compatible with the new DB architecture. Auto-invokes when users want to create Logseq plugins, work with the Logseq Plugin API, extend Logseq functionality, or need help with plugin development for DB-based graphs. Covers plugin structure, API usage, and DB-specific considerations.
wp-plugin-development
Use when developing WordPress plugins: architecture and hooks, activation/deactivation/uninstall, admin UI and Settings API, data storage, cron/tasks, security (nonces/capabilities/sanitization/escaping), and release packaging.
plugin-settings
This skill should be used when the user asks about "plugin settings", "store plugin configuration", "user-configurable plugin", ".local.md files", "plugin state files", "read YAML frontmatter", "per-project plugin settings", or wants to make plugin behavior configurable. Documents the .claude/plugin-name.local.md pattern for storing plugin-specific configuration with YAML frontmatter and markdown content.
working-on-ancplua-plugins
Primary instruction manual for working within the ancplua-claude-plugins monorepo. Use when creating, modifying, or debugging plugins in this repository.
allaymc-plugin-dev
Build, update, and troubleshoot AllayMC plugins in Java or other JVM languages. Use when creating a new AllayMC plugin, migrating an existing plugin to a new Allay API version, wiring commands/events/tasks/config, or setting up Gradle and plugin metadata (plugin.json or AllayGradle plugin block).
fiftyone-develop-plugin
Develop custom FiftyOne plugins (operators and panels) from scratch. Use when user wants to create a new plugin, extend FiftyOne with custom operators, build interactive panels, or integrate external APIs into FiftyOne. Guides through requirements, design, coding, testing, and iteration.
plugin-structure
This skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plugin.json", "use ${CLAUDE_PLUGIN_ROOT}", "add commands/agents/skills/hooks", "configure auto-discovery", or needs guidance on plugin directory layout, manifest configuration, component organization, file naming conventions, or Claude Code plugin architecture best practices.