agentsclimarketplace

Slide whitespace audit

Skill tsaijamey/slide-whitespace-audit/skills/slide-whitespace-audit

Audit fixed-viewport HTML slides for excessive whitespace by rasterizing visible content onto a grid and computing coverage ratio

Install
npx -y skills add tsaijamey/slide-whitespace-audit --skill slide-whitespace-audit

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

This skill should be used when auditing slide HTML files (1280x720 or other fixed-viewport layouts) for the common design anti-pattern of excessive whitespace and insufficient information density. It computes a quantitative whiteRatio by rasterizing all visible content elements (text nodes, images, SVGs, canvases, videos) onto a coarse grid and calculating the uncovered fraction of the viewport. Use after an LLM or sub-agent generates slide HTML to catch under-filled layouts before review. Trigger phrases: whitespace audit, slide design audit, coverage ratio, information density check, slide layout review, check slide for empty space, audit my slides, slide HTML coverage analysis, design density check, layout density audit.

The file declares its own license as AGPL-3.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

6.0 KB, ~1.3k tokens by cl100k_base, as published. Nobody here has run it

Overview

This skill quantifies whitespace in fixed-viewport HTML slides (default 1280x720) by rasterizing visible content elements onto a coarse grid and computing the uncovered fraction. It catches the common LLM/sub-agent failure mode where generated slide HTML has sparse content collapsed to the top of the viewport with a large empty area below — a problem the generating agent cannot self-detect because it reasons about content hierarchy, not viewport pixel occupancy.

When to invoke

  • After a sub-agent writes a slide HTML file.
  • Batch auditing a deck for under-filled slides before review.
  • Investigating a user complaint of "too much empty space" on a slide.

Do NOT use for free-flowing pages (blog posts, docs) — this skill assumes a fixed viewport.

Steps

  1. Render the slide in a fixed viewport. Open the slide HTML in an iframe sized 1280x720 (or whatever the deck's design viewport is). If the slide is already running inside a deck viewer, locate the iframe element (commonly #main-frame).

  2. Inside the slide's window/document, enumerate candidate content elements. A content element is one of: (a) a leaf element whose direct child text node has non-empty trimmed text, or (b) an <img>, <svg>, <video>, <canvas>, or any element with a non-empty background-image computed style.

  3. Filter out invisible elements. Skip elements with opacity: 0, visibility: hidden, display: none, getBoundingClientRect().width < 1, or rects fully outside the viewport. Also skip elements whose computed pointer-events: none AND opacity < 0.05 (decorative overlays).

  4. Rasterize onto a 100x56 grid (covers 1280x720 at ~12.8x12.8 per cell — fine enough to detect gaps, coarse enough to be cheap). For each surviving element's getBoundingClientRect, mark every grid cell whose center falls inside the rect as covered. Use a Uint8Array(100*56) for the bitmap.

  5. Compute the ratios. cover = (sum of marked cells) / (100*56). whiteRatio = 1 - cover. Also report the count of content boxes contributing.

  6. Apply thresholds:

    • whiteRatio < 0.50: healthy density, no action.
    • 0.50 <= whiteRatio < 0.60: borderline, flag for review.
    • 0.60 <= whiteRatio < 0.80: over-sparse, recommend filling with stat cards, impact rows, secondary data, or by enlarging existing typography.
    • whiteRatio >= 0.80: either deliberately sparse (hero slides, quote slides, formula spotlights) or broken layout. Cross-check with slide intent before flagging.
    • whiteRatio = 0.000: algorithm fooled by a full-viewport background element (e.g., a wrapper with background-image covering everything). Add the wrapper to an exclusion list and re-run.

  7. Report a sortable table: idx | slide_id | white | cover | boxes. For multi-slide audits, sort descending by white so the worst offenders surface first.

Repair patterns

When whiteRatio is too high and the slide isn't deliberately sparse, prefer these fixes in order of cost:

  1. Enlarge existing typography. If a timeline has 4 events using font-size: 0.92vw and the column has 70% empty space below, double the font sizes and add justify-content: space-between to the flex container. This is free — no new content needed.
  2. Add stat cells / metric pills. Insert a 2-3 column micro-grid of <big number> <label> between existing sections. Each cell takes ~6-10% of viewport.
  3. Add impact rows. A horizontal strip of <icon> <label> <value> triples between the headline and the footer.
  4. Add a footer callout. A full-width strip at the bottom with a quote, formula, or summary number.

Anti-patterns

  • Do NOT "fix" sparse slides that are deliberately sparse (hero, quote, formula spotlight). Cross-check with slide intent first.
  • Do NOT inflate font sizes past readability just to push down whiteRatio.
  • Do NOT count purely decorative SVG backgrounds as content — they technically cover pixels but don't deliver information density.
  • Do NOT rerun the audit immediately after a CSS change without forcing the browser to repaint and any entry animations to complete (gsap.globalTimeline.totalTime(huge_number) to force end state).

Output format

Return a single object per slide: { slide_id, whiteRatio, coverRatio, contentBoxes, threshold_band, suggested_repairs[] }. For batch runs, return an array sorted by whiteRatio descending.

Example runners

The algorithm above is viewer-agnostic. The examples/ directory ships shell drivers for specific deck viewers — copy/adapt the closest one rather than re-deriving:

ViewerScriptNotes
frago knowledge_slides workflowexamples/audit-deck-frago-knowledge-slides.shRequires frago CLI in PATH. Drives the viewer's .thumb-item thumbnail strip and audits the active #main-frame iframe. Pass the deck data_dir as the first argument.

Each example pins its viewer's DOM contract (selectors, iframe id) inline — they are intentionally not parameterized, because a different viewer needs a different example, not a generic switch.

About

Generated by frago — An Agent OS that turns ad-hoc agent runs into reusable recipes.

Install: uv tool install frago-cli Homepage: https://frago.ai · Docs: https://docs.frago.ai

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.