Frontend Slides

Upstream and mine

The history makes the split exact. The first commit, f006ef4, is the import of zarazhangrui/frontend-slides. Every later commit except one Dependabot bump is mine.

REFERENCES.md records both fork points. LICENSE keeps the original MIT notice and adds a second line for my changes.

Measuring the stage

Every deck clips its stage with overflow: hidden, so text pushed past the frame disappears without a trace. scripts/check-slides.mjs measures geometry instead of pixels. It serves the deck folder over a local HTTP server and opens Chromium through Playwright at 1920 by 1080. It waits for fonts plus 600 ms, since a font swap changes text width. For each .slide it hides the others, removes the .deck-stage scale and forces reveal animations to their end state. A visible element holding text or media that crosses the frame by more than 1.5 px is an overflow error. Flex or grid siblings covering at least 20 percent of the smaller panel raise an overlap warning. Elements marked aria-hidden, or with class names like bg, glow or ornament, count as decoration. Exit codes are 0 for clean, 1 for problems and 2 for bad input.

Templates at true size

The gallery in web/ is Vite, React 19 and shadcn/ui over 34 template files in web/public/templates/. The decks are authored for a full 1920 by 1080 viewport, and a small iframe crops them instead of shrinking them. DeckFrame renders each iframe at that design size and applies transform: scale() with the container width divided by 1920. CSS container units cannot drive scale(), which needs a unitless number, and my first attempt showed only each deck’s top-left corner. Cards filter by scheme, formality, mood and free text. A click opens the live deck in a portal lightbox. It also listens for Escape inside the same-origin iframe, because a focused deck otherwise swallows the key.

Decisions and costs

• Generate the plugin copy rather than edit it. The marketplace install reads plugins/frontend-slides/skills/frontend-slides/, so the copy must be committed. sync.sh rebuilds seven items from the root, and CI runs bash sync.sh --check on every push. Every skill edit now lands as two identical diffs.
• Own the template HTML rather than fetch it. One agent per template fixed 20 of the 34, including literal placeholders such as [Author Name]. fetch-templates.mjs refuses to overwrite them without --force. Upstream changes are now manual cherry-picks.
• Detect decoration by class name. Templates need no extra markup, but unknown names slip through. On grove.html the slide number div.grove-num reports 52 px of overflow on four slides. This is the heuristic I would revisit first.

Checking a deck

bash scripts/check-slides.sh ./my-deck/ --json
bash scripts/check-slides.sh presentation.html --strict --slide 2
bash sync.sh && bash sync.sh --check
cd web && npm install && npm run dev

The wrapper installs Playwright into a fresh temporary directory on every run. The repository stays clean, and every check pays for an npm install. --strict fails on overlap too. --slide takes a zero-based index, while the report counts slides from one. The same module exports checkSlides(), so a future CLI can import the check rather than shell out.

Limits and status

The CLI and the Claude API web app in DEVELOPING.md are a roadmap, not code. The README names no deployed copy of the gallery. The checker understands only decks built from .slide sections. There are no automated tests yet. The feature work all landed on 29 June 2026, and later commits only move CI runners and dependencies. It is MIT licensed.