本文へ移動
cccskills
無料GitHub で公開

d3k

d3k assistant for debugging web apps

インストール方法を見る

含まれるファイル(1)

  • SKILL.md4.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

d3k Commands

d3k captures browser and server logs in a unified log file. Use these commands:

Viewing Errors and Logs

d3k errors              # Show recent errors (browser + server combined)
d3k errors --context    # Show errors + user actions that preceded them
d3k errors -n 20        # Show last 20 errors

d3k logs                # Show recent logs (browser + server combined)
d3k logs --type browser # Browser logs only
d3k logs --type server  # Server logs only

Other Commands

d3k fix                 # Deep analysis of application errors
d3k fix --focus build   # Focus on build errors

d3k crawl               # Discover app URLs
d3k crawl --depth all   # Exhaustive crawl

Browser Interaction

d3k agent-browser auto-connects to the active session's browser via CDP:

d3k agent-browser open http://localhost:3000/page
d3k agent-browser snapshot -i    # Get element refs (@e1, @e2)
d3k agent-browser click @e2
d3k agent-browser fill @e3 "text"
d3k agent-browser screenshot /tmp/shot.png

To target a different browser, run d3k agent-browser connect <port> first.

Codex Fresh Browser/Profile Startup

Use this workflow when the user asks Codex to start d3k with a fresh browser/profile.

  1. Close any stale agent-browser daemon before launching with --profile. Otherwise agent-browser will reuse the existing daemon and print --profile ignored.

    d3k agent-browser close --all
    
  2. Start the app through d3k in servers-only mode and keep that command running. In Codex, this is more reliable than asking d3k to launch the browser itself when a fresh profile is required.

    d3k --no-agent --no-skills --servers-only --command "npm run dev -- -H 127.0.0.1 -p 3000" --port 3000 --startup-timeout 90 --no-tui
    

    Adjust the package-manager command and port for the project. Prefer --command over --script when passing framework flags. For npm scripts, put flags after --; otherwise tools like Next.js can interpret the port as a project directory.

  3. Verify the server before opening more browser windows:

    curl -I http://127.0.0.1:3000
    
  4. Open the fresh profile as a separate browser step:

    d3k agent-browser --profile /tmp/d3k-fresh-profile --headed open http://127.0.0.1:3000
    
  5. Sanity-check the opened page:

    d3k agent-browser get title
    d3k agent-browser snapshot -i
    d3k errors
    

Practical rules:

  • Prefer 127.0.0.1 for this workflow. If localhost hangs or flips between IPv4/IPv6 behavior, do not keep retrying browser launches.
  • If curl -I hangs, the server is wedged even if the port appears occupied; restart the d3k server process before opening a browser.
  • In servers-only mode there is no d3k-monitored CDP browser. Use regular d3k agent-browser commands, not d3k cdp-port.
  • In sandboxed agent environments, rerun local-network checks and agent-browser opens outside the sandbox when sandbox networking blocks access to 127.0.0.1.

Browser Tool Choice

Use agent-browser for browser work.

Practical rule:

  • Need to drive the same monitored browser session: use agent-browser.
  • Examples:
d3k agent-browser snapshot -i
d3k agent-browser click @e2

To make d3k prefer one locally when it launches helper browser commands, use:

d3k --browser-tool agent-browser

Fix Workflow

  1. d3k errors --context - See errors and what triggered them
  2. Fix the code
  3. d3k agent-browser open <url> then d3k agent-browser click @e1 to replay
  4. d3k errors - Verify fix worked

Creating PRs with Before/After Screenshots

When creating a PR for visual changes, always capture before/after screenshots to show the impact:

  1. Before making changes, screenshot the production site:

    d3k agent-browser open https://production-url.com/affected-page
    d3k agent-browser screenshot /tmp/before.png
    
  2. After making changes, screenshot localhost:

    d3k agent-browser open http://localhost:3000/affected-page
    d3k agent-browser screenshot /tmp/after.png
    
  3. Or use the tooling API to capture multiple routes at once:

    capture_before_after_screenshots(
      productionUrl: "https://myapp.vercel.app",
      routes: ["/", "/about", "/contact"]
    )
    
  4. Include in PR description using markdown:

    ### Visual Comparison
    | Route | Before | After |
    |-------|--------|-------|
    | `/` | ![Before](before.png) | ![After](after.png) |
    

    Upload screenshots by dragging them into the GitHub PR description.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.

日本語の概要は準備中です。原文の説明を表示しています。

hashintel/brunch82026年10月8日 更新

Search the live web via Perplexity Search API. Use when you need current documentation, release notes, vendor pages, news, domain-constrained web search, or date/recency filtering. Not for local codebase search or stable docs already in context.

日本語の概要は準備中です。原文の説明を表示しています。

hashintel/brunch82026年10月8日 更新

cli-cdp

無料

Chrome DevTools CLI for browser automation via shell commands. Use when interacting with web pages from the command line — navigating, clicking, filling forms, inspecting console/network, taking screenshots, or extracting page content. Triggers on: browse a page, automate Chrome, inspect console, check network requests, take a screenshot, fill a form, click a button.

日本語の概要は準備中です。原文の説明を表示しています。

hashintel/brunch82026年10月8日 更新

Uses the chrome-devtools-axi CLI for browser automation, accessibility-tree snapshots, console and network inspection, screenshots, Lighthouse audits, and performance traces. Use when interacting with Chrome from the shell, especially when the user mentions chrome-devtools-axi, AX snapshots, browser debugging, or DevTools automation from the command line.

日本語の概要は準備中です。原文の説明を表示しています。

hashintel/brunch82026年10月8日 更新

cli-cmux

無料

Deep expertise in cmux — the terminal multiplexer with native browser views. Use when managing panes, reading terminal output, sending keystrokes, opening browser views, or manually testing web UIs and TUIs inside cmux. Triggers on: cmux, open a browser pane, split terminal, read screen, send keys, test this UI in cmux, preview in cmux.

日本語の概要は準備中です。原文の説明を表示しています。

hashintel/brunch82026年10月8日 更新

Uses the gh-axi CLI for GitHub shell operations: issue, pull request, workflow run, release, repo, search, and API tasks. Prefer this over regular `gh` for GitHub reads and simple mutations when an agent needs compact, structured, suggestion-rich output. Triggers on: gh, GitHub CLI, github issue, github pr, pull request, workflow run, github release, gh api, repo inspection, list PRs, view issue, check workflow runs, inspect repo, GitHub shell operations.

日本語の概要は準備中です。原文の説明を表示しています。

hashintel/brunch82026年10月8日 更新

hashintel のスキルをすべて見る

このスキルの問題を報告する