본문으로 건너뛰기
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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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월 17일 업데이트

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월 17일 업데이트

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월 17일 업데이트

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월 17일 업데이트

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월 17일 업데이트

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월 17일 업데이트

hashintel의 스킬 모두 보기

이 스킬의 문제 신고