xterm.js Best Practices

Overview

This skill provides comprehensive best practices for building terminal applications with xterm.js, React, and WebSockets. It captures critical patterns discovered through debugging production terminal applications, including state management, WebSocket communication, React hooks integration, and terminal lifecycle management.

When to Use This Skill

Use this skill when:

• Building or debugging xterm.js terminal implementations
• Integrating xterm.js with React (hooks, state, refs)
• Implementing WebSocket-based terminal I/O
• Managing terminal persistence with tmux or similar backends
• Refactoring terminal-related React components into custom hooks
• Debugging terminal initialization, resize, or rendering issues
• Implementing split terminal layouts or multi-window terminal management
• Working on detach/reattach terminal functionality

Core Best Practices