layout-inspecting
Layout Inspecting
Runs a headless Playwright browser against a URL and walks the DOM to produce a compact JSON tree that mirrors what the human eye sees as distinct visual "boxes" — regions differentiated by background or border color changes.
How It Works
- Document is the root node; its color is the page canvas background.
- A child node is included if its
background-coloror visibleborder-*-colordiffers from its parent's effective background. - Nodes that are not visually distinct are skipped; their interesting descendants bubble up.
- Each node includes:
label,tag,rect(x/y/width/height in px),background, optionalborder, optionaltextsnippet, and nestedchildren.
Usage
Run inspect_layout.js using the skill's absolute path. No manual install needed — playwright and Chromium are downloaded automatically into the skill's own directory on first run.
node <path-to-skill>/scripts/inspect_layout.js <url> [options]
More from emeraldwalk/skills
task-tracking
Task management and tracking for agents. Use this skill whenever you need to create, update, claim, or retrieve tasks for agent workflows. This skill is triggered for any request involving task lists, task assignment, or status updates.
14golang-coding
Scaffolds a Go project with multi-architecture build scripts and a universal entry-point loader. Use when bootstrapping a new Go CLI tool or service, setting up a Go project structure, or creating cross-platform Go binaries.
3docs-reading
Parses technical documentation corpora (Markdown or Godot XML) into a local SQLite database with full-text and semantic search, then queries them via a CLI tool. Use when an agent needs to read, search, or reference documentation for a library, framework, or engine — especially large docs that would exceed context limits.
2