Skip to main content
skill CX Codex

visual-audit — Claude Code skill: what it does, how to install

Runs layout audits on Quarto and Beamer decks to detect overflow, font clashes, and box fatigue before you present.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a claude-code
Open on GitHub

What visual-audit does

This skill catches layout flaws in Quarto (.qmd) and Beamer (.tex) presentations. For Quarto projects, it renders HTML output and runs scripts/slide-qa.py using headless Chrome. The tool measures pixel overflow past edges and flags broken assets or casing errors in local image paths. When handling Beamer, it compiles the deck and inspects the log for overfull hbox warnings.

The review identifies inline font overrides, missing negative margins, and colored box fatigue, where having three or more boxes on a single slide breaks deck rules. To resolve density problems, it enforces a spacing-first hierarchy: reduce vertical margins, condense lists, and inline formulas before touching typography. Font sizes must never drop below 0.85em.

Editing tools Edit and MultiEdit are disallowed. The skill creates an issue report per slide instead of applying automatic code patches directly.

What it helps with

  • detect text and elements overflowing slide boundaries
  • spot broken asset links and letter-case errors in paths
  • flag excessive colored boxes and font size overrides
  • apply spacing-first recommendations to dense slides

Example prompts for the agent

  • Audit the visual layout of Quarto/presentation.qmd
  • Check if elements overflow in slides.tex
  • Run a visual audit on lecture.qmd

How to install visual-audit

1Skills CLI (Vercel)

npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a claude-code

2Manually: put the files in place

~/.claude/skills/visual-audit/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/visual-audit/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about visual-audit

How to install visual-audit in Claude Code?

Run npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a claude-code in your terminal.

What does visual-audit check?

It evaluates slide borders, font inconsistencies, excessive colored containers, and missing image files. It does not critique writing style or pedagogy.

What happens if Playwright is missing?

The helper script scripts/slide-qa.py exits with status 2. Claude prints the necessary environment setup commands and falls back to inspecting raw HTML and screenshots.

Source text

SKILL.md · MIT
---
name: visual-audit
description: Adversarial visual-layout audit of a Quarto `.qmd` or Beamer `.tex` deck. Flags overflow, font inconsistency, box fatigue, spacing, and alignment issues. Use when user says "visual audit", "check the layout", "does this overflow?", "look for visual issues", "audit the slides", or after reworking a deck's appearance. Does NOT check writing or pedagogy — pair with `/proofread` or `/pedagogy-review`.
argument-hint: "[QMD or TEX filename]"
allowed-tools: ["Read", "Grep", "Glob", "Write", "Bash"]
disallowed-tools: ["Edit", "MultiEdit"]
---

# Visual Audit of Slide Deck

Perform a thorough visual layout audit of a slide deck.

## Steps

1. **Read the slide file** specified in `$ARGUMENTS`

2. **For Quarto (.qmd) files:**
   - Render with `quarto render Quarto/$ARGUMENTS`
   - Measure the render: `"${SLIDE_QA_PYTHON:-python3}" scripts/slide-qa.py Quarto/<deck>.html`. It loads the deck in headless Chrome with every fragment shown and writes `quality_reports/audits/slide-qa/<deck>/report.md` — per-slide pixels past each edge, the offending element, content hidden inside scrolling elements — plus one screenshot per slide, and broken images or local files whose path is missing or in the wrong letter case (these break on GitHub Pages). OVERFLOW findings come from this report, and a broken or wrong-case asset is a finding too; Read the screenshots of flagged and dense slides for the other checks.
   - If it exits 2 (usually Playwright is missing — the script prints the one-time venv install and the `SLIDE_QA_PYTHON` line to set), say so, fall back to reading the rendered HTML of the dense slides and any screenshot the user supplies, and name the slides the user should eyeball

3. **For Beamer (.tex) files:**
   - Compile (see `/compile-latex`), check the log for overfull hbox warnings, and Read the PDF pages that carry figures or dense content

4. **Audit every slide for:**

   **OVERFLOW:** Content exceeding slide boundaries
   **FONT CONSISTENCY:** Inline font-size overrides, inconsistent sizes
   **BOX FATIGUE:** 3+ colored boxes on one slide (INV-7 allows two), wrong box types
   **SPACING:** Missing negative margins, missing fig-align
   **LAYOUT:** Missing transitions, missing framing sentences, semantic colors

5. **Produce a report** organized by slide with severity and recommendations

6. **Follow the spacing-first principle:**
   1. Reduce vertical spacing with negative margins
   2. Consolidate lists
   3. Move displayed equations inline
   4. Reduce image/SVG size
   5. Last resort: font size reduction (never below 0.85em)

© pedrohcgs · MIT · pedrohcgs/claude-code-my-workflow

Similar skills

All skills for Testing and QA →

From the same set56

verify-claims Checks factual statements in a draft through an independent verification pass. Use it for citations, figures, dataset claims, and research references. CX Codex +1 ★ 1,671repo stars validate-bib Cross-references lecture citations against bibliography files. Catches missing keys, duplicate entries, and metadata mismatches. CX Codex +1 ★ 1,671repo stars vaccinate Tests whether a reviewer or automated check catches the defects it is meant to find. Use it before trusting a review gate for a release or another consequential decision. CX Codex +1 ★ 1,671repo stars triage-inbox Sorts academic mail and calendar events through MCP into buckets, then proposes one gated action per thread. It never sends or accepts anything. CX Codex +1 ★ 1,671repo stars translate-to-quarto Converts Beamer LaTeX slides into Quarto RevealJS presentations inside Quarto/. Useful when preparing academic decks for online publication without rewriting math. CX Codex +1 ★ 1,671repo stars teach-from-paper Turn a single research paper into a lecture plan, slide outline, discussion prompts, and an exercise brief. Use it when you need to teach the paper to a defined audience. CX Codex +1 ★ 1,671repo stars syllabus Turns a topic or reading list into a teachable syllabus: description, weekly schedule, objectives, assessment and policies. Built for instructors. CX Codex +1 ★ 1,671repo stars submission-disclosures Drafts four mandatory journal submission disclosures covering AI usage, CRediT contributor roles, conflict of interest, and data availability. CX Codex +1 ★ 1,671repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor