Menu
Auto-measures HTML slides with Playwright to extract pixel coordinates, fonts, and colors for PDF generation. Downloads required TTF fonts. Responds to "measure layout", "prep for PDF", "extract coordinates" . Stages 9-10 of the lecture workflow.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Runs the full project sync pipeline — lifecycle update, audit, L0→L1 publish, commit, push, and PR creation.
Runs the full project sync pipeline — lifecycle update, audit, L0→L1 publish, commit, push, and PR creation.
Turn a topic or your own materials into a single self-contained, interactive HTML report — top tabs, clickable reference drawers, dense tables, comparison heatmaps, inline SVG, in-page search, a light/dark theme toggle, and multilingual support. Use when: user says "/explain-me", "/reportme", "make a report", "create report", "explain this topic". Inspired by beret21/reportme.
Document Production Workflow for co-deck — generates searchable, themed handbooks as static sites (GitHub Pages). Three modes: standalone handbook, lecture companion (reads co-deck slide_deck.md), full course site. Responds to "make handbook", "create handbook", "build course site", "companion handbook" (triggered by Korean phrases too). H-Stage pipeline (H-0 through H-7). Independent from the 11-Stage slide pipeline.
Turn a topic or your own materials into a single self-contained, interactive HTML report — top tabs, clickable reference drawers, dense tables, comparison heatmaps, inline SVG, in-page search, a light/dark theme toggle, and multilingual support. Use when: user says "/explain-me", "/reportme", "make a report", "create report", "explain this topic". Inspired by beret21/reportme.
Pre-edit fact-forcing quality gate. Ensures agents investigate a file's importers, schemas, and scope constraints before making changes. Part of the 3-layer enforcement model (Hook → Prompt → Skill).
| name | measure |
| scope | co-deck |
| version | 1.3.0 |
| description | Auto-measures HTML slides with Playwright to extract pixel coordinates, fonts, and colors for PDF generation. Downloads required TTF fonts. Responds to "measure layout", "prep for PDF", "extract coordinates" . Stages 9-10 of the lecture workflow. |
| status | active |
| owner | measure |
| last_reviewed | "2026-06-20T00:00:00.000Z" |
| prerequisites | html-build |
Auto-extracts pixel-level coordinates, fonts, and colors from the HTML slides using Playwright, producing layout_spec.json and pdf_layout_spec.md consumed by the PDF export scripts. Also downloads TTF font files required for PDF generation. Invoked at Stages 9-10, after Gate 4 (Build → Measure).
Prerequisites:
# Playwright is an optionalDependency — install separately if not present:
bun add playwright
bunx playwright install chromium
Run:
bun scripts/co-deck/measure-layout.ts "path/to/lecture_slide.html"
measure-layout.ts automatically:
getBoundingClientRect() on key elements via JavaScriptgetComputedStyle()layout_spec.json and pdf_layout_spec.mdMeasured items:
| Item | Method |
|---|---|
| Slide total size | .slide element rect |
| Card area | .slide-card or .slide-content rect |
| Header bar | .slide-header rect |
| Section label | .section-label rect + fontSize |
| Slide title | .slide-title rect + fontSize + color |
| Bullet area | .bullets-container rect |
| Right visual panel | .visual-panel rect |
| Divider part number | .part-number rect + fontSize |
| Divider title | .divider-title rect + fontSize |
Baseline slides measured:
isTitleSlide: trueisDividerSlide: trueSecure TTF files for the web fonts used in the HTML. PDF generation requires local TTFs.
bun scripts/co-deck/download-font.ts <font_name> [output_dir]
| Font name arg | Font |
|---|---|
maruburi | MaruBuri (Naver, serif) |
notosanskr | Noto Sans KR (Google) |
nanumsquareneo | NanumSquare Neo (Naver, sans-serif) |
pretendard | Pretendard (open source, sans-serif) |
TTF files are saved to presentations/assets/fonts/.
After measurement: share pdf_layout_spec.md with the user to confirm measurements match the actual HTML. Cross-check any oddities against the saved screenshots.
presentations/<project>/layout_spec.json — machine-readable pixel coordinates for PDF scriptspresentations/<project>/pdf_layout_spec.md — human-readable measurement report with screenshotspresentations/assets/fonts/<FontName>-Regular.ttf / presentations/assets/fonts/<FontName>-Bold.ttf — downloaded font fileshtml-build — produces the HTML file measured by this skillpdf-export — consumes layout_spec.json and the TTF fontsversion — snapshot layout_spec.json + pdf_layout_spec.md together when HTML layout changes