К основному содержанию
скилл CX Codex

d3k — скилл для Claude Code: что делает и как установить

Запускает локальный dev-сервер и браузер проекта под единым управлением с общей хронологией событий. Помогает находить и воспроизводить ошибки в веб-приложениях.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add vercel-labs/dev3000 --skill d3k -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/d3k/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/d3k/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Похожие

chrome-cdp pasky Скилл подключает ИИ-агента к запущенному браузеру Chrome через протокол DevTools без Puppeteer. Пригодится для отладки вёрстки, снятия скриншотов и кликов по элементам. CX Codex +1 2 100установок chrome-devtools официальный github Управляет живым Chrome через Chrome DevTools MCP: открывает страницы, проверяет ошибки и пишет трассы производительности. Нужен для отладки интерфейса прямо из агента. 15 258установок chrome-devtools-cli ChromeDevTools Позволяет агенту управлять браузером через Chrome DevTools: кликать по элементам, собирать снимки памяти и профилировать производительность прямо из терминала. CX Codex +1 6 800установок full-page-screenshot Alireza Rezvani Снимает целую веб-страницу в один PNG, включая контент за прокруткой. Пригодится для SPA, ленивых изображений и очень длинных страниц. 564установок agent-browser vercel-labs Скилл управляет браузером через CLI: открывает страницы, заполняет формы, нажимает кнопки и проверяет веб-приложения. Подходит для задач, где агенту нужно действовать в интерфейсе. CX Codex +1 1 200 000установок browser-use browser-use Даёт агенту живой Chrome через CDP: клики, ввод, скриншоты и страницы, которым нужен JS или ваша логин-сессия. CX Codex +1 98 200установок

Рядом в теме «Браузер и парсинг»

Все скиллы по теме «Браузер и парсинг» →

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой