What problem does it solve? When developing the Hermes desktop app, inferring UI behavior from .tsx source files leads to wrong guesses about which CSS rule actually won, whether an element rendered, or what a computed value really is. This Skill lets you read the live rendered DOM of the running app over the Chrome DevTools Protocol (CDP) so you answer factual UI questions directly instead of editing call sites blindly. ## Core Features & Use Cases - Live DOM and computed style reading: Connect to the dev server's CDP port on 127.0.0.1:9222 and evaluate expressions against the real renderer to get computed styles, geometry, and console output. - Winning-rule diagnosis: Determine which CSS rule actually applied to a node, including inherited values and plugin stylesheet overrides (e.g. @tailwindcss/typography), before changing any code. - Stable selector hooks: Use the shared SELECTORS data-slot map in scripts/perf/lib/cdp.mjs instead of inventing fragile querySelector strings. - Isolated probe instances: Launch your own Electron instance with a separate HERMES_HOME, user-data-dir, and CDP port so you never disturb the user's running session. - Use Case: A style change "isn't applying" in the running app. You connect over CDP, read the node's computed font-weight and ancestor classes, discover a prose plugin rule is winning, and override it on the shared class instead of sweeping every call site. ## Quick Start Ask the agent to check the computed style of a specific element in the running Hermes desktop app, for example: "Check whether the composer element rendered and what its computed border radius is in the live desktop app."
