Add WebSocket Action Skill

Usage

/add-ws-action <actionName>

---

Step 1: Ask Questions

1. Action Purpose

What does this action do?
Brief description:

2. Parameters

What parameters does the action need?

List each with type:
- param1: string
- param2: number
- etc.

3. Public API

Expose in window.Gemini.WebSocket?

A) Yes - Users can call it
B) No - Internal only (used by features)

4. Middleware

Does this action need middleware?

A) No - Just send
B) Yes - Intercept/modify/block

---

Step 2: Add Message Type

In

src/websocket/protocol.ts

// 1. Add to enum
export enum ClientToServerMessageType {
    // ... existing
    <ACTION_NAME> = '<actionName>',
}

// 2. Define payload type
export interface <ActionName>Payload {
    param1: string;
    param2: number;
}

// 3. Add to message map (if exists)
export interface ClientToServerMessageMap {
    // ... existing
    [ClientToServerMessageType.<ACTION_NAME>]: <ActionName>Payload;
}

---

Step 3: Add Action to API

In

src/websocket/api.ts

import { ClientToServerMessageType } from './protocol';
import { send } from './connection';
import type { <ActionName>Payload } from './protocol';

/**
 * <Description of what this action does>
 * @param param1 - Description
 * @param param2 - Description
 */
export function <actionName>(param1: string, param2: number): void {
    send({
        type: ClientToServerMessageType.<ACTION_NAME>,
        data: { param1, param2 } satisfies <ActionName>Payload,
    });
}

Keep API simple - Users pass parameters, not raw payloads.

---

Step 4: Expose in Public API (if applicable)

In

src/api/index.ts

import { <actionName> } from '../websocket/api';

WebSocket: {
    // ... existing
    <actionName>,
}

Accessible via

window.Gemini.WebSocket.<actionName>(...)

.

---

Step 5: Optional - Add Middleware

Create

src/websocket/middlewares/<actionName>.ts

import { registerMiddleware } from './registry';
import { ClientToServerMessageType } from '../protocol';
import type { ClientToServerMessage } from '../protocol';

let unregister: (() => void) | null = null;

function processMessage(message: ClientToServerMessage): ClientToServerMessage | null {
    if (message.type !== ClientToServerMessageType.<ACTION_NAME>) {
        return message;  // Pass through
    }

    console.log('[<ActionName>] Intercepted:', message.data);

    // Modify
    // return { ...message, data: { ...message.data, modified: true } };

    // Block
    // return null;

    // Pass through
    return message;
}

export function register<ActionName>Middleware(): void {
    if (unregister) return;
    unregister = registerMiddleware(processMessage);
}

export function unregister<ActionName>Middleware(): void {
    unregister?.();
    unregister = null;
}

---

Step 6: Validate

Protocol

• Message type added to

  ClientToServerMessageType

  enum
• Payload interface defined
• No hardcoded type strings

API

• Action function in

  src/websocket/api.ts

• Typed parameters (no

  unknown

  or

  any

  )
• Uses

  send()

  from

  connection.ts

• JSDoc documentation

Public API (if applicable)

• Exposed in

  src/api/index.ts

• Callable via

  window.Gemini.WebSocket.<actionName>()

Middleware (if applicable)

• Returns

  message

  or

  null

  , never throws
• Has register/unregister functions
• Unregisters on cleanup

---

References

• Rules:

  .claude/rules/websocket/websocket.md

• Existing actions:

  src/websocket/api.ts

• Protocol:

  src/websocket/protocol.ts

• Middlewares:

  src/websocket/middlewares/