vscode-sidebar-terminal: Skill for Claude Code

Terminal Expert

Overview

This skill provides comprehensive knowledge for implementing terminal features in VS Code extensions. It unifies xterm.js implementation details with VS Code's terminal architecture patterns, ensuring consistency with the official VS Code terminal implementation.

When to Use This Skill

• Creating and configuring xterm.js Terminal instances
• Implementing terminal addons (fit, webgl, serialize, search, etc.)
• Integrating with VS Code WebViews
• Implementing PTY (pseudo-terminal) process management
• Creating terminal session persistence and restoration
• Handling keyboard input, IME composition, and mouse events
• Implementing shell integration with OSC 633 sequences
• Optimizing terminal performance (GPU acceleration, buffering)
• Managing terminal lifecycle and resource cleanup

Quick Reference

Essential Addons

Addon	Package	Purpose	Loading
FitAddon	@xterm/addon-fit	Auto-resize to container	Always
WebglAddon	@xterm/addon-webgl	GPU acceleration (30%+ perf)	Lazy
SerializeAddon	@xterm/addon-serialize	Session persistence	Lazy
SearchAddon	@xterm/addon-search	Find in terminal	Lazy
Unicode11Addon	@xterm/addon-unicode11	Extended Unicode	Config
WebLinksAddon	@xterm/addon-web-links	Clickable URLs	Config
ImageAddon	@xterm/addon-image	Inline images	Config

Performance Targets

Operation	Target	Notes
Terminal creation	<500ms	Including PTY spawn
Session restore	<3s	1000 lines scrollback
Terminal disposal	<100ms	Full cleanup
Resize handling	100ms debounce	Prevents excessive calls
Output buffering	16ms flush	~60fps rendering

---

xterm.js Implementation

Basic Terminal Setup

import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import { WebglAddon } from '@xterm/addon-webgl';

class TerminalManager {
  private terminal: Terminal;
  private fitAddon: FitAddon;
  private container: HTMLElement;

  constructor(container: HTMLElement) {
    this.container = container;
    this.terminal = this.createTerminal();
    this.fitAddon = new FitAddon();
  }

  private createTerminal(): Terminal {
    return new Terminal({
      // Appearance
      fontFamily: '"Cascadia Code", "Fira Code", monospace',
      fontSize: 14,
      lineHeight: 1.2,
      cursorStyle: 'block',
      cursorBlink: true,

      // Behavior
      scrollback: 5000,
      altClickMovesCursor: true,

      // Performance
      fastScrollModifier: 'alt',
      smoothScrollDuration: 0,

      // Theme
      theme: {
        background: '#1e1e1e',
        foreground: '#d4d4d4',
        cursor: '#d4d4d4',
        selectionBackground: '#264f78'
      }
    });
  }

  initialize(): void {
    this.terminal.loadAddon(this.fitAddon);
    this.terminal.open(this.container);
    this.fitAddon.fit();
    this.setupResizeObserver();
  }

  private setupResizeObserver(): void {
    const resizeObserver = new ResizeObserver(() => {
      requestAnimationFrame(() => this.fitAddon.fit());
    });
    resizeObserver.observe(this.container);
  }
}