Extension Puppeteer Debugging
mengxi-ream/read-frog
Debug the built Read Frog extension in real Chrome. An agent skill from mengxi-ream/read-frog.
Drive and inspect the running Steam client UI over the Chrome DevTools Protocol (CEF remote debugging, port 8080) — list targets, evaluate JS probes, navigate routes, click elements, dispatch keys…
Install Steam Cdp
$ npx skills add jinzhongjia/decky-music --skill steam-cdp -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jinzhongjia/decky-music steam-cdp --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/jinzhongjia/decky-music.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/steam-cdp .claude/skills/steam-cdp && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "steam-cdp" agent skill from https://github.com/jinzhongjia/decky-music/tree/main/.agents/skills/steam-cdp into .claude/skills/steam-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "steam-cdp", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/jinzhongjia/decky-music/tree/main/.agents/skills/steam-cdpType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add jinzhongjia/decky-music --skill steam-cdp -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jinzhongjia/decky-music steam-cdp --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jinzhongjia/decky-music.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/steam-cdp .agents/skills/steam-cdp && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "steam-cdp" agent skill from https://github.com/jinzhongjia/decky-music/tree/main/.agents/skills/steam-cdp into .agents/skills/steam-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "steam-cdp", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jinzhongjia/decky-music --skill steam-cdp -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jinzhongjia/decky-music steam-cdp --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jinzhongjia/decky-music.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/steam-cdp .cursor/skills/steam-cdp && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "steam-cdp" agent skill from https://github.com/jinzhongjia/decky-music/tree/main/.agents/skills/steam-cdp into .cursor/skills/steam-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "steam-cdp", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/jinzhongjia/decky-music.git --path .agents/skills/steam-cdp--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add jinzhongjia/decky-music --skill steam-cdp -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jinzhongjia/decky-music steam-cdp --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jinzhongjia/decky-music.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/steam-cdp .gemini/skills/steam-cdp && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "steam-cdp" agent skill from https://github.com/jinzhongjia/decky-music/tree/main/.agents/skills/steam-cdp into .gemini/skills/steam-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "steam-cdp", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install jinzhongjia/decky-music steam-cdpInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add jinzhongjia/decky-music --skill steam-cdp -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jinzhongjia/decky-music.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/steam-cdp .github/skills/steam-cdp && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "steam-cdp" agent skill from https://github.com/jinzhongjia/decky-music/tree/main/.agents/skills/steam-cdp into .github/skills/steam-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "steam-cdp", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jinzhongjia/decky-music --skill steam-cdp -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jinzhongjia/decky-music steam-cdp --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jinzhongjia/decky-music.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/steam-cdp .opencode/skills/steam-cdp && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "steam-cdp" agent skill from https://github.com/jinzhongjia/decky-music/tree/main/.agents/skills/steam-cdp into .opencode/skills/steam-cdp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "steam-cdp", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
steam-cdp- GitHub stars
- 122
- Token cost
- ~1.3k tokens
- SKILL.md length
- 481 words
- Files
- 10 (incl. scripts)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Drive and inspect the running Steam client UI over the Chrome DevTools Protocol (CEF remote debugging, port 8080) — list targets, evaluate JS probes, navigate routes, click elements, dispatch keys…
- Hands-free UI automation and read-only diagnosis of Steams gamepad UI on a Steam Deck (or any Steam with CEF debugging enabled)
- SKILL.md covers Setup (once per machine session), Targets, Script inventory and Writing probes, plus 3 more sections
- Runs JavaScript scripts from its folder; calls node and ssh
- Tasks that involve Browser testing
What it does
Steam Cdp is an agent skill from jinzhongjia/decky-music. Drive and inspect the running Steam client UI over the Chrome DevTools Protocol (CEF remote debugging, port 8080) — list targets, evaluate JS probes, navigate routes, click elements, dispatch keys, capture screenshots, stream console errors. Use for hands-free UI automation and read-only diagnosis of Steam's gamepad UI on a Steam Deck (or any Steam with CEF debugging enabled).
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts (for example `scripts/probe-callables.js`, `scripts/probe-mainmenu.js` and `scripts/probe-menu-items.js`).
It sits in Development, covering Browser testing and Debugging. It works with Chrome DevTools. The repository describes itself as: Steam decky plugin for music(QQ Music and NetEase Cloud Music). The licence is MIT.
When your agent uses it
- Hands-free UI automation and read-only diagnosis of Steams gamepad UI on a Steam Deck (or any Steam with CEF debugging enabled)
- Tasks that involve Browser testing
- Tasks that involve Debugging
Example prompts
- “/steam-cdp”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit 152c9c8. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 9 files in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
nodessh
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use ssh, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Steam Cdp loads about 1.3k tokens when it runs. Until then it costs about 97 tokens; SKILL.md has 481 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from jinzhongjia/decky-music at commit 152c9c8, republished under its MIT licence (© jinzhongjia). 481 words, ~1,307 tokens.
Download SKILL.mdSave it as
.claude/skills/steam-cdp/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.- name
- steam-cdp
- description
- Drive and inspect the running Steam client UI over the Chrome DevTools Protocol (CEF remote debugging, port 8080) — list targets, evaluate JS probes, navigate routes, click elements, dispatch keys, capture screenshots, stream console errors. Use for hands-free UI automation and read-only diagnosis of Steam's gamepad UI on a Steam Deck (or any Steam with CEF debugging enabled).
Steam CDP Automation
Steam's embedded Chromium (CEF) exposes remote debugging on localhost:8080 on the device
(enabled by default in Decky environments; desktop Steam needs -cef-enable-debugging).
Everything here is read-only diagnosis and test driving — never ship CDP tricks inside a
plugin. The bundled scripts live in scripts/ next to this file and are dependency-free
(Node ≥ 21 for global fetch/WebSocket).
Setup (once per machine session)
ssh -N -L 8080:localhost:8080 deck@<ip> & # tunnel; survives plugin_loader restarts
node scripts/cdp.mjs targets # list targets, sanity-check the tunnelTargets
| Alias | Target | Use for |
|---|---|---|
bp | gamepad-UI main window ("Steam Big Picture Mode" / localized) | the visible screen: screenshots, DOM clicks, key input |
qam | QuickAccess | Quick Access Menu overlay |
mainmenu | MainMenu | left Steam main menu overlay |
shared / sjc | SharedJSContext | main JS context (no pixels) — webpack/module probing |
Script inventory
node scripts/cdp.mjs targets # list targets with aliases
node scripts/cdp.mjs <target> <probe.js> # Runtime.evaluate a JS file, print its return value
node scripts/cdp-nav.mjs /your-route # navigate the gamepad UI to a route
node scripts/cdp-shot.mjs bp /tmp/ui.png # screenshot a target to PNG
node scripts/cdp-key.mjs bp ArrowDown Enter # dispatch keyDown/keyUp pairs
node scripts/cdp-console.mjs shared 30 # stream console warnings/errors for N seconds
node scripts/cdp.mjs mainmenu scripts/probe-mainmenu.js # example probe: menu patch anchorscdp-lib.mjs is the shared helper (target resolution, sessions, evaluate, screenshot, keys) —
import it to build new drivers.
Writing probes
A probe is an IIFE evaluated in the target page. Return a JSON-serializable value instead of printing from inside the page. Reuse the bundled probes before writing another React-fiber walk.
For read-only webpack inspection, capture the runtime require and search factory sources:
window[Object.keys(window).find((k) => k.startsWith("webpackChunk"))].push([
[Symbol()],
{},
(r) => (req = r),
]);
// Object.entries(req.m).filter(([id, f]) => String(f).includes("SomeConstant"))
// req(id)Calling a plugin backend
Use the loader's WS route in shared:
await DeckyBackend.call("loader/call_plugin_method", "<Plugin Name>", "get_playback");
await DeckyBackend.call("loader/call_plugin_method", "<Plugin Name>", "volume", 0.6);Do not call window.__DECKY_SECRET_INTERNALS_..._deckyLoaderAPIInit.connect(...) for ordinary
probes. Each call replaces that plugin's event-listener map, so its frontend silently stops
receiving decky.emit events. If intentionally simulating a frontend reload, restore ownership
with await DeckyPluginLoader.importPlugin("<Plugin Name>"); this reruns the frontend bundle while
keeping the backend alive.
To prove the UI is live, sample changing text such as playback progress twice. A single DOM read only proves the current tree exists.
Show full SKILL.md (231 more words)Show less
Driving the UI (hard-won rules)
- DOM clicks work for gamepad activation:
el.dispatchEvent(new MouseEvent("click", {bubbles: true}))fires bothonClickand FocusableonActivate. No need for synthetic gamepad input in most flows. - Match by text prefix, not equality — labels often carry count badges
(
textContent.trim().startsWith("Liked")). - Navigation:
cdp-nav.mjsuses the raw Router on purpose;@decky/ui'sNavigationtargets the focused window, which doesn't exist under CDP and lands elsewhere. Re-navigating to the current route does not remount the page — click a tab/home element to reset state. - Screenshot assertions: screenshot
bp, then Read the PNG. For playback/progress checks, take two screenshots a measured interval apart and compare position deltas against wall-clock (rate ≈ 1.0×). For lists, scroll through and assert row count / dedup keys / layout. - After
cdp-nav.mjsthe page needs ~1s to settle before a screenshot is meaningful (the script already sleeps 900 ms).
Pitfalls
- Shell quoting eats probe code — write probes to a file and pass the path; don't inline JS
in
-e-style arguments. pkill -f "8080:localhost"style cleanup can match your own shell's command line and kill it (zsh exit 144) — kill by PID instead.- The visible screen is
bp, notSharedJSContext— screenshots ofsharedare blank. - After a Steam restart (desktop-mode round trip) the
bptarget gets a new id — re-resolve targets instead of reusing an id, or you read a dead window. - Overlay targets (
qam,mainmenu) only render while the overlay is open on-device.
© jinzhongjia, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 9 other files (scripts) in .agents/skills/steam-cdp of jinzhongjia/decky-music.
- SKILL.md
- scripts/cdp-console.mjs
- scripts/cdp-key.mjs
- scripts/cdp-lib.mjs
- scripts/cdp-nav.mjs
- scripts/cdp-shot.mjs
- scripts/cdp.mjs
- scripts/probe-callables.js
- scripts/probe-mainmenu.js
- scripts/probe-menu-items.js
Open the folder on GitHubat commit 152c9c8
Compare with similar skills
Steam Cdp next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Steam Cdp this skilljinzhongjia/decky-music | 122 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Extension Puppeteer Debuggingmengxi-ream/read-frog | 10k | — | ~2k | Automated safety check: Notes | GPL-3.0 | |
| Chrome Devtools MCPmanagedcode/dotnet-skills | 486 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Team Frontend Debugcatlog22/Claude-Code-Workflow | 2.1k | — | ~2.8k | Automated safety check: Notes | MIT | |
| Chrome Cdpaiguicai/MCP-Gateway | 158 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Chrome Devtoolstech-leads-club/agent-skills | 7k | — | ~1.3k | Automated safety check: Pass | MIT |
Similar skills
Chrome Devtools MCP
managedcode/dotnet-skills
Use Chrome DevTools MCP from .NET agents and .NET-focused repos to inspect, debug, and automate Chrome through an MCP client.
Team Frontend Debug
catlog22/Claude-Code-Workflow
Frontend debugging team using Chrome DevTools MCP. An agent skill from catlog22/Claude-Code-Workflow.
Chrome Cdp
aiguicai/MCP-Gateway
Browser automation and debugging through bundled Chrome DevTools Protocol.
Chrome Devtools
tech-leads-club/agent-skills
Browser debugging, performance profiling, and automation via Chrome DevTools MCP.
Obsidian Local Dev Loop
jeremylongshore/tons-of-skills-marketplace
Set up a fast Obsidian plugin development loop with hot reload.
More from jinzhongjia/decky-music
Decky Dev
jinzhongjia/decky-music
Autonomous develop-deploy-debug loop for Steam Deck Decky Loader plugins — sideload deploys, log pulling, CEF/CDP automation of the running Steam UI (navigate, click, screenshot, key input), sleep…
Steamdeck UI Design
jinzhongjia/decky-music
Project-specific Steam Deck Game Mode UI rules for decky-music.
Release
jinzhongjia/decky-music
发布 decky-music 新版本(pre-release 或正式)。当用户说"发版 / 发布新版本 / pre-release / 发 beta"时使用。覆盖版本号、二进制构建、remotebinary 指纹、tag、GitHub Release、CI 出包、zip 抽验，以及正式发布后向 Steam Deck 下载目录交付普通/full/CN 三个安装包的完整流程。
Pending Verify Issue
jinzhongjia/decky-music
把"已提交但尚未真机验证"的改动登记成 GitHub issue,避免未验收当已完成。当改动触碰 AGENTS.md 要求真机验收的运行时/UI 行为,但验证被阻塞(没拿到部署授权、或用户选择先提交后验证)时使用。
Related
Works with
Categories
Questions about Steam Cdp
What does Steam Cdp do?
Drive and inspect the running Steam client UI over the Chrome DevTools Protocol (CEF remote debugging, port 8080) — list targets, evaluate JS probes, navigate routes, click elements, dispatch keys…. Steam Cdp is an agent skill from jinzhongjia/decky-music. Drive and inspect the running Steam client UI over the Chrome DevTools Protocol (CEF remote debugging, port 8080) — list targets, evaluate JS probes, navigate routes, click elements, dispatch keys, capture screenshots, stream console errors.
When should I use Steam Cdp?
Steam Cdp fits situations like: hands-free UI automation and read-only diagnosis of Steams gamepad UI on a Steam Deck (or any Steam with CEF debugging enabled); tasks that involve Browser testing; tasks that involve Debugging.
How do I install Steam Cdp in Claude Code?
Run `npx skills add jinzhongjia/decky-music --skill steam-cdp -a claude-code`. Or copy the skill folder (.agents/skills/steam-cdp in jinzhongjia/decky-music) into .claude/skills/steam-cdp in your project. Claude Code loads it when a task matches its description.
How do I install Steam Cdp in Codex?
Run `npx skills add jinzhongjia/decky-music --skill steam-cdp -a codex`. Or copy the skill folder (.agents/skills/steam-cdp in jinzhongjia/decky-music) into .agents/skills/steam-cdp in your project. Codex loads it when a task matches its description.
Can I use Steam Cdp in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jinzhongjia/decky-music --skill steam-cdp -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/steam-cdp, .gemini/skills/steam-cdp, .github/skills/steam-cdp and .opencode/skills/steam-cdp in your project.
What does Steam Cdp need to run?
Going by SKILL.md and its folder, Steam Cdp needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and ssh). Our summary lists: Node.js.
Does Steam Cdp access the network?
SKILL.md contains no URLs. Its commands use ssh, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Steam Cdp safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Steam Cdp use?
Steam Cdp is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Steam Cdp use?
About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Steam Cdp?
Skills that share tags, products or a category with Steam Cdp: Extension Puppeteer Debugging (mengxi-ream/read-frog, 10k stars), Chrome Devtools MCP (managedcode/dotnet-skills, 486 stars), Team Frontend Debug (catlog22/Claude-Code-Workflow, 2.1k stars) and Chrome Cdp (aiguicai/MCP-Gateway, 158 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Steam Cdp?
jinzhongjia (a GitHub user) maintains it in jinzhongjia/decky-music, which has 122 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 10, 2026.
Source: jinzhongjia/decky-music on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.