tabz-development

@GGPrompts/tabz-development

GGPrompts

121

10 forks

Updated 1/18/2026

View on GitHub

Patterns for building and debugging TabzChrome itself. Use when working on Terminal.tsx, xterm.js integration, WebSocket I/O, resize handling, or any TabzChrome extension/backend code.

Installation

$skills install @GGPrompts/tabz-development

Claude Code

Cursor

Copilot

Codex

Antigravity

Details

RepositoryGGPrompts/TabzChrome

Path.claude/skills/tabz-development/SKILL.md

Branchmain

Scoped Name@GGPrompts/tabz-development

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

skills list

Skill Instructions

name: tabz-development description: "Patterns for building and debugging TabzChrome itself. Use when working on Terminal.tsx, xterm.js integration, WebSocket I/O, resize handling, or any TabzChrome extension/backend code."

TabzChrome Development

Reference patterns for building TabzChrome's terminal implementation.

Core Architecture

extension/components/Terminal.tsx  →  WebSocket  →  backend/modules/pty-handler.js
         ↓                                                    ↓
    xterm.js render                                      tmux session

Key Files

File	Purpose
`extension/components/Terminal.tsx`	xterm.js terminal + resize
`extension/hooks/useTerminalSessions.ts`	Session lifecycle
`extension/background/websocket.ts`	WebSocket management
`backend/modules/pty-handler.js`	PTY spawning, tmux

Quick Patterns

Terminal Initialization

const term = new Terminal({ /* options */ });
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(containerRef.current);
fitAddon.fit();

Resize Handling

// Debounce resize, sync xterm → PTY
fitAddon.fit();
ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));

WebSocket I/O

// Terminal → Backend
term.onData(data => ws.send(JSON.stringify({ type: 'input', data })));
// Backend → Terminal
ws.onmessage = (e) => term.write(JSON.parse(e.data).data);

References

See references/ for detailed patterns:

xterm-patterns.md - Terminal setup, addons, options
resize-handling.md - Debouncing, PTY sync
websocket-io.md - Message protocol, reconnection
testing-checklist.md - Manual test scenarios

More by GGPrompts

View all

cc-setup

121

This skill should be used when the user asks to "diagnose Claude Code", "fix MCP errors", "manage plugins", "configure MCP servers", "check /doctor errors", "debug plugin issues", "add MCP server", "remove plugin", "list plugins", "list MCP servers", "fix schema errors", or needs help with Claude Code CLI configuration and troubleshooting.

tabz-browser

121

Browser automation via 70 tabz MCP tools. Use when taking screenshots, filling forms, debugging network requests, testing responsive design, or using text-to-speech notifications.

tabz-terminals

121

Spawn and manage terminal tabs via TabzChrome REST API. Use when spawning workers, creating terminals programmatically, setting up worktrees for parallel work, or crafting prompts for Claude workers.

bd-swarm-auto

116

Fully autonomous backlog completion. Runs waves until `bd ready` is empty. Self-resumable after /wipe. Use when you want hands-off parallel issue processing.