Why does the skill recommend visibility:hidden over display:none?

xterm.js requires non-zero dimensions to initialize properly; visibility:hidden allows the terminal to calculate its grid while remaining hidden from the user.

How does it handle terminal resizing issues?

It includes strategies for ResizeObserver integration and coordinating SIGWINCH signals to prevent 'redraw storms' during active output streaming.

Can this skill help debug WebSocket terminal messages?

It defines critical patterns for distinguishing between graceful disconnects and destructive close messages that would otherwise kill the backend PTY session.

Does this skill help with tmux integration?

Yes, it includes specific configurations for EOL (End of Line) conversion and session naming to ensure stable and corruption-free multi-pane terminal environments.

What is the main benefit of this xterm-js skill?

It provides production-proven patterns for integrating terminals into React apps, preventing common bugs like 0x0 rendering errors and accidental session termination.

XTerm.js Terminal Patterns

Name: XTerm.js Terminal Patterns
Author: GGPrompts

byGGPrompts

•

Developer Tools

Implements battle-tested patterns for xterm.js terminal integration, React lifecycle management, and WebSocket-based I/O.

This skill provides professional-grade guidance for developers building terminal applications using xterm.js and React. It focuses on solving complex challenges like synchronization between Zustand state and React refs, preventing session destruction during WebSocket closures, and ensuring correct terminal rendering in tabbed interfaces. By codifying lessons learned from production environments, it helps developers avoid terminal output corruption, EOL conversion issues in tmux sessions, and common race conditions during terminal initialization.

Key Features

01Advanced React Ref and State management patterns for terminal persistence

02Safe WebSocket communication strategies for terminal detach/reattach workflows

03Tmux-optimized configuration to prevent output and EOL corruption

042 GitHub stars

05UI-safe initialization techniques for hidden or tabbed terminal containers

06Diagnostic logging and systematic refactoring workflows for terminal hooks

Use Cases

01Debugging synchronization issues between frontend UI and backend PTY sessions

02Building a web-based IDE or remote terminal interface with React and xterm.js

03Implementing multi-window or split-pane terminal layouts with backend persistence

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ggprompts/my-gg-plugins xterm-js

For use in Claude.ai and ChatGPT

Download Skill