slide-audit

Measure slide element bounds and capture PNG screenshots to detect layout bugs in HTML decks.

30|1|Updated Apr 15, 2026

Search Tags:#playwright #layout verification #html presentation #screenshot rendering #overflow detection #slide audit

Ready to run

npx skills add https://github.com/s-choung/Research-Skills --skill slide-audit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slide-audit
Source: https://github.com/s-choung/Research-Skills/tree/main/skills/slide-audit
Command: npx skills add https://github.com/s-choung/Research-Skills --skill slide-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes assets (resource) components.

What problem does it solve?

This Skill helps you verify HTML slide decks for layout defects that are hard to catch reliably by eye, such as overlapping text, clipped content, and elements escaping the canvas.

Core Features & Use Cases

Deterministic rect checks: Measures slide and content bounding boxes to detect overflow and structural layout problems.
Visual screenshot audit: Renders each slide to PNG and reviews the images for overlap, clipping, and presentation issues.
Use case: Use it when a deck looks suspicious in review and you need a fast, repeatable way to confirm whether the problem is structural or purely visual.

Quick Start

Ask the skill to inspect an HTML slide deck for overlap and clipping issues, then run the rect diagnostic before reviewing the rendered slide screenshots.

Frequently Asked Questions about slide-audit

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

FAQPage Schema

How do I detect text overflow and clipping in HTML presentation slides?▼

Checking HTML slide deck layout involves measuring element bounding boxes to detect overflow and structural problems. It renders each slide to a PNG screenshot for visual review to confirm whether issues are structural or purely visual.

Can I use Playwright to automate screenshot rendering for slide deck QA?▼

Playwright is required to automate screenshot rendering for slide deck QA. It toggles active slides, captures per-slide PNGs, and reports overflow against slide content and canvas boundaries to catch presentation layout bugs.

What is the best way to check for overlapping elements in a 1920x1080 HTML deck?▼

Deterministic rect checks are the best way to check for overlapping elements in a 1920x1080 HTML deck. This method measures slide and content bounding boxes to reliably detect overflow, overlap, and elements escaping the canvas.

Does this slide audit tool work with any HTML presentation framework?▼

This slide audit tool is designed for center-anchored 1920x1080 HTML decks. It requires Playwright to toggle active slides and measure element bounds, making it suited for presentation debugging and deck QA within this specific format.

Why does my HTML slide content escape the canvas boundaries during presentation debugging?▼

HTML slide content escapes canvas boundaries due to structural layout defects like overflow. Running a rect diagnostic measures element bounds against the 1920x1080 canvas to confirm whether the presentation problem is structural or purely visual.