d3k — скилл для Claude Code: что делает и как установить
Запускает локальный dev-сервер и браузер проекта под единым управлением с общей хронологией событий. Помогает находить и воспроизводить ошибки в веб-приложениях.
npx skills add vercel-labs/dev3000 --skill d3k -a claude-codeЧто делает d3k
Скилл разворачивает фоновый рантайм через скрипт scripts/runtime.mjs. Он поднимает локальный сервер проекта, подключает браузер Chrome с постоянным профилем и привязывает канонический HTTPS-адрес без портов через portless. Для запуска требуются Node.js версии 24+ и установленный пакетный менеджер pnpm.
Агент взаимодействует с браузером через протокол CDP: делает интерактивные снимки интерфейса, переходит по ссылкам и кликает по элементам. Все логи сервера, консоли, исключения и сетевые запросы получают сквозные номера последовательности. Это позволяет читать события через runtime events с фильтрацией по источникам и временным меткам.
Если нет прав администратора для настройки portless HTTPS, рантайм не запустится. Подменять канонический адрес прямым localhost правилами запрещено. Все события хранятся в оперативной памяти и стираются при выходе процесса, поэтому перед тестом агент фиксирует курсор сессии.
Какие задачи решает
- воспроизвести ошибку веб-приложения в управляемом браузере Chrome
- сопоставить сетевые запросы CDP и логи сервера в единой ленте событий
- запустить dev-сервер на каноническом HTTPS-адресе без указания портов
- сохранить состояние авторизации в отдельном профиле проекта
Примеры запросов агенту
- Запусти локальное приложение через d3k и открой браузер для воспроизведения ошибки авторизации.
- Проверь события сессии в d3k после клика по форме и найди причину падения запроса.
- Перезапусти dev-сервер через
runtime startс флагом--headlessи сними скриншот страницы.
Как установить d3k
1Через Skills CLI (Vercel)
npx skills add vercel-labs/dev3000 --skill d3k -a claude-code2Вручную: положить файлы
~/.claude/skills/d3k/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/d3k/
1Через Skills CLI (Vercel)
npx skills add vercel-labs/dev3000 --skill d3k -a codex2Вручную: положить файлы
.agents/skills/d3k/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vercel-labs/dev3000 --skill d3k -a cursor2Вручную: положить файлы
.cursor/skills/d3k/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vercel-labs/dev3000 d3k2Вручную: положить файлы
.github/skills/d3k/SKILL.md1Через Skills CLI (Vercel)
npx skills add vercel-labs/dev3000 --skill d3k -a gemini-cli2Командой платформы
gemini skills install https://github.com/vercel-labs/dev3000 --path skills/d3kВручную: положить файлы
.devin/skills/d3k/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vercel-labs/dev3000 --skill d3k -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Браузер и парсинг»
Все скиллы по теме «Браузер и парсинг» →Вопросы о d3k
Как установить d3k в Claude Code?
Выполните команду npx skills add vercel-labs/dev3000 --skill d3k -a claude-code. Она загрузит скилл в конфигурацию агента.
Что делает d3k?
Он запускает dev-сервер проекта и браузер Chrome в едином фоновом процессе. Скилл связывает логи сервера, сетевые CDP-запросы и ошибки консоли в общую упорядоченную ленту для отладки.
Какие системные требования нужны для работы d3k?
Для работы требуются Node.js версии 24+ и пакетный менеджер pnpm. Также необходимы права администратора для разовой настройки службы portless HTTPS.
Исходный текст
SKILL.md · MIT
--- name: d3k description: Run and debug a local web app with a managed browser and a shared server/browser evidence timeline. Use when asked to develop, test, or reproduce a browser issue with d3k. --- # d3k Own the project's dev server and monitored browser through a small background runtime. No global d3k installation is needed. Evidence stays in bounded memory; browser authentication stays in the project Chrome profile. Use `node <skill-directory>/scripts/runtime.mjs` as `runtime` below, from the **target project root**. In a development checkout the helper runs the source with Bun; installed skills use the JavaScript package through `pnpm dlx` (Node.js 24+ and pnpm required). To try unreleased source from another project, set `D3K_RUNTIME_ROOT` to the dev3000 checkout. Do not use a previously published package to test unreleased changes. ## Prepare 1. Run `runtime portless status`. Canonical HTTPS must be ready (`canonical: true`, `serviceInstalled: true`, `setupRequired: false`) before starting the app or browser. If needed run `runtime portless setup`, wait for the one-time administrator authorization, then check again. Stop if setup is unavailable; never silently substitute direct localhost. 2. Run `runtime status`. Reuse a ready runtime for this project. If it is starting, wait for readiness. Do not start another dev server. A legacy d3k session must be stopped before switching runtimes. 3. Start `runtime start` in a retained background tool session. Keep its process handle. The runtime detects the package manager and `dev` script; use `--command '<dev command>'` when needed. Poll `runtime status` until `ready: true` and `browserConnected: true` with a port-free `https://...localhost` URL. Inspect `runtime events` if startup fails while the runtime is still alive, and the retained process output if it exits. ## Reproduce and inspect - For “let me test,” give the user the app URL and leave the browser running while they reproduce the issue. - For autonomous debugging, drive the same browser with `runtime browser snapshot -i`, `runtime browser click @e2`, and other agent-browser commands. The runtime supplies the CDP connection; never open a separate browser or profile. - Before a reproduction, read `runtime status` and keep its `sessionId` and `cursor`. - After the interaction, read `runtime events --session <id> --after <cursor>`. Server output, console messages, exceptions, network requests, and navigation share sequence numbers. Requests and responses carry CDP request IDs; adjacent server lines are chronological context, not proof of causation. - Continue from the returned `cursor` while `hasMore` is true. Use `--limit 1..500`, `--source server|browser|runtime`, or `--level error` for focused reads. For error context, read the unfiltered interval as well. Filters advance the cursor through examined events; retain the original cursor if you need another view of the same interval. - `reset: true` means the runtime restarted. `dropped` reports evicted events. Never claim complete evidence across either gap. Replay the interaction if necessary. - Fix the code and repeat the same interaction, then inspect the new interval. Keep the runtime alive across edits. ## Lifecycle Keep the runtime's project-stable profile for sign-in state. Use `--headless` for CI or when requested; `--servers-only` deliberately omits the browser. Automatic screenshots and persistent log files are off; request a screenshot through `runtime browser screenshot <absolute-path>` when visual evidence is needed. Stop with `runtime stop` or the retained process handle when asked. Leaving the browser open for user testing means leaving the runtime alive. Events are lost when it exits; only profile and session discovery data persist. Console/server text may contain application secrets; inspect selectively and avoid copying sensitive values into reports.
© vercel-labs · MIT · vercel-labs/dev3000