wterm-web-terminal — Claude Code skill: what it does, how to install
Coding agent guide for embedding the lightweight Zig and WebAssembly terminal emulator wterm into React, Next.js, or vanilla web apps.
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a claude-codeWhat wterm-web-terminal 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.
What it helps with
- 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 for the agent
- 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
How to install wterm-web-terminal
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a claude-code2Manually: put the files in place
~/.claude/skills/wterm-web-terminal/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/wterm-web-terminal/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a codex2Manually: put the files in place
.agents/skills/wterm-web-terminal/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a cursor2Manually: put the files in place
.cursor/skills/wterm-web-terminal/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills wterm-web-terminal2Manually: put the files in place
.github/skills/wterm-web-terminal/SKILL.md1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a gemini-cli2Platform CLI
gemini skills install https://github.com/reason-machines/trending-skills --path skills/wterm-web-terminalManually: put the files in place
.devin/skills/wterm-web-terminal/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about wterm-web-terminal
How do I install wterm-web-terminal in Claude Code?
Run npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a claude-code in your terminal.
What does the wterm-web-terminal skill do?
It instructs the agent on integrating the wterm emulator, covering vanilla JavaScript setups, React hooks, PTY server integration, and theme customisation.
What requirement exists for running wterm in Next.js?
You must import the terminal component dynamically with { ssr: false } and copy wterm.wasm into the public/ directory.
