bpmn-js
A reference guide for working with bpmn-js modeler internals in web applications.
Install
mkdir -p .claude/skills/bpmn-js && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9618" && unzip -o skill.zip -d .claude/skills/bpmn-js && rm skill.zipInstalls to .claude/skills/bpmn-js
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
bpmn-js modeler internals — EventBus, services, copy-paste architecture, clipboard polyfill, modeler lifecycle. Use when working on bpmn-webview, diagram interactions, copy-paste, clipboard, or element templates.Key capabilities
- →Manage bpmn-js modeler lifecycle
- →Handle diagram event bus
- →Implement clipboard polyfills
- →Configure Camunda engine variants
How it works
It wraps the bpmn-js modeler and manages lifecycle events, clipboard interception, and engine-specific module loading.
Inputs & outputs
When to use bpmn-js
- →Customizing bpmn-js element templates
- →Debugging modeler lifecycle events
- →Implementing custom copy-paste behavior
- →Configuring Camunda engine variants
About bpmn-js
Provides technical details on the bpmn-js modeler lifecycle, event handling, and engine variants (Camunda 7/8). It helps developers manage diagram interactions, clipboard polyfills, and custom modeler configurations.
bpmn-js modeler internals — EventBus, services, copy-paste architecture, clipboard polyfill, modeler lifecycle. Use when working on bpmn-webview, diagram interactions, copy-paste, clipboard, or element templates.
When not to use it
- →When working outside of bpmn-webview
- →When not using bpmn-js library
Prerequisites
Limitations
- →Clipboard interception is production-only
How it compares
It provides deep internal access to modeler services and event bus priorities rather than just basic rendering.
Compared to similar skills
bpmn-js side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| bpmn-js (this skill) | 0 | 5mo | Review | Advanced |
| add-announcement | 1 | 8mo | Review | Beginner |
| scroll-experience | 101 | 8mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 8mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Miragon
View all by Miragon →You might also like
add-announcement
Agenta-AI
Helps add announcement cards to the sidebar banner system. Use when adding changelog entries, feature announcements, updates, or promotional banners to the Agenta sidebar. Handles both simple changelog entries and complex custom banners.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
threejs-postprocessing
CloudAI-X
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
snapdom
2025Emma
snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.
keyboard-shortcuts
mae616
UIキーボードショートカットを「公式基準（W3C APG / WCAG）＋プラットフォーム規約（Apple HIG / Fluent UI）＋デファクトスタンダード（GitHub・Gmail・Slack等）」に沿って設計し、衝突なく・発見しやすく・無効化可能な形で実装するための判断軸。