xterm-jslisted
Install: claude install-skill tincopper/neeko
# xterm.js Development Skill
xterm.js (`@xterm/xterm`) is a full-featured terminal emulator that runs in the browser or
Electron. It is NOT a shell — it must be connected to a backend process (e.g. via node-pty +
WebSocket) to execute commands.
---
## 1. Installation
```bash
npm install @xterm/xterm
# Required addons (install only what you need):
npm install @xterm/addon-fit @xterm/addon-attach @xterm/addon-web-links \
@xterm/addon-search @xterm/addon-webgl @xterm/addon-clipboard \
@xterm/addon-web-fonts @xterm/addon-unicode11
```
Always import the CSS:
```html
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
```
Or in JS/TS:
```ts
import '@xterm/xterm/css/xterm.css';
```
---
## 2. Basic Setup
```ts
import { Terminal } from '@xterm/xterm';
const term = new Terminal({
cols: 80,
rows: 24,
cursorBlink: true,
scrollback: 5000,
fontFamily: '"Cascadia Code", Menlo, monospace',
fontSize: 14,
theme: {
background: '#1e1e1e',
foreground: '#d4d4d4',
cursor: '#d4d4d4',
},
});
term.open(document.getElementById('terminal')!);
term.write('Hello from \x1B[1;32mxterm.js\x1B[0m\r\n$ ');
```
**Critical**: Always call `term.open(element)` AFTER the element is in the DOM.
Use `\r\n` (not just `\n`) for newlines when writing directly.
---
## 3. Official Addons
| Addon | Package | Purpose |
|---|---|---|
| FitAddon | `@xterm/addon-fit` | Resize terminal to fill its container |
| AttachAddon | `@xterm/addon-att