# code4biz/shiryo-slides-kit architecture

> Architecture diagram of the GitHub repository code4biz/shiryo-slides-kit, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/code4biz/shiryo-slides-kit
- Repository: https://github.com/code4biz/shiryo-slides-kit

## Overview

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: [`skills/shiryo-slides/templates`](https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/templates) (HTML deck), [`skills/shiryo-slides/SKILL.md`](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md) (Style selection), [`skills/shiryo-slides/scripts/capture.js`](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/scripts/capture.js) (Slide capture), [`skills/shiryo-slides/styles`](https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/styles) (Writing styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Deck authoring"]
  node_skill["Skill instructions<br/>[SKILL.md]"]
  node_selection["Style selection<br/>[SKILL.md]"]
  node_templates["Deck templates"]
  node_styles["Writing styles"]
  node_themes["Visual themes"]
  node_workflows["Workflow guides"]
  node_outline["Deck structure<br/>[structure.md]"]
end

subgraph group_review["Quality review"]
  node_validation["Mechanical checks<br/>[validation.md]"]
  node_capture["Slide capture<br/>[capture.js]"]
  node_screenshots["Slide images"]
  node_visual_review["Visual review<br/>[SKILL.md]"]
  node_revision["Deck revision<br/>[SKILL.md]"]
end

subgraph group_delivery["Deck delivery"]
  node_html["HTML deck"]
  node_pdf["PDF conversion<br/>[to-pdf.js]"]
end

node_user(("User"))
node_agent(("AI agent"))
node_playwright["Playwright / Chromium"]

node_user -->|"requests slides"| node_agent
node_agent -->|"uses skill"| node_skill
node_skill -->|"guides selection"| node_selection
node_selection -->|"chooses format"| node_templates
node_selection -->|"chooses style"| node_styles
node_selection -->|"chooses theme"| node_themes
node_skill -->|"guides workflow"| node_workflows
node_agent -->|"plans content"| node_outline
node_agent -->|"generates deck"| node_html
node_templates -.->|"provides structure"| node_html
node_styles -.->|"shapes presentation"| node_html
node_themes -.->|"sets appearance"| node_html
node_agent -->|"checks deck"| node_validation
node_agent -->|"captures slides"| node_capture
node_capture -->|"launches browser"| node_playwright
node_capture -->|"writes PNGs"| node_screenshots
node_agent -->|"reviews every slide"| node_visual_review
node_screenshots -->|"supplies images"| node_visual_review
node_visual_review -->|"identifies fixes"| node_revision
node_revision -->|"updates deck"| node_html
node_agent -->|"converts on request"| node_pdf
node_pdf -->|"launches browser"| node_playwright

click node_skill "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md"
click node_selection "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md"
click node_templates "https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/templates"
click node_styles "https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/styles"
click node_themes "https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/themes"
click node_workflows "https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/workflows"
click node_outline "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/core/structure.md"
click node_html "https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/templates"
click node_validation "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/core/validation.md"
click node_capture "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/scripts/capture.js"
click node_visual_review "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md"
click node_revision "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md"
click node_pdf "https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/scripts/to-pdf.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_skill,node_selection,node_templates,node_styles,node_themes,node_workflows,node_outline,node_user toneBlue
class node_validation,node_capture,node_screenshots,node_visual_review,node_revision toneAmber
class node_html,node_pdf toneMint
class node_agent,node_playwright toneIndigo
```

## Components

### Deck authoring

- [Skill instructions](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md): `skills/shiryo-slides/SKILL.md`
- [Style selection](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md): `skills/shiryo-slides/SKILL.md`
- [Deck templates](https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/templates): `skills/shiryo-slides/templates`
- [Writing styles](https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/styles): `skills/shiryo-slides/styles`
- [Visual themes](https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/themes): `skills/shiryo-slides/themes`
- [Workflow guides](https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/workflows): `skills/shiryo-slides/workflows`
- [Deck structure](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/core/structure.md): `skills/shiryo-slides/core/structure.md`

### Quality review

- [Mechanical checks](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/core/validation.md): `skills/shiryo-slides/core/validation.md`
- [Slide capture](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/scripts/capture.js): `skills/shiryo-slides/scripts/capture.js`
- **Slide images**
- [Visual review](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md): `skills/shiryo-slides/SKILL.md`
- [Deck revision](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/SKILL.md): `skills/shiryo-slides/SKILL.md`

### Deck delivery

- [HTML deck](https://github.com/code4biz/shiryo-slides-kit/tree/main/skills/shiryo-slides/templates): `skills/shiryo-slides/templates`
- [PDF conversion](https://github.com/code4biz/shiryo-slides-kit/blob/main/skills/shiryo-slides/scripts/to-pdf.js): `skills/shiryo-slides/scripts/to-pdf.js`

### Other components

- **User**
- **AI agent**
- **Playwright / Chromium**

## Connections

- User → AI agent: requests slides (evidence: `README.md`)
- AI agent → Skill instructions: uses skill (evidence: `README.md`)
- Skill instructions → Style selection: guides selection (evidence: `README.md`)
- Style selection → Deck templates: chooses format (evidence: `README.md`)
- Style selection → Writing styles: chooses style (evidence: `README.md`)
- Style selection → Visual themes: chooses theme (evidence: `README.md`)
- Skill instructions → Workflow guides: guides workflow (evidence: `README.md`)
- AI agent → Deck structure: plans content (evidence: `README.md`)
- AI agent → HTML deck: generates deck (evidence: `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 (evidence: `README.md`)
- AI agent → Slide capture: captures slides (evidence: `README.md`)
- Slide capture → Playwright / Chromium: launches browser (evidence: `skills/shiryo-slides/scripts/capture.js`)
- Slide capture → Slide images: writes PNGs (evidence: `skills/shiryo-slides/scripts/capture.js`)
- AI agent → Visual review: reviews every slide (evidence: `README.md`)
- Slide images → Visual review: supplies images (evidence: `README.md`)
- Visual review → Deck revision: identifies fixes (evidence: `README.md`)
- Deck revision → HTML deck: updates deck (evidence: `README.md`)
- AI agent → PDF conversion: converts on request (evidence: `README.md`)
- PDF conversion → Playwright / Chromium: launches browser (evidence: `skills/shiryo-slides/scripts/to-pdf.js`)