$ show zarazhangrui/frontend-slides
This repository is a Claude Code plugin and design system library for generating zero-dependency HTML presentations. It provides a structured workflow (SKILL.md) for an AI agent to create single-file slide decks with inline CSS/JS, featuring 34+ curated design templates (bold-template-pack) with detailed color palettes, typography scales, component definitions, and CJK internationalization guidance. The core runtime component is a reusable `<deck-stage>` web component that handles slide navigation, keyboard controls, auto-scaling, print support, and speaker notes. Supporting scripts enable Vercel deployment, PDF export via Playwright, and PowerPoint-to-JSON extraction. The repository is primarily a design specification library consumed by an AI coding agent, not a standalone application. It exhibits a hybrid nature: the templates are extensive design documentation (not executable code), while the plugin infrastructure and web component are functional code. The design philosophy emphasizes anti-generic aesthetics, fixed 16:9 stage scaling, and progressive disclosure of supporting files. Notable duplication exists between root and plugin paths, and all templates are marked alpha.
The LLM identified 2 files worth highlighting for reuse:
A self-contained `<deck-stage>` custom element that provides slide navigation (keyboard arrows, click/tap zones, swipe), auto-scaling of a fixed 1920x1080 canvas to the viewport, print layout support, speaker notes display, and a `slidechange` CustomEvent. It uses Shadow DOM for style isolation and is designed to be dropped into any HTML presentation with zero dependencies. This is the most reusable component in the repository and demonstrates non-obvious skill in handling responsive scaling, accessibility, and cross-browser compatibility.
A mandatory CSS file that establishes the fixed 1920x1080 stage model for all presentations. It locks the viewport, scales the canvas uniformly using CSS transforms, stacks slides vertically for print, and includes reduced-motion support. This pattern is reusable for any project requiring a fixed-ratio canvas that scales to fill the viewport while maintaining aspect ratio, and demonstrates a clean separation of concerns between layout and content.