skills.rest
artokun
artokunCOMMUNITY
Explore all skills by this author →
Website𝕏@artokunGitHub

comfyui-frontend-extensions

Author ComfyUI v2 frontend extensions using the @comfyorg/extension-api package.

715|111|Updated Feb 15, 2026
Search Tags:#Frontend#widgets#typeScript#extension-api#sideBar#ComfyUI#Migration
One-click install
npx skills add https://github.com/artokun/comfyui-mcp --skill comfyui-frontend-extensions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: comfyui-frontend-extensions
Source: https://github.com/artokun/comfyui-mcp/tree/main/plugin/skills/comfyui-frontend-extensions
Command: npx skills add https://github.com/artokun/comfyui-mcp --skill comfyui-frontend-extensions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @comfyorg/extension-api, and includes references (resource) components.

What problem does it solve?

ComfyUI's legacy v1 extension model relied on monkey-patching prototypes and global window.app access, which is fragile and hard to maintain. This Skill teaches the typed, import-based v2 extension API so you can write or migrate ComfyUI web-UI extensions correctly.

Core Features & Use Cases

  • Typed Extension Authoring: Use defineNode, defineExtension, and defineWidget to react to node lifecycle, app lifecycle, and render custom DOM widgets without prototype patching.
  • Shell UI Registration: Add sidebar tabs, bottom-panel tabs, toolbar buttons, commands, hotkeys, settings, and about badges, each returning a disposable handle.
  • Typed Event Namespaces: Subscribe to execution, graph, server, and workbench events with unsubscribe functions and module augmentation for payload typing.
  • Use Case: You want a chat panel in the ComfyUI sidebar that streams backend replies. Use defineSidebarTab with a custom render function and subscribe to a custom server event to append messages.

Quick Start

Ask the AI to write a ComfyUI v2 extension that adds a sidebar tab and reacts to execution progress events using @comfyorg/extension-api.

Frequently Asked Questions about comfyui-frontend-extensions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a ComfyUI v2 frontend extension?▼

Import defineNode or defineExtension from @comfyorg/extension-api and export a definition object. Use nodeCreated or loadedGraphNode for per-node logic, and call shell-UI defineX functions like defineSidebarTab inside setup() or at module scope.

How do I migrate a ComfyUI v1 extension to v2?▼

Replace app.registerExtension with separate defineNode and defineExtension calls, convert prototype patches to node.on(...) subscriptions, and move widget.value assignments to setValue with on('valueChange') listeners. The references/migrate-v1-to-v2.md file maps every legacy pattern.

Can I create widgets at runtime in ComfyUI v2?▼

No, node.addWidget and node.addDOMWidget are removed in v2. Declare widgets in the Python node's INPUT_TYPES and register the rendering type with defineWidget, providing a mount(host, ctx) function for custom DOM.

Why does my ComfyUI v2 lifecycle hook not fire?▼

Hooks like onMounted and onNodeMounted must be called synchronously inside setup() or nodeCreated. Calling them after an await loses the implicit scope context, throwing in development and silently doing nothing in production.

How do I listen to execution events in ComfyUI v2?▼

Use the typed execution namespace: execution.on('start', fn) or execution.on('progress', fn). Each call returns an Unsubscribe function, and custom node events ride the server namespace with arbitrary event names.

Related Skills

Explore More Software Engineering Skills→
jtydhr88jtydhr88
265

comfyui-node-frontend

Extend ComfyUI frontends with JavaScript hooks, widgets, and UI components.

Community
Intermediate
TurkeyCTurkeyC

comfyui-node-packaging

Automate setup, structuring, and publishing for ComfyUI custom node projects.

Community
Intermediate
1k-off1k-off
1

umbraco-tiptap-statusbar-extension

Create Lit-based Tiptap status bar extensions for the Umbraco Rich Text Editor.

Community
Intermediate
TurkeyCTurkeyC

comfyui-node-migration

Migrate ComfyUI V1 custom nodes to the V3 API with Schema-based definitions.

Community
Advanced