Menú
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.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| 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 changesRuns 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).