skills.rest
GGPrompts
GGPromptsCOMMUNITY
Explore all skills by this author →
GitHub

xterm-js

Implement xterm.js terminal UIs with React hooks and WebSocket I/O.

1|Updated Nov 7, 2025
Search Tags:#debugging#frontend architecture#tmux#WebSocket#xterm.js#terminal emulation#React development
One-click install
npx skills add https://github.com/GGPrompts/Tabz --skill xterm-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: xterm-js
Source: https://github.com/GGPrompts/Tabz/tree/main/.claude/skills/xterm-js
Command: npx skills add https://github.com/GGPrompts/Tabz --skill xterm-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires xterm, xterm-addon-unicode11, react, node-pty, websocket, and includes references (resource) components.

What problem does it solve?

Building production-grade terminal applications with xterm.js, React, and WebSockets is notoriously complex, often leading to weeks of debugging subtle issues like state desynchronization, rendering glitches, or session management failures. This skill provides battle-tested patterns and solutions, allowing you to bypass common pitfalls and build robust, high-performance terminals with confidence.

Core Features & Use Cases

  • Accelerated Terminal Development: Leverage proven best practices for xterm.js, React hooks, and WebSocket I/O to rapidly develop stable and performant terminal applications.
  • Effortless Debugging & Refactoring: Access expert strategies for diagnosing and fixing complex issues related to terminal initialization, resizing, state management, and multi-window handling, saving countless hours.
  • Seamless Tmux Integration: Implement reliable session persistence, reconnection, and split-terminal layouts with tmux, ensuring your terminal sessions are always available and correctly managed.
  • Use Case: You're tasked with integrating a custom terminal into an AI agent's web UI. Instead of starting from scratch and encountering every known xterm.js bug, you activate this skill. It guides you through setting up robust state management, handling WebSocket communication, and ensuring proper terminal resizing, allowing you to deliver a professional-grade terminal experience in a fraction of the time.

Quick Start

I am building a React application with xterm.js and WebSockets. I need to ensure robust terminal initialization and state management. Provide the best practices for handling refs and state, and for initializing xterm.js in a tab-based UI.

Frequently Asked Questions about xterm-js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a terminal UI with xterm.js and React without state desynchronization issues?▼

Building terminal UIs with xterm.js and React requires careful separation of refs for terminal instances and state for application data, proper useEffect dependency management, and correct WebSocket message handling. This skill provides battle-tested patterns for initialization, resizing, and session management that prevent common desynchronization bugs.

What's the best way to handle WebSocket communication in a React xterm.js application?▼

WebSocket communication in xterm.js requires distinguishing between disconnect and close events, managing reconnection state, and coordinating terminal input/output with message delivery. This skill covers the functional and technical requirements for robust message semantics and session reconnection handling.

Can I implement split-pane terminals and tmux-like session management with xterm.js?▼

Yes. xterm.js supports split-terminal patterns and multi-window routing when paired with tmux backends. This skill provides strategies for session persistence, detach/reattach workflows, and split-pane layout management in production-grade applications.

Why does my xterm.js terminal fail to render or resize correctly in React tabs?▼

Terminal rendering failures often stem from non-zero container dimensions, incorrect ref initialization, or misaligned useEffect hooks. This skill diagnoses these issues and provides proven patterns for initializing xterm.js in tab-based UIs with proper state and ref separation.

Do I need both React hooks and refs to build a stable xterm.js application?▼

Yes. React hooks manage application state and lifecycle, while refs maintain direct access to xterm.js terminal instances and DOM elements. This skill clarifies the functional distinction and shows how to use both correctly without conflicts.

What precautions should I take when integrating xterm.js into a multi-window web application?▼

Multi-window xterm.js applications require session naming, reconnection handling, and careful management of terminal instance lifecycles across windows. This skill covers the technical requirements and edge cases for maintaining session consistency and avoiding resource leaks.

Related Skills

Explore More Software Engineering Skills→
tincoppertincopper
10

xterm-js

Build and configure xterm.js terminal emulators for web and Electron apps.

Community
Advanced
curiositechcuriositech
2

reverse-proxy-for-agents

Route and secure AI agent HTTP, WebSocket, and LLM-router traffic with reverse proxy configurations.

Official
Advanced
s-hiraokus-hiraoku
21

terminal-expert

Configure xterm.js terminals with PTY integration and session persistence in VS Code extensions.

Community
Intermediate
briannadoubtbriannadoubt

swiftui-integration

Integrate Trebuchet distributed actors into SwiftUI apps with reactive connection state.

Community
Intermediate