Skip to main content
ClaudeWave
Skill1.3k repo starsupdated yesterday

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.

Install in Claude Code
Copy
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-slide
Then start a new Claude Code session; the skill loads automatically.

SKILL.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