How does this skill handle tmux output corruption?

It provides specific configuration guidance for disabling EOL conversion (convertEol: false) when multiple xterm instances share a single tmux session to prevent line-ending conflicts.

What is the correct way to handle terminal detachment?

The skill recommends using specific API endpoints for detachment rather than destructive WebSocket 'close' messages, which can inadvertently kill the underlying PTY or tmux session.

Can I use this for multi-window terminal setups?

Yes, it includes critical architecture patterns for backend output routing and ownership tracking to prevent terminal output from broadcasting to the wrong browser windows.

Why shouldn't I use display: none for xterm.js containers?

xterm.js requires non-zero dimensions to initialize properly. Using display: none gives the container 0x0 dimensions; use visibility: hidden and absolute positioning instead to maintain layout dimensions while hiding the UI.

Xterm.js Terminal Integration

Name: Xterm.js Terminal Integration
Author: GGPrompts

byGGPrompts

•

Developer Tools

Provides battle-tested patterns and debugging strategies for building production-grade terminal applications with xterm.js, React, and WebSockets.

This skill optimizes the development of terminal interfaces by providing deep architectural guidance on xterm.js integration within modern web stacks. It addresses complex challenges such as terminal lifecycle management, synchronized state and ref updates, WebSocket-based I/O, and tmux session persistence. By implementing these patterns, developers can avoid common pitfalls like output corruption in split panes, initialization failures in hidden containers, and destructive WebSocket operations, ensuring a robust and performant terminal experience within React applications.

Key Features

01Tmux session persistence and EOL conversion corruption fixes

02Refactoring patterns for custom terminal hooks and shared refs

031 GitHub stars

04Multi-window terminal output management and ownership tracking

05WebSocket communication and message type routing strategies

06Terminal lifecycle and initialization patterns for React-based layouts

Use Cases

01Debugging WebSocket reconnection and terminal session detachment logic

02Building a web-based IDE or cloud terminal interface with React

03Implementing multi-pane or split terminal layouts using tmux backends

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ggprompts/my-plugins xterm-js

For use in Claude.ai and ChatGPT

Download Skill