Does it work with modern JavaScript frameworks and SPAs?

Yes, it utilizes Puppeteer's networkidle2 condition and includes a built-in delay to ensure that dynamic content, CSS animations, and layout shifts have settled before analysis begins.

Can it filter out navigation menus and footers?

Yes, the skill includes specific exclusion rules that filter out non-content elements like NAV, HEADER, and FOOTER tags, as well as fixed or sticky UI elements.

How are the generated CSS selectors kept stable?

The skill follows a strict priority order for selector generation, preferring unique IDs and specific class combinations over brittle paths like nth-of-type, ensuring they remain valid even if the page content updates.

How does Block Detector identify page sections?

It uses a tiered strategy that first checks for semantic HTML elements, then scans for common class patterns, looks for CMS-specific data attributes, and finally falls back to layout-based heuristics.

What kind of metadata does the skill extract for each block?

For every detected block, it captures the visual bounding box, CSS selector, HTML snippets, text content, and boolean flags for headings, images, and links.

Web Block Detector

Name: Web Block Detector
Author: paolomoz

bypaolomoz

•

브라우저 자동화

Analyzes and catalogs discrete content blocks on web pages using Puppeteer browser automation and semantic heuristics.

The Web Block Detector skill automates the process of reverse-engineering web page layouts by identifying functional UI sections such as hero banners, feature grids, and call-to-action blocks. By leveraging Puppeteer for headless browser analysis and applying a multi-layered detection strategy, it captures precise bounding box coordinates, generates stable CSS selectors, and extracts semantic metadata. This tool is purpose-built for developers and designers who need to map page architectures for design system creation, content migration, or automated layout analysis.

주요 기능

01Automated deduplication and noise filtering to isolate meaningful content units from UI chrome.

02Stable CSS selector generation using a 6-tier priority hierarchy (ID, unique classes, data-attributes).

03Semantic block-type inference for categorizing sections like 'hero', 'features', and 'testimonials'.

04Visual coordinate mapping with precise bounding box capture (x, y, width, height).

052 GitHub stars

06Multi-strategy detection using semantic HTML, class patterns, and CMS-specific data attributes.

사용 사례

01Cataloging page structures to feed into design system extractors and pattern libraries.

02Automating content migration by identifying and targeting specific page regions for extraction.

03Reverse-engineering competitor layouts to analyze information architecture and UX patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add paolomoz/skills block-detector

For use in Claude.ai and ChatGPT