Xterm.js Development
Provides battle-tested patterns for building robust, production-grade terminal applications using xterm.js, React, and WebSockets.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Includes debugging workflows and solutions for common pitfalls like tmux EOL conversion and session reconnection.
- Provides patterns for state and ref management in React terminal components.
- Guides WebSocket communication, highlighting destructive operations and multi-window routing.
- Offers strategies for refactoring terminal logic into custom React hooks while managing shared resources.
- Details best practices for xterm.js initialization, resizing, and output coordination to prevent rendering issues.
Use cases
- Integrating a terminal with a backend service like tmux for persistent sessions.
- Building a web-based terminal interface with React and xterm.js.
- Debugging complex rendering, state, or WebSocket issues in an existing terminal application.
FAQ
What does this Claude Code Skill do?
This skill provides battle-tested patterns and best practices for building complex, production-grade terminal applications using xterm.js, React, and WebSockets. It helps you avoid common pitfalls related to state management, component lifecycle, and real-time communication.
How does this skill improve my workflow?
It saves significant debugging time by providing proven solutions for tricky issues like initialization bugs, state/ref mismatches, and WebSocket message handling. By following its patterns, you can build more robust and maintainable terminal features faster.
When should I use this skill?
Use this skill when you are building or debugging a web-based terminal, integrating xterm.js into a React application, managing terminal I/O over WebSockets, or refactoring complex terminal logic into custom React hooks.
What key capabilities does it provide?
It offers expert guidance on React state and ref management, safe WebSocket communication patterns, correct xterm.js initialization and resizing, strategies for multi-window routing, and debugging workflows for common issues like session reconnection.
Related skills
Frontend Design
Creates distinctive, production-grade frontend interfaces with high design quality and a strong aesthetic point-of-view.
Developer Tools2,82412 ptsBrainstorming and Design
Refines rough ideas into fully-formed software designs using structured questioning, alternative exploration, and incremental validation.
Developer Tools6912 ptsHyperShift Azure Provider
Guides the deployment of self-managed HyperShift clusters on Microsoft Azure with proper identity and resource configuration.
Developer Tools2612 pts