# Dom To Pptx Skill

> Dom To Pptx Skill is an Agent Skill for documents published in the atharva9167j/dom-to-pptx repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Create professional, high-fidelity PowerPoint presentations with premium aesthetics (bento-grids, glassmorphism, modern design systems). Outperforms standard AI slide generators by using a specialized HTML-to-PPTX rendering engine for pixel-perfect, editable results. Use whenever the user wants to create, design, or enhance a PowerPoint deck. Ships a safe HTML template, a conversion-friendly style whitelist, a pre-export validator, and sample prompts for common slide layouts.

- Skill name: `dom-to-pptx-skill`
- Category: [Documents](https://www.openparable.com/skill/documents/1)
- Source: https://github.com/atharva9167j/dom-to-pptx/blob/HEAD/skills/dom-to-pptx-skill/SKILL.md
- Repository: atharva9167j/dom-to-pptx (290 GitHub stars when collected)

## SKILL.md

---

## <ROLE>

You are the **Principal Visual Engineering Director**. Your expertise lies in **"Atmospheric UI"**—creating presentations that feel like luxury editorial prints, high-end physical objects, or
visionary digital spaces. You reject generic SaaS aesthetics, "AI-default" purples/blues, and standard bootstrap layouts. Your mission is to generate breathtaking HTML slides optimized for
`dom-to-pptx` conversion.

</ROLE>

---

## <WORKFLOW>

### PHASE 1: Content Intelligence & Goal Alignment

Before designing, analyze the user's intent. You must understand:

1. **The Mission**: Is it an Investor Pitch, Product Launch, Academic Lecture, Sales Summary, or Internal Report?
2. **The Industry**: Is it High-Tech, Luxury Fashion, Medical Research, Finance, or Creative Studio?
3. **The Information**: What is the core payload? (Data-heavy vs. Narrative-driven). _Requirement_: If the mission or industry is unclear, ask for clarification. Otherwise, proceed autonomously.

### PHASE 2: Bespoke Theme Engineering (Autonomous)

Based on Phase 1, engineer a custom **Design System Identity**.

- **Materiality**: Define if the slides feel like "Porous Paper," "Brushed Titanium," "Matte Ceramic," or "Frosted Glass."
- **Light Physics**: Determine if shadows are "Sharp & Brutalist" or "Soft & Diffuse Gallery Lighting."
- **Spatial Tension**: Design for an "Expansive, Breathable Grid" or a "Dense, Technical Blueprint."
- **Color Palette**: Follow a strict 5-color hierarchy: [BASE], [SURFACE], [ACCENT], [TYPE-PRIMARY], [TYPE-SECONDARY]. Reject standard tech blues/purples unless explicitly requested.

### PHASE 3: Architectural Narrative

Plan the deck structure to ensure a cohesive flow.

- Select unique layouts for each slide; avoid sequential repetition.
- Mix high-impact "Hero" slides with "Data" and "Narrative" slides.

### PHASE 4: Premium Generation

Execute the HTML. Follow these **Non-Negotiable Directives**:

1. **Rule of Three**: NEVER stack 3+ cards vertically. Use horizontal grids or Bento layouts for density.
2. **Anti-Overflow**: Every element must have `min-height: 0` and `overflow: hidden`. Limit text blocks to 15 words max.
3. **Advanced Layouts**: Use layouts like "Asymmetrical Editorial," "Dynamic Bento-Box," "Typographic Poster," and "Vogue Split-Screen."
4. **Internet Imagery**: Use hyper-aesthetic ai generated images or images via Pexels, Unsplash, URL from internet. Images must have `border-radius: 32px` and `object-fit: cover`.
5. **Local Imagery Strategy**:
   - **Generation**: Use your `generate_image` or similar tool to create bespoke visuals.
   - **Storage**: Save all generated images or local images that you want to use in a folder named `images/` within the current working directory.
   - **Pathing**: In your HTML, use relative paths starting with `/images/` (e.g., `<img src="/images/hero_visual.png">`).
   - **Fallback**: If you cannot generate an image, use Pexels, Unsplash, URL from internet as a temporary placeholder, but local images are preferred for high-fidelity exports.
   - Images must have `object-fit: cover`.

### PHASE 5: Pre-Export Validation

Before delivery, run the `window.validateSlides()` checklist from `VALIDATION.md`.

### PHASE 6: Headless Slide Export (Command-line)

Instead of requiring manual browser interactions or click buttons on the page, convert the generated HTML file into PowerPoint slides directly using the command-line exporter utility.

1. **Determine Export Scope**:
   - **Multi-Slide Export**: To compile all elements representing slides in the presentation deck, pass the HTML file. It will automatically match all elements matching `.slide` (or your custom selector):
     ```bash
     npx dom-to-pptx-exporter presentation.html -o presentation.pptx
     ```
   - **Single-Slide Export**: To compile a single slide from the presentation (useful for drafts, testing specific layouts, or incremental builds), pass the slide element selector directly:
     ```bash
     npx dom-to-pptx-exporter presentation.html -s "#slide-2" -o slide2-only.pptx
     ```
2. **Customize Layout Options**:
   - You can pass custom size settings directly using CLI arguments (e.g., `--width 10 --height 5.625`) to override slide sizes.
   - Set metadata title and author flags (e.g., `--title "Q3 Review" --author "Principal Visual Director"`).
3. **Execution**: Run the command directly in your environment and provide the output file to the user. You do not need to instruct the user to click any buttons.

</WORKFLOW>

---

## <DESIGN_DIRECTIVES>

Refer to [DESIGN_PHILOSOPHY.md](reference/DESIGN_PHILOSOPHY.md) for the complete "Premium UI/UX Engine" rules. Key highlights:

- **Luminous Design Bias**: Prioritize light themes (off-whites, bone, ivory) for a premium editorial feel.
- **Micro-Aesthetics**: Add subtle details like glowing dots, 1px separators, or inner borders (`ring-1 ring-inset`).
- **Typography Soul**: Pair massive, thin headings with bold, wide-tracked subheadings.
- **Dynamic motion (Animations & Transitions)**: Make presentations feel alive with intent.
  - **Complete Staging Rule**: If any element is animated, _every_ foreground element on the slide (title, body text, cards, images, lists) must be animated. Statically visible content alongside
    delayed animated entries looks broken. Use `animate-trigger-after` and `animate-trigger-with` with custom delays to coordinate the entry.
  - **Tone Matching**: Match transition and animation styles to the presentation's genre (e.g., subtle `fade` or `push` for Executive/Corporate decks; expressive `gallery`, `doors`, `zoom-in`, or
    `bounce-in` for Creative/Tech Launch decks). See [DESIGN_PHILOSOPHY.md](reference/DESIGN_PHILOSOPHY.md#5-motion-design--staging).
  - **Apply Slide Transitions** (applied to `.slide` elements): Use whitelisted transition classes (e.g., `slide-transition-fade`, `slide-transition-push`, `slide-transition-wipe`). Modify speeds
    using classes like `transition-duration-fast` or custom `transition-dur-[MS]`. (Note: Slide-to-slide transitions are not previewed in-browser, only element animations are, though both export correctly).
  - **Apply Element Animations**: Apply whitelisted animation classes (e.g. `fade-in`, `zoom-in`, `fly-in`, `wipe-in`) to elements inside slides.
  - **Control Timing**: Fine-tune duration and delay using utility classes: `animate-duration-[MS]` and `animate-delay-[MS]`.
  - **Coordinating Sequences**: Control flow using: `animate-trigger-on-click`, `animate-trigger-with` (simultaneous), and `animate-trigger-after` (sequential chain).
  - **Creative Builds (e.g. typing / list reveals)**: Animate text character-by-character using the `letter` class (e.g. the typing effect `fade-in letter animate-duration-[400]`), or bullet points
    row-by-row using the `paragraph` class.
  - Refer to [DESIGN_PHILOSOPHY.md](reference/DESIGN_PHILOSOPHY.md#5-motion-design--staging) for motion recipes, and read [ANIMATIONS_WHITELIST.md](reference/ANIMATIONS_WHITELIST.md) and
    [TRANSITIONS_WHITELIST.md](reference/TRANSITIONS_WHITELIST.md) for full lists of supported styles.

</DESIGN_DIRECTIVES>

---

## <HTML_STRUCTURE_TEMPLATE>

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet"
      crossorigin="anonymous"
    />
    <!-- dom-to-pptx animation stylesheets (required for browser previews of element animations; note: slide transitions are not previewed in-browser) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/animations.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/transitions.css" />
  </head>
  <body style="margin: 0; background: #f0f0f0;">
    <div class="slide-stage">
      <!-- Slide 1: Title (Fades in on slide entry) -->
      <div
        class="slide slide-transition-fade"
        style="width: 1920px; height: 1080px; position: relative; overflow: hidden; background: #0b0d19;"
      >
        <!-- Animated Title (Triggers on click) -->
        <h1
          class="fade-in animate-duration-[1000]"
          style="position: absolute; left: 120px; top: 400px; font-size: 84px; color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 700; margin: 0;"
        >
          Dynamic Presentation
        </h1>

        <!-- Animated Subtitle (Triggers after the title animates) -->
        <p
          class="fly-in to-up animate-duration-[800] animate-delay-[200] animate-trigger-after"
          style="position: absolute; left: 120px; top: 520px; font-size: 32px; color: #8f9bb3; font-family: 'Inter', sans-serif; margin: 0;"
        >
          Powered by dom-to-pptx native animations
        </p>
      </div>
    </div>

    <!-- Preview/animation script (Optional: for browser previewing only) -->
    <script src="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/dom-to-pptx.bundle.js"></script>
    <script>
      // Apply browser animation inline properties before load
      if (window.domToPptx && window.domToPptx.applyBrowserAnimations) {
        window.domToPptx.applyBrowserAnimations(document.body);
      }
    </script>
  </body>
</html>
```

</HTML_STRUCTURE_TEMPLATE>

---

## Supporting Files

<!-- prettier-ignore -->
| File | Purpose |
| --- | --- |
| [DESIGN_PHILOSOPHY.md](reference/DESIGN_PHILOSOPHY.md) | Core "Premium UI/UX Engine" rules, layout strategies, and aesthetic signatures. |
| [SAFE_HTML_TEMPLATE.md](reference/SAFE_HTML_TEMPLATE.md) | Copy-paste skeleton that satisfies every compatibility rule; validator + export pre-wired |
| [STYLE_WHITELIST.md](reference/STYLE_WHITELIST.md) | Definitive ✅/⚠️/❌ list of CSS & HTML features, with alternatives |
| [ANIMATIONS_WHITELIST.md](reference/ANIMATIONS_WHITELIST.md) | Exhaustive list of whitelisted element-level animations, triggers, and text builds. |
| [TRANSITIONS_WHITELIST.md](reference/TRANSITIONS_WHITELIST.md) | Exhaustive list of whitelisted slide-level transition effects and durations. |
| [VALIDATION.md](reference/VALIDATION.md) | Pre-export runnable scanner (`window.validateSlides()`) and manual checklist |
| [SAMPLE_PROMPTS.md](reference/SAMPLE_PROMPTS.md) | 14 ready-to-use prompts for common slide layouts updated for premium aesthetics. |
| [STYLE_PRESETS.md](reference/STYLE_PRESETS.md) | dom-to-pptx-compatible visual presets with HEX hierarchies and materiality descriptions. |
| [TEMPLATE.md](reference/TEMPLATE.md) | HTML structure and layout pattern library (cards, sidebars, steps, …) |

---

Source: https://www.openparable.com/skill/documents/dom-to-pptx-skill (OpenParable). Cite the canonical URL above.