oma-slide
oma-slide generates distinctive, animation-rich HTML presentation decks authored at a fixed 1920×1080 stage, then validates, bundles, and exports them to PDF, PNG, or PPTX via the `oma slide` CLI. Use it when users request slide decks, presentations, or keynotes from topics, outlines, or existing files, or when another skill needs visual output delivered as a presentation with keyboard/touch navigation and speaker notes.
git clone --depth 1 https://github.com/first-fluke/oh-my-agent /tmp/oma-slide && cp -r /tmp/oma-slide/.agents/skills/oma-slide ~/.claude/skills/oma-slideSKILL.md
# Slide Agent — Animation-Rich HTML Deck Generator
## Scheduling
### Goal
Generate distinctive, anti-"AI slop" HTML presentation decks authored at a fixed 1920×1080 stage,
validate geometry deterministically via the `oma slide` CLI, and deliver self-contained bundles
exportable to PDF, PNG, and PPTX.
### Intent signature
- User asks to create a slide deck, presentation, keynote, or series of slides.
- User provides a topic, outline, `.pptx` to import, or existing deck to enhance.
- User mentions slide, deck, pptx, keynote, 슬라이드, 발표자료, プレゼン, 幻灯片, 演示文稿.
- User mentions Canva, canva export, canva import, 캔바, キャンバ.
- Another skill needs a visual output artifact (e.g., a research result delivered as a deck).
### When to use
- Creating a new presentation from a topic or outline
- Enhancing or reformatting an existing deck
- Generating per-slide HTML with animations and design-doctrine aesthetics
- Exporting a deck to PDF, PNG, or PPTX after generation
- Applying a named style preset or bold template to a deck
- Exporting a generated deck to Canva as a presentation
- Importing a Canva design as input for enhancement
### When NOT to use
- Plain document creation (no slides needed) → use oma-backend or direct output
- Image generation alone → use oma-image directly
- Brand/design-system definition → defer to oma-design
- Deterministic CLI ops (validate/bundle/export) without generation → call `oma slide` CLI directly
- Long-form scrolling code-change explainer document → use oma-explanation (deck is a fixed 1920×1080 stage)
### Expected inputs
- Topic, title, or outline (text or markdown)
- Optional: `.pptx` file to import (`oma slide import-pptx`)
- Optional: user-provided images/video in `./assets/`
- Optional: slide count, density preference (sparse/balanced/dense), target audience
- Optional: named style preset or `oma slide styles get <slug>` reference
- Optional: Canva design ID or URL for import
### Expected outputs
- Per-slide `slide-NN.html` fragments under `.agents/results/slides/<session-id>/`
(authored at 1920×1080 px)
- Updated `meta.json` with `{ title, order[], style, density, speakerNotes }`
- Validation pass via `oma slide validate` (or a surfaced diff if auto-fix fails after 3 iterations)
<!-- oma-docs:ignore-start -->
- Optional: `viewer.html`, `out/deck.html` bundle, exports
<!-- oma-docs:ignore-end -->
- Optional: Canva design URL (when Canva export is requested)
```yaml
outputs:
- name: slide-fragments
description: Per-slide 1920×1080 HTML fragments authored by the skill
artifact: ".agents/results/slides/*/slide-*.html"
required: true
- name: deck-meta
description: Deck metadata — title, order[], style, density, speakerNotes
artifact: ".agents/results/slides/*/meta.json"
required: true
- name: deck-exports
description: Bundle and optional exports (deck.html, deck.pdf, png/, deck.pptx)
artifact: ".agents/results/slides/*/out/*"
required: false
```
### Dependencies
- `oma slide` CLI (all deterministic ops — scaffold, validate, bundle, export, viewer, editor)
- `oma-image` skill (image generation; oma-slide never calls image APIs directly)
- `resources/generation-protocol.md` (Phase 0–6 workflow)
- `resources/design-doctrine.md` (anti-"AI slop" aesthetics; CJK → Pretendard rule)
- `resources/fixed-stage.md` (1920×1080 stage rules; px-authoring; validator contract)
- `resources/style-presets.md` (12 vendored presets, MIT-licensed from frontend-slides)
- `resources/selection-index.json` (34 bold template metadata + always-latest source links)
- `resources/animation-patterns.md` (effect-to-feeling guide)
- Canva Remote MCP (`https://mcp.canva.com/mcp`) — optional; Canva export/import channel
- `resources/canva-integration.md` (Canva MCP tool mapping and pipeline)
### Control-flow features
- Branches by mode: new / import / import-canva / enhance (Phase 0 detection)
- Branches by CJK content presence (→ Pretendard font required)
- Branches by Canva availability: probes `list_designs` on startup; offers auto-provisioning if not configured; skips if unavailable or declined
- Validate loop: max 3 auto-fix iterations, then surfaces diff to user
- Defers image generation to oma-image; defers video download to `oma slide fetch-video`
- Style discovery: generates 3 live previews (safe preset + bold + wildcard) → user picks
## Structural Flow
### Entry
1. Detect mode: new topic / import .pptx / enhance existing deck.
2. Run one `AskUserQuestion` clarifying: purpose, audience, slide count, content density, existing assets.
3. Load `resources/generation-protocol.md` and the relevant style reference before writing any HTML.
### Scenes
1. **DETECT** (Phase 0): Identify mode (new / import / enhance). Resolve the session output
directory as `.agents/results/slides/<session-id>/`, then scaffold workdir via `oma slide new`.
2. **DISCOVER** (Phase 1): Clarify purpose, length, content, density. Evaluate user-provided assets
(multimodal-Read each image; `oma slide fetch-video` for video → `./assets/`). Co-design outline
around text AND curated assets.
3. **STYLE** (Phase 2): Generate 3 live HTML style previews (safe preset, bold template, wildcard).
Present to user; await selection. Read chosen `design.md` via `oma slide styles get <slug>` if bold.
4. **GENERATE** (Phase 3): Write `slide-NN.html` fragments into the workdir at 1920×1080 px.
New imagery requests → oma-image → `./assets/`. Apply `data-om-validate` on each slide.
5. **VALIDATE** (Phase 4): Run `oma slide validate --dir --format json`. If findings exist,
auto-fix the reported slides and re-validate. Max 3 iterations; surface diff to user on failure.
6. **REVIEW** (Phase 5): Run `oma slide viewer --dir` (in the viewer, press `n` to toggle the
on-screen speaker-notes panel). Optionally open `oma slide edit --dir`
for bbox visual edits. Optional aesthetic review using chrome-devtools MCP screenshots (judgment,
not the pass/fail gate).
7. **DELIVER** (Phase 6>
Architecture specialist for software/system design, module and
Backend specialist for APIs, databases, authentication with clean
Design-first ideation that explores user intent, constraints, and
Guide for coordinating PM, Frontend, Backend, Mobile, and QA agents
Database specialist for SQL, NoSQL, and vector database modeling,
Bug diagnosis and fixing specialist - analyzes errors, identifies
Drive Vercel's `deepsec` agent-powered vulnerability scanner