How code4biz/shiryo-slides-kit works
shiryo-slides-kit is an agent skill for producing standalone 16:9 HTML presentation decks and optional PDFs. Its main workflow takes a user’s request and source material through style/use/theme selection, content planning, HTML authoring, mechanical checks, and a full-deck screenshot review-and-revision loop. The skill also defines templates, styles, themes, and workflow variants. The README documents the end-to-end process; source excerpts show how capture and PDF conversion work, but do not show the full authoring or validation implementation.
Main entry points: templates HTML deck · SKILL.md Style selection · capture.js Slide capture · styles Writing styles
Components 17
Deck authoring
- Skill instructions
skills/shiryo-slides/SKILL.md - Style selection
skills/shiryo-slides/SKILL.md - Deck templates
skills/shiryo-slides/templates - Writing styles
skills/shiryo-slides/styles - Visual themes
skills/shiryo-slides/themes - Workflow guides
skills/shiryo-slides/workflows - Deck structure
skills/shiryo-slides/core/structure.md
Quality review
- Mechanical checks
skills/shiryo-slides/core/validation.md - Slide capture
skills/shiryo-slides/scripts/capture.js - Slide images
- Visual review
skills/shiryo-slides/SKILL.md - Deck revision
skills/shiryo-slides/SKILL.md
Deck delivery
- HTML deck
skills/shiryo-slides/templates - PDF conversion
skills/shiryo-slides/scripts/to-pdf.js
Other components
- User
- AI agent
- Playwright / Chromium
Connections 22
- User → AI agent: requests slides
README.md - AI agent → Skill instructions: uses skill
README.md - Skill instructions → Style selection: guides selection
README.md - Style selection → Deck templates: chooses format
README.md - Style selection → Writing styles: chooses style
README.md - Style selection → Visual themes: chooses theme
README.md - Skill instructions → Workflow guides: guides workflow
README.md - AI agent → Deck structure: plans content
README.md - AI agent → HTML deck: generates deck
README.md - Deck templates → HTML deck: provides structure
- Writing styles → HTML deck: shapes presentation
- Visual themes → HTML deck: sets appearance
- AI agent → Mechanical checks: checks deck
README.md - AI agent → Slide capture: captures slides
README.md - Slide capture → Playwright / Chromium: launches browser
skills/shiryo-slides/scripts/capture.js - Slide capture → Slide images: writes PNGs
skills/shiryo-slides/scripts/capture.js - AI agent → Visual review: reviews every slide
README.md - Slide images → Visual review: supplies images
README.md - Visual review → Deck revision: identifies fixes
README.md - Deck revision → HTML deck: updates deck
README.md - AI agent → PDF conversion: converts on request
README.md - PDF conversion → Playwright / Chromium: launches browser
skills/shiryo-slides/scripts/to-pdf.js