メニュー
Visually inspect individual Slidev slides for overflow, missing progress dots, and color inconsistency. Uses a live slidev dev server and Playwright screenshots for fast edit/verify loops — no full build required.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Review an exec-talk's README and produce an exec.recipe.yml. Uses a 3-agent collaborative council to analyze section weighting, executive audience fit, narrative arc, and action clarity. Always overwrites any existing recipe. Triggers: "review the talk", "create the recipe", "is this landing for execs", "section weighting", "coverage gap", "recipe", "executive framing".
Review a tech-talk's README and produce a deck.recipe.yml. Uses a 3-agent collaborative council to analyze section weighting, narrative arc, and coverage gaps. Always overwrites any existing recipe. Triggers: "review the talk", "create the recipe", "is this the best use of our time", "section weighting", "coverage gap", "recipe".
Read from and write to the Workbench project memory store. Use when starting complex content work (query for prior context) or finishing a session that changed content (record drawer entries). Never invoke during agent pre-flight gates.
Add persona-grounded audience framing to a tech-talk. Selects 2–3 relevant personas, adds a "Who This Hits" box and up to 3 reaction lines to the README, and adds persona speaker notes to the slide deck. Triggers: "add personas", "who this hits", "persona reactions", "audience framing".
Use this skill when asked to verify, validate, fact-check, or review any data entry, lore fact, character bio, episode record, quote, or show content for accuracy against canonical project sources and the live database. Triggers on: check data, verify data, fact-check, accuracy check, data accuracy, check entry, verify entry, review accuracy, is this accurate, canon check, lore check, check this data, verify this, review this entry, check for errors, validate data, is this right, is this canon.
Use this skill when asked to verify, validate, or fact-check a lore entry, character description, seed data record, or any Breaking Bad content against the canonical reference in docs/breaking-bad-universe.md. Triggers on: check lore, verify lore, fact-check, canon check, lore accuracy, is this correct, seed data accuracy.
| name | inspect-slide |
| description | Visually inspect individual Slidev slides for overflow, missing progress dots, and color inconsistency. Uses a live slidev dev server and Playwright screenshots for fast edit/verify loops — no full build required. |
| infer | true |
| triggers | ["inspect slide","review slide","check slide","slide overflow","slide review","inspect deck","review deck"] |
Use this skill whenever you need to visually inspect, diagnose, or fix issues in a Slidev slide deck. It drives a live slidev dev session via Playwright screenshots, enabling a tight edit → view → fix loop without a full build.
Invoke automatically when:
The harness starts slidev dev automatically if it's not already running. No manual setup needed — just call inspect or scan and it handles everything.
cd slides
node scripts/inspect-slide.js <deck-slug> <slide-number>
The command outputs:
slides/.harness/<deck>-<N>.pngAfter running inspect, use the view tool on the screenshot path from the JSON report:
view: slides/.harness/<deck>-<N>.png
Visual inspection catches issues that DOM analysis can't (cramped layout, visual imbalance, structural munges).
| Field | Meaning | Action |
|---|---|---|
wrongDeck: true | Slidev dev is serving a different deck | Run start <deck-slug> to launch the correct deck |
overflow: true | Content bleeds below slide boundary | Tighten p-*, mb-*, gap-*; convert stacked to grid if needed |
missingDots: true | Part 2/3/4 slide lacks progress dots | Add w-2 h-2 rounded-full dot row in the pill breadcrumb |
colorInconsistent: true | Slide's pill from-* color ≠ section reference | Change pill gradient to match colorExpected |
| All false | No detected issues | Confirm visually from screenshot; mark slide done |
Make targeted changes to the slide in the source .md file. Do NOT restart slidev dev.
After saving the file, wait ~1.5 seconds for Slidev's hot reload to apply the change.
node scripts/inspect-slide.js <deck-slug> <slide-number>
View the new screenshot. Confirm the issue is resolved before moving to the next slide.
p-5 → p-3 mb-4 → mb-2 gap-6 → gap-4
space-y-3 → space-y-1 py-2 → py-1 (table rows) p-3 → p-2 (code blocks)
If two rounds of tightening don't fix it → convert stacked cards to grid grid-cols-2 gap-3.
Add to the pill breadcrumb row (inside the flex items-center gap-3 div):
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-white/20"></div> <!-- inactive -->
<div class="w-2 h-2 rounded-full bg-{accent}-400 shadow-lg shadow-{accent}-500/50"></div> <!-- active -->
<span class="text-white/40 text-xs ml-1">N of M</span>
</div>
After adding dots to a new slide, update ALL earlier slides in the section to reflect the new M total.
Change the pill gradient's from-* and to-* classes to match colorExpected from the report.
Also update: background gradient, divider line color, active dot color.
node scripts/inspect-slide.js start <correct-deck-slug>
This starts a new slidev dev for the correct deck on port 3030.
If you need both decks simultaneously, use --port 3031 for the second one.
Slide N = the Nth <!-- SLIDE: --> comment in the file (1-indexed).
The JSON report includes name (from the comment) and totalSlides.
To find a slide by name:
Select-String -Path slides/tech-talks/<deck>.md -Pattern "<!-- SLIDE:" | Select-Object LineNumber, Line
slides/.harness/ which is gitignored — they are ephemeralslides/.harness/slidev.pid for referenceslides/node_modules — no install needed