AD

add-nodebridge-handler

Add and type-check communication handlers between your Node.js backend and the UI layer.

Install

mkdir -p .claude/skills/add-nodebridge-handler && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3052" && unzip -o skill.zip -d .claude/skills/add-nodebridge-handler && rm skill.zip

Installs to .claude/skills/add-nodebridge-handler

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.

Use this skill when adding a new NodeBridge handler to src/nodeBridge.ts, including updating types in src/nodeBridge.types.ts and optionally testing with scripts/test-nodebridge.ts
180 chars✓ has a “when” trigger
Intermediate

Key capabilities

  • Register new NodeBridge message handlers
  • Update NodeBridge type definitions
  • Implement handler logic in src/nodeBridge.ts
  • Wrap handlers with error handling
  • Validate functionality via test scripts

How it works

It registers a function within the `NodeHandlerRegistry` and updates the `HandlerMap` type to ensure strictly typed message passing.

Inputs & outputs

You give it
Handler category, action name, and expected data structure
You get back
Updated src/nodeBridge.ts and src/nodeBridge.types.ts files

When to use add-nodebridge-handler

  • Connecting new UI actions to backend logic
  • Updating NodeBridge message types
  • Testing backend message handlers

About this skill

Add NodeBridge Handler

Overview

This skill guides the process of adding a new message handler to the NodeBridge system, which enables communication between the UI layer and the Node.js backend.

Steps

1. Add Handler Implementation in src/nodeBridge.ts

Locate the registerHandlers() method in the NodeHandlerRegistry class and add your handler:

this.messageBus.registerHandler('category.handlerName', async (data) => {
  const { cwd, ...otherParams } = data;
  const context = await this.getContext(cwd);
  
  // Implementation logic here
  
  return {
    success: true,
    data: {
      // Return data
    },
  };
});

Handler Naming Convention:

  • Use dot notation: category.action (e.g., git.status, session.send, utils.getPaths)
  • Categories: config, git, mcp, models, outputStyles, project, projects, providers, session, sessions, slashCommand, status, utils

Common Patterns:

  • Always get context via await this.getContext(cwd)
  • Return { success: true, data: {...} } for success
  • Return { success: false, error: 'message' } for errors
  • Wrap in try/catch for error handling

2. Add Type Definitions in src/nodeBridge.types.ts

Add input and output types near the relevant section:

// ============================================================================
// Category Handlers
// ============================================================================

type CategoryHandlerNameInput = {
  cwd: string;
  // other required params
  optionalParam?: string;
};

type CategoryHandlerNameOutput = {
  success: boolean;
  error?: string;
  data?: {
    // return data shape
  };
};

Then add to the HandlerMap type:

export type HandlerMap = {
  // ... existing handlers
  
  // Category handlers
  'category.handlerName': {
    input: CategoryHandlerNameInput;
    output: CategoryHandlerNameOutput;
  };
};

3. (Optional) Add to Test Script

Update scripts/test-nodebridge.ts HANDLERS object if the handler should be easily testable:

const HANDLERS: Record<string, string> = {
  // ... existing handlers
  'category.handlerName': 'Description of what this handler does',
};

4. Test the Handler

Run the test script:

bun scripts/test-nodebridge.ts category.handlerName --cwd=/path/to/dir --param=value

Or with JSON data:

bun scripts/test-nodebridge.ts category.handlerName --data='{"cwd":"/path","param":"value"}'

Example: Complete Handler Addition

nodeBridge.ts

this.messageBus.registerHandler('utils.example', async (data) => {
  const { cwd, name } = data;
  try {
    const context = await this.getContext(cwd);
    
    // Do something with context and params
    const result = await someOperation(name);
    
    return {
      success: true,
      data: {
        result,
      },
    };
  } catch (error: any) {
    return {
      success: false,
      error: error.message || 'Failed to execute example',
    };
  }
});

nodeBridge.types.ts

type UtilsExampleInput = {
  cwd: string;
  name: string;
};

type UtilsExampleOutput = {
  success: boolean;
  error?: string;
  data?: {
    result: string;
  };
};

// In HandlerMap:
'utils.example': {
  input: UtilsExampleInput;
  output: UtilsExampleOutput;
};

Notes

  • Handlers are async functions that receive data parameter
  • Use this.getContext(cwd) to get the Context instance (cached per cwd)
  • Context provides access to: config, paths, mcpManager, productName, version, etc.
  • For long-running operations, consider using abort controllers (see git.clone pattern)
  • For operations that emit progress, use this.messageBus.emitEvent() (see git.commit.output pattern)

When not to use it

  • Front-end only state management
  • Complex backend services not requiring UI messaging

Prerequisites

Node.js environmentAccess to src/nodeBridge.ts

Limitations

  • Requires manual registration for every new handler
  • Type definitions must be manually kept in sync

How it compares

It enforces a standardized communication interface between UI and backend compared to custom ad-hoc implementations.

Compared to similar skills

add-nodebridge-handler side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
add-nodebridge-handler (this skill)16moReviewIntermediate
telegram-mini-app626moReviewAdvanced
shopify-apps14moReviewIntermediate
ccxt-typescript16moReviewBeginner

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

telegram-mini-app

davila7

Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app.

62163

shopify-apps

alinaqi

Shopify app development - Remix, Admin API, checkout extensions

19

ccxt-typescript

ccxt

CCXT cryptocurrency exchange library for TypeScript and JavaScript developers (Node.js and browser). Covers both REST API (standard) and WebSocket API (real-time). Helps install CCXT, connect to exchanges, fetch market data, place orders, stream live tickers/orderbooks, handle authentication, and manage errors. Use when working with crypto exchanges in TypeScript/JavaScript projects, trading bots, arbitrage systems, or portfolio management tools. Includes both REST and WebSocket examples.

15

stripe-integration

wshobson

Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.

48165

shopify-development

davila7

Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. TRIGGER: "shopify", "shopify app", "checkout extension", "admin extension", "POS extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"

1299

nodejs-backend-patterns

wshobson

Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures.

1246

Search skills

Search the agent skills registry