skills.rest
jtydhr88
jtydhr88COMMUNITY
Explore all skills by this author →
GitHub

comfyui-node-frontend

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

265|28|Updated Mar 5, 2026
Search Tags:#frontend#javascript#hooks#extensions#widgets#sidebar#comfyui
One-click install
npx skills add https://github.com/jtydhr88/comfyui-custom-node-skills --skill comfyui-node-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: comfyui-node-frontend
Source: https://github.com/jtydhr88/comfyui-custom-node-skills/tree/main/plugins/comfyui-custom-nodes/skills/comfyui-node-frontend
Command: npx skills add https://github.com/jtydhr88/comfyui-custom-node-skills --skill comfyui-node-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ComfyUI frontend extensions streamline adding UI features to custom nodes by enabling modular JavaScript hooks, widgets, and UI components, reducing integration work and keeping frontend logic organized.

Core Features & Use Cases

  • Hooks and lifecycle methods to customize frontend behavior (init, setup, loadedGraphNode, beforeRegisterVueAppNodeDefs, etc.) for new or existing nodes.
  • Custom Widgets and Widgets registry to create rich UI components, with support for DOM-based widgets and Vue component wrappers.
  • Declarative extension properties including custom commands, settings, and UI enhancements like sidebars, top bars, and dialogs.
  • Real-world use cases include adding a new frontend panel with controls for a custom node, extending the UI with a custom widget, or registering global frontend commands for rapid workflows.

Quick Start

Create a JS extension by exporting WEB_DIRECTORY in Python (for example in init.py) and placing your extension script files under the designated directory so that all extension scripts are loaded automatically at startup.

Frequently Asked Questions about comfyui-node-frontend

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

FAQPage Schema
How do I add a custom sidebar tab to my ComfyUI frontend extension?▼

To add a custom sidebar tab to your ComfyUI frontend extension, use declarative extension properties within your JavaScript code. This approach allows you to define UI enhancements like sidebars, top bars, and dialogs directly for your custom nodes.

What is the process for loading JavaScript extensions in ComfyUI?▼

Loading JavaScript extensions in ComfyUI requires exporting the WEB_DIRECTORY variable in your Python file. You must then place your extension scripts under the designated js or scripts directory so they load automatically at startup.

Can I use Vue components for custom widgets in ComfyUI?▼

Yes, you can use Vue components for custom widgets in ComfyUI. The frontend extension system supports DOM-based widgets and Vue component wrappers through the custom Widgets registry to build rich UI components.

What lifecycle hooks are available for ComfyUI custom nodes?▼

Available lifecycle hooks for ComfyUI custom nodes include init, setup, loadedGraphNode, and beforeRegisterVueAppNodeDefs. These hooks enable you to customize frontend behavior for new or existing nodes throughout the application lifecycle.

Does ComfyUI support registering global frontend commands for workflows?▼

Yes, ComfyUI supports registering global frontend commands for workflows through declarative extension properties. This enables rapid workflows by allowing developers to define custom commands directly within their JavaScript extension scripts.

Related Skills

Explore More Software Engineering Skills→
TurkeyCTurkeyC

comfyui-node-packaging

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

Community
Intermediate
brennancheungbrennancheung

interactive-widgets

Create interactive learning widgets with pre-built React components and canvas visualizations.

Community
Intermediate
TurkeyCTurkeyC

comfyui-node-frontend

Register JavaScript extensions that add hooks, widgets, and UI components to the ComfyUI frontend.

Community
Intermediate
oguzhanguvenkayaoguzhanguvenkaya

shopify-storefront-graphql

Execute direct GraphQL queries and mutations against the Shopify Storefront API.

Community
Intermediate