visual-audit — скилл для Claude Code: что делает и как установить
Ищет переполнение слайдов, шрифтовой разнобой и лишние плашки в Quarto и Beamer. Помогает проверить вёрстку презентаций до показа аудитории.
npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a claude-codeЧто делает visual-audit
Скилл находит визуальные огрехи в презентациях Quarto (.qmd) и Beamer (.tex). Для Quarto агент рендерит проект в HTML и запускает scripts/slide-qa.py в headless Chrome. Скрипт измеряет пиксели за пределами слайда, фиксирует скрытый в скролле контент и находит картинки с неверным регистром в путях. Для Beamer агент компилирует документ и ищет предупреждения overfull hbox в логах.
Проверка следит за шрифтовыми переопределениями, избытком цветных рамок (правило INV-7 запрещает ставить больше двух на слайд) и нехваткой отрицательных отступов. При исправлении замечаний скилл соблюдает принцип spacing-first: сначала сокращает интервалы, упаковывает списки и переносит формулы внутрь строк. Менять размер шрифта разрешено только в крайнем случае, причём не ниже 0.85em.
Инструменты редактирования Edit и MultiEdit заблокированы. Агент формирует отчёт с оценкой критичности по каждому слайду, но не правит исходные файлы самостоятельно.
Какие задачи решает
- найти вылезающие за границы слайда элементы
- выявить битые ссылки на картинки и неверный регистр путей
- отследить шрифтовой разнобой и перегруз цветными блоками
- выстроить плотность слайда по правилу spacing-first
Примеры запросов агенту
- Проверь вёрстку слайдов в
Quarto/presentation.qmd - Посмотри, нет ли вылезающего контента в
slides.tex - Сделай визуальный аудит презентации
lecture.qmd
Как установить visual-audit
1Через Skills CLI (Vercel)
npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a claude-code2Вручную: положить файлы
~/.claude/skills/visual-audit/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/visual-audit/
1Через Skills CLI (Vercel)
npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a codex2Вручную: положить файлы
.agents/skills/visual-audit/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a cursor2Вручную: положить файлы
.cursor/skills/visual-audit/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pedrohcgs/claude-code-my-workflow visual-audit2Вручную: положить файлы
.github/skills/visual-audit/SKILL.md1Через Skills CLI (Vercel)
npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a gemini-cli2Командой платформы
gemini skills install https://github.com/pedrohcgs/claude-code-my-workflow --path .claude/skills/visual-auditВручную: положить файлы
.devin/skills/visual-audit/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о visual-audit
Как установить visual-audit в Claude Code?
Выполните команду npx skills add pedrohcgs/claude-code-my-workflow --skill visual-audit -a claude-code в терминале проекта.
Что проверяет скилл visual-audit?
Он ищет переполнение границ слайдов, несогласованные размеры шрифта, избыточные цветные рамки и сломанные пути к медиафайлам. Смысловую часть и грамотность текста скилл намеренно игнорирует.
Что произойдёт, если в системе нет Playwright?
Скрипт scripts/slide-qa.py завершит работу с кодом 2. Агент покажет инструкцию по установке виртуального окружения и переключится на ручной анализ готового HTML.
Исходный текст
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