Agent skill
tabz-development
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.
Install this agent skill to your Project
npx add-skill https://github.com/GGPrompts/TabzChrome/tree/main/.claude/skills/tabz-development
SKILL.md
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, optionsresize-handling.md- Debouncing, PTY syncwebsocket-io.md- Message protocol, reconnectiontesting-checklist.md- Manual test scenarios
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
tabz-terminals
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.
tabz-browser
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-integration
Integrate projects with TabzChrome terminals via HTML attributes, WebSocket, JS API, or Spawn API
integration
Integrate projects with TabzChrome terminals via Markdown links, HTML attributes, WebSocket, JS API, or Spawn API
terminals
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.
browser
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.
Didn't find tool you were looking for?