Skills
.Work. You
Rest

comfyui-node-frontend

Community

Extend ComfyUI frontend with hooks, widgets, UI.

Software Engineering#frontend#javascript#hooks#extensions#widgets#sidebar#comfyui
Authorjtydhr88
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: comfyui-node-frontend
Download link: https://github.com/jtydhr88/comfyui-custom-node-skills/archive/main.zip#comfyui-node-frontend

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.