skills.rest
cxnaive
cxnaiveCOMMUNITY
Explore all skills by this author →
GitHub

inspecting-hermes-desktop-dom

Inspect the live Chromium DOM and computed styles of the Hermes desktop application via CDP.

Updated Jun 17, 2026
Search Tags:#debugging#electron#cdp#dom#ui-verification#hermes
One-click install
npx skills add https://github.com/cxnaive/hermes-agent-llbot --skill inspecting-hermes-desktop-dom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inspecting-hermes-desktop-dom
Source: https://github.com/cxnaive/hermes-agent-llbot/tree/main/skills/software-development/inspecting-hermes-desktop-dom
Command: npx skills add https://github.com/cxnaive/hermes-agent-llbot --skill inspecting-hermes-desktop-dom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill resolves the ambiguity of UI development by allowing you to inspect the live rendered DOM, computed styles, and geometry of the Hermes desktop application directly, rather than guessing based on source code.

Core Features & Use Cases

  • Live DOM Inspection: Query the actual rendered state of the application to verify CSS rules, element visibility, and computed design tokens.
  • Debugging UI Logic: Identify which CSS rules are winning and why, or locate stable selectors for components without manual trial and error.
  • Use Case: When a UI component appears misaligned, use this skill to extract the computed padding and parent class hierarchy to determine if an inherited style is overriding your local utility classes.

Quick Start

Use the inspecting-hermes-desktop-dom skill to evaluate the computed radius property of the root element in the running desktop application.

Frequently Asked Questions about inspecting-hermes-desktop-dom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect the live DOM and computed styles of an Electron desktop application?▼

You can debug misaligned UI components by querying the live DOM via CDP to extract computed padding, identify winning CSS rules, and locate stable selectors without guessing from source code.

Do I need a dev-server to use CDP for UI debugging on a desktop application?▼

Yes, you need an active dev-server or an isolated Electron instance with a reachable CDP port to execute CDP evaluation scripts and inspect the live rendered DOM and computed styles.

How does querying computed styles via CDP help with UI verification?▼

Querying computed styles via CDP helps UI verification by exposing the actual rendered state of the application, allowing you to verify element visibility, check inherited styles overriding local utility classes, and confirm computed design tokens.

What's the best way to find stable selectors for components without manual trial and error?▼

The best way to find stable selectors without manual trial and error is to evaluate the live Chromium DOM hierarchy through CDP, allowing precise selector verification and targeted style analysis for desktop interface components.

Why does a CSS rule appear to win over my local utility classes in the Hermes desktop UI?▼

A CSS rule wins over local utility classes when an inherited style overrides them; you can identify the exact cause by using CDP to inspect the live DOM and extract the parent class hierarchy and computed style properties.

Related Skills

Explore More Software Engineering Skills→
icyzhicyzh
1

inspecting-hermes-desktop-dom

Inspect live DOM nodes and computed styles via Chrome DevTools Protocol.

Community
Advanced
Emz1998Emz1998
1

coding-with-tailiwnd

Create Tailwind CSS v4 components with @apply and @layer directives.

Community
Basic
dvdsgldvdsgl
54

imessage

Read and send iMessages via sqlite3 and AppleScript on macOS.

Community
Advanced
matthew-johnsonmatthew-johnson

node-inspect-debugger

Debug Node.js applications via the built-in inspector and Chrome DevTools Protocol.

Community
Advanced