wterm-web-terminal — скилл для Claude Code: как установить
Инструкция для ИИ-агента по встраиванию веб-терминала wterm с ядром на Zig и WebAssembly в проекты на React, Next.js или чистом JavaScript.
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a claude-codeЧто делает wterm-web-terminal
Скилл учит агента подключать терминальный эмулятор wterm в браузерные приложения. Парсинг управляющих последовательностей VT100, VT220 и xterm выполняет скомпилированный бинарник WebAssembly весом около 12 КБ. Вывод направляется сразу в дерево DOM. Благодаря этому в окне работают стандартное выделение строк курсором и поиск по странице через браузер.
Агент получает шаблоны кода для связки с React через хук useTerminal, автономного запуска шелла прямо в браузере с пакетом @wterm/just-bash и настройки серверного PTY через WebSockets. Для работы в Next.js компонент придётся оборачивать в динамический импорт с отключённым серверным рендерингом, иначе приложение упадёт при сборке на сервере. Файл wterm.wasm обязательно копируется в каталог публичных файлов проекта вручную.
Какие задачи решает
- встроить эмулятор терминала в интерфейс на React или Next.js
- подключить браузерный шелл без отдельного бэкенда через
@wterm/just-bash - настроить передачу данных терминала по WebSocket с помощью Node.js и
node-pty - стилизовать консоль через CSS-переменные или готовые темы
Примеры запросов агенту
- Добавь эмулятор терминала wterm в компонент Next.js с подключением к WebSocket
- Покажи, как запустить локальный bash в браузере с помощью пакетов @wterm/just-bash и @wterm/core
- Напиши бэкенд на Node.js с node-pty для работы с wterm по протоколу WebSocket
Как установить wterm-web-terminal
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a claude-code2Вручную: положить файлы
~/.claude/skills/wterm-web-terminal/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/wterm-web-terminal/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a codex2Вручную: положить файлы
.agents/skills/wterm-web-terminal/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a cursor2Вручную: положить файлы
.cursor/skills/wterm-web-terminal/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills wterm-web-terminal2Вручную: положить файлы
.github/skills/wterm-web-terminal/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/wterm-web-terminalВручную: положить файлы
.devin/skills/wterm-web-terminal/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о wterm-web-terminal
Как установить wterm-web-terminal в Claude Code?
Выполните команду npx skills add reason-machines/trending-skills --skill wterm-web-terminal -a claude-code в терминале.
Что делает скилл wterm-web-terminal?
Он даёт модели контекст и примеры интеграции библиотеки wterm: настройку React-компонента, подключение хука useTerminal, запуск PTY-сервера на Node.js и стилизацию через CSS.
Почему wterm рендерит вывод в DOM вместо Canvas?
DOM-рендеринг сохраняет нативное выделение строк, буфер обмена операционной системы и поиск по комбинации клавиш браузера без дополнительных скриптов.
