# wterm-web-terminal

Coding agent guide for embedding the lightweight Zig and WebAssembly terminal emulator wterm into React, Next.js, or vanilla web apps.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 435 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/wterm-web-terminal/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/wterm-web-terminal

## What it does

This skill equips your assistant with implementation patterns for wterm, a browser-based terminal component. The emulator offloads VT100 and xterm escape sequence parsing to a compact 12 KB WebAssembly module written in Zig. Instead of drawing to an HTML canvas, it writes straight to DOM nodes. Standard browser text selection, keyboard shortcuts, and screen reader access work out of the box.

The agent learns how to wire up the `@wterm/react` bindings, configure the `useTerminal` hook, or run an in-browser shell via `@wterm/just-bash`. For Next.js setups, the terminal must be imported dynamically with `ssr: false` because server-side rendering breaks against DOM elements. The `wterm.wasm` file needs to be placed into your project's public folder manually before the component can mount.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/wterm-web-terminal/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/wterm-web-terminal/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/wterm-web-terminal/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/wterm-web-terminal/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills wterm-web-terminal
```

2. **Manually: put the files in place**
- File: `.github/skills/wterm-web-terminal/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/wterm-web-terminal
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/wterm-web-terminal/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/wterm-web-terminal/SKILL.md

## When to use it
- integrate a terminal component into React or Next.js applications
- run a local Bash environment in the browser without server infrastructure
- pipe PTY streams over WebSockets using Node.js and `node-pty`
- theme terminal output using CSS custom properties

## Example prompts
- Set up a wterm terminal component in Next.js connected to a WebSocket backend
- Configure an in-browser Bash shell using @wterm/just-bash and @wterm/core
- Build a Node.js WebSocket PTY handler compatible with wterm terminal events

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 199 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md