What problem does it solve? When developing the Hermes Electron desktop app, guessing why a style did not apply or whether a UI change took effect wastes time. This Skill reads the live rendered DOM of the running app over the Chrome DevTools Protocol, answering factual questions about computed styles, winning CSS rules, element geometry, and renderer console output. ## Core Features & Use Cases - Live DOM Inspection: Connect to the CDP port on 127.0.0.1:9222 and evaluate JavaScript against the real renderer to read computed styles, class inheritance, and element presence. - Winning-Rule Diagnosis: Walk a node's class chain and ancestors to determine whether a value is inherited or set by a plugin stylesheet, so you fix the right rule instead of sweeping call sites. - Isolated Probe Instance: Launch a separate Electron instance with its own user-data dir, HERMES_HOME, and CDP port so you never disturb the user's running session. - Use Case: A link inside an assistant message renders with the wrong font weight. Use the shared CDP client to read the node's computed style and ancestor classes, discover that @tailwindcss/typography's prose rule beats the utility class, and override it on the shared class. ## Quick Start Ask the agent to check the computed style of a specific element in the running Hermes desktop app using the CDP port on 127.0.0.1:9222.
