@ohos-ports/slides-grab 1.5.0-beta.0

package/skills/slides-grab-export/references/ooxml.md

@@ -0,0 +1,427 @@
+# Office Open XML Technical Reference for PowerPoint
+
+**Important: Read this entire document before starting.** Critical XML schema rules and formatting requirements are covered throughout. Incorrect implementation can create invalid PPTX files that PowerPoint cannot open.
+
+## Technical Guidelines
+
+### Schema Compliance
+- **Element ordering in `<p:txBody>`**: `<a:bodyPr>`, `<a:lstStyle>`, `<a:p>`
+- **Whitespace**: Add `xml:space='preserve'` to `<a:t>` elements with leading/trailing spaces
+- **Unicode**: Escape characters in ASCII content: `"` becomes `&#8220;`
+- **Images**: Add to `ppt/media/`, reference in slide XML, set dimensions to fit slide bounds
+- **Relationships**: Update `ppt/slides/_rels/slideN.xml.rels` for each slide's resources
+- **Dirty attribute**: Add `dirty="0"` to `<a:rPr>` and `<a:endParaRPr>` elements to indicate clean state
+
+## Presentation Structure
+
+### Basic Slide Structure
+```xml
+<!-- ppt/slides/slide1.xml -->
+<p:sld>
+  <p:cSld>
+    <p:spTree>
+      <p:nvGrpSpPr>...</p:nvGrpSpPr>
+      <p:grpSpPr>...</p:grpSpPr>
+      <!-- Shapes go here -->
+    </p:spTree>
+  </p:cSld>
+</p:sld>
+```
+
+### Text Box / Shape with Text
+```xml
+<p:sp>
+  <p:nvSpPr>
+    <p:cNvPr id="2" name="Title"/>
+    <p:cNvSpPr>
+      <a:spLocks noGrp="1"/>
+    </p:cNvSpPr>
+    <p:nvPr>
+      <p:ph type="ctrTitle"/>
+    </p:nvPr>
+  </p:nvSpPr>
+  <p:spPr>
+    <a:xfrm>
+      <a:off x="838200" y="365125"/>
+      <a:ext cx="7772400" cy="1470025"/>
+    </a:xfrm>
+  </p:spPr>
+  <p:txBody>
+    <a:bodyPr/>
+    <a:lstStyle/>
+    <a:p>
+      <a:r>
+        <a:t>Slide Title</a:t>
+      </a:r>
+    </a:p>
+  </p:txBody>
+</p:sp>
+```
+
+### Text Formatting
+```xml
+<!-- Bold -->
+<a:r>
+  <a:rPr b="1"/>
+  <a:t>Bold Text</a:t>
+</a:r>
+
+<!-- Italic -->
+<a:r>
+  <a:rPr i="1"/>
+  <a:t>Italic Text</a:t>
+</a:r>
+
+<!-- Underline -->
+<a:r>
+  <a:rPr u="sng"/>
+  <a:t>Underlined</a:t>
+</a:r>
+
+<!-- Highlight -->
+<a:r>
+  <a:rPr>
+    <a:highlight>
+      <a:srgbClr val="FFFF00"/>
+    </a:highlight>
+  </a:rPr>
+  <a:t>Highlighted Text</a:t>
+</a:r>
+
+<!-- Font and Size -->
+<a:r>
+  <a:rPr sz="2400" typeface="Arial">
+    <a:solidFill>
+      <a:srgbClr val="FF0000"/>
+    </a:solidFill>
+  </a:rPr>
+  <a:t>Colored Arial 24pt</a:t>
+</a:r>
+
+<!-- Complete formatting example -->
+<a:r>
+  <a:rPr lang="en-US" sz="1400" b="1" dirty="0">
+    <a:solidFill>
+      <a:srgbClr val="FAFAFA"/>
+    </a:solidFill>
+  </a:rPr>
+  <a:t>Formatted text</a:t>
+</a:r>
+```
+
+### Lists
+```xml
+<!-- Bullet list -->
+<a:p>
+  <a:pPr lvl="0">
+    <a:buChar char="•"/>
+  </a:pPr>
+  <a:r>
+    <a:t>First bullet point</a:t>
+  </a:r>
+</a:p>
+
+<!-- Numbered list -->
+<a:p>
+  <a:pPr lvl="0">
+    <a:buAutoNum type="arabicPeriod"/>
+  </a:pPr>
+  <a:r>
+    <a:t>First numbered item</a:t>
+  </a:r>
+</a:p>
+
+<!-- Second level indent -->
+<a:p>
+  <a:pPr lvl="1">
+    <a:buChar char="•"/>
+  </a:pPr>
+  <a:r>
+    <a:t>Indented bullet</a:t>
+  </a:r>
+</a:p>
+```
+
+### Shapes
+```xml
+<!-- Rectangle -->
+<p:sp>
+  <p:nvSpPr>
+    <p:cNvPr id="3" name="Rectangle"/>
+    <p:cNvSpPr/>
+    <p:nvPr/>
+  </p:nvSpPr>
+  <p:spPr>
+    <a:xfrm>
+      <a:off x="1000000" y="1000000"/>
+      <a:ext cx="3000000" cy="2000000"/>
+    </a:xfrm>
+    <a:prstGeom prst="rect">
+      <a:avLst/>
+    </a:prstGeom>
+    <a:solidFill>
+      <a:srgbClr val="FF0000"/>
+    </a:solidFill>
+    <a:ln w="25400">
+      <a:solidFill>
+        <a:srgbClr val="000000"/>
+      </a:solidFill>
+    </a:ln>
+  </p:spPr>
+</p:sp>
+
+<!-- Rounded Rectangle -->
+<p:sp>
+  <p:spPr>
+    <a:prstGeom prst="roundRect">
+      <a:avLst/>
+    </a:prstGeom>
+  </p:spPr>
+</p:sp>
+
+<!-- Circle/Ellipse -->
+<p:sp>
+  <p:spPr>
+    <a:prstGeom prst="ellipse">
+      <a:avLst/>
+    </a:prstGeom>
+  </p:spPr>
+</p:sp>
+```
+
+### Images
+```xml
+<p:pic>
+  <p:nvPicPr>
+    <p:cNvPr id="4" name="Picture">
+      <a:hlinkClick r:id="" action="ppaction://media"/>
+    </p:cNvPr>
+    <p:cNvPicPr>
+      <a:picLocks noChangeAspect="1"/>
+    </p:cNvPicPr>
+    <p:nvPr/>
+  </p:nvPicPr>
+  <p:blipFill>
+    <a:blip r:embed="rId2"/>
+    <a:stretch>
+      <a:fillRect/>
+    </a:stretch>
+  </p:blipFill>
+  <p:spPr>
+    <a:xfrm>
+      <a:off x="1000000" y="1000000"/>
+      <a:ext cx="3000000" cy="2000000"/>
+    </a:xfrm>
+    <a:prstGeom prst="rect">
+      <a:avLst/>
+    </a:prstGeom>
+  </p:spPr>
+</p:pic>
+```
+
+### Tables
+```xml
+<p:graphicFrame>
+  <p:nvGraphicFramePr>
+    <p:cNvPr id="5" name="Table"/>
+    <p:cNvGraphicFramePr>
+      <a:graphicFrameLocks noGrp="1"/>
+    </p:cNvGraphicFramePr>
+    <p:nvPr/>
+  </p:nvGraphicFramePr>
+  <p:xfrm>
+    <a:off x="1000000" y="1000000"/>
+    <a:ext cx="6000000" cy="2000000"/>
+  </p:xfrm>
+  <a:graphic>
+    <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/table">
+      <a:tbl>
+        <a:tblGrid>
+          <a:gridCol w="3000000"/>
+          <a:gridCol w="3000000"/>
+        </a:tblGrid>
+        <a:tr h="500000">
+          <a:tc>
+            <a:txBody>
+              <a:bodyPr/>
+              <a:lstStyle/>
+              <a:p>
+                <a:r>
+                  <a:t>Cell 1</a:t>
+                </a:r>
+              </a:p>
+            </a:txBody>
+          </a:tc>
+          <a:tc>
+            <a:txBody>
+              <a:bodyPr/>
+              <a:lstStyle/>
+              <a:p>
+                <a:r>
+                  <a:t>Cell 2</a:t>
+                </a:r>
+              </a:p>
+            </a:txBody>
+          </a:tc>
+        </a:tr>
+      </a:tbl>
+    </a:graphicData>
+  </a:graphic>
+</p:graphicFrame>
+```
+
+### Slide Layouts
+
+```xml
+<!-- Title Slide Layout -->
+<p:sp>
+  <p:nvSpPr>
+    <p:nvPr>
+      <p:ph type="ctrTitle"/>
+    </p:nvPr>
+  </p:nvSpPr>
+  <!-- Title content -->
+</p:sp>
+
+<p:sp>
+  <p:nvSpPr>
+    <p:nvPr>
+      <p:ph type="subTitle" idx="1"/>
+    </p:nvPr>
+  </p:nvSpPr>
+  <!-- Subtitle content -->
+</p:sp>
+
+<!-- Content Slide Layout -->
+<p:sp>
+  <p:nvSpPr>
+    <p:nvPr>
+      <p:ph type="title"/>
+    </p:nvPr>
+  </p:nvSpPr>
+  <!-- Slide title -->
+</p:sp>
+
+<p:sp>
+  <p:nvSpPr>
+    <p:nvPr>
+      <p:ph type="body" idx="1"/>
+    </p:nvPr>
+  </p:nvSpPr>
+  <!-- Content body -->
+</p:sp>
+```
+
+## File Updates
+
+When adding content, update these files:
+
+**`ppt/_rels/presentation.xml.rels`:**
+```xml
+<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" Target="slides/slide1.xml"/>
+<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideMaster" Target="slideMasters/slideMaster1.xml"/>
+```
+
+**`ppt/slides/_rels/slide1.xml.rels`:**
+```xml
+<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout" Target="../slideLayouts/slideLayout1.xml"/>
+<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="../media/image1.png"/>
+```
+
+**`[Content_Types].xml`:**
+```xml
+<Default Extension="png" ContentType="image/png"/>
+<Default Extension="jpg" ContentType="image/jpeg"/>
+<Override PartName="/ppt/slides/slide1.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slide+xml"/>
+```
+
+**`ppt/presentation.xml`:**
+```xml
+<p:sldIdLst>
+  <p:sldId id="256" r:id="rId1"/>
+  <p:sldId id="257" r:id="rId2"/>
+</p:sldIdLst>
+```
+
+**`docProps/app.xml`:** Update slide count and statistics
+```xml
+<Slides>2</Slides>
+<Paragraphs>10</Paragraphs>
+<Words>50</Words>
+```
+
+## Slide Operations
+
+### Adding a New Slide
+When adding a slide to the end of the presentation:
+
+1. **Create the slide file** (`ppt/slides/slideN.xml`)
+2. **Update `[Content_Types].xml`**: Add Override for the new slide
+3. **Update `ppt/_rels/presentation.xml.rels`**: Add relationship for the new slide
+4. **Update `ppt/presentation.xml`**: Add slide ID to `<p:sldIdLst>`
+5. **Create slide relationships** (`ppt/slides/_rels/slideN.xml.rels`) if needed
+6. **Update `docProps/app.xml`**: Increment slide count and update statistics (if present)
+
+### Duplicating a Slide
+1. Copy the source slide XML file with a new name
+2. Update all IDs in the new slide to be unique
+3. Follow the "Adding a New Slide" steps above
+4. **CRITICAL**: Remove or update any notes slide references in `_rels` files
+5. Remove references to unused media files
+
+### Reordering Slides
+1. **Update `ppt/presentation.xml`**: Reorder `<p:sldId>` elements in `<p:sldIdLst>`
+2. The order of `<p:sldId>` elements determines slide order
+3. Keep slide IDs and relationship IDs unchanged
+
+Example:
+```xml
+<!-- Original order -->
+<p:sldIdLst>
+  <p:sldId id="256" r:id="rId2"/>
+  <p:sldId id="257" r:id="rId3"/>
+  <p:sldId id="258" r:id="rId4"/>
+</p:sldIdLst>
+
+<!-- After moving slide 3 to position 2 -->
+<p:sldIdLst>
+  <p:sldId id="256" r:id="rId2"/>
+  <p:sldId id="258" r:id="rId4"/>
+  <p:sldId id="257" r:id="rId3"/>
+</p:sldIdLst>
+```
+
+### Deleting a Slide
+1. **Remove from `ppt/presentation.xml`**: Delete the `<p:sldId>` entry
+2. **Remove from `ppt/_rels/presentation.xml.rels`**: Delete the relationship
+3. **Remove from `[Content_Types].xml`**: Delete the Override entry
+4. **Delete files**: Remove `ppt/slides/slideN.xml` and `ppt/slides/_rels/slideN.xml.rels`
+5. **Update `docProps/app.xml`**: Decrement slide count and update statistics
+6. **Clean up unused media**: Remove orphaned images from `ppt/media/`
+
+Note: Don't renumber remaining slides - keep their original IDs and filenames.
+
+
+## Common Errors to Avoid
+
+- **Encodings**: Escape unicode characters in ASCII content: `"` becomes `&#8220;`
+- **Images**: Add to `ppt/media/` and update relationship files
+- **Lists**: Omit bullets from list headers
+- **IDs**: Use valid hexadecimal values for UUIDs
+- **Themes**: Check all themes in `theme` directory for colors
+
+## Validation Checklist for Template-Based Presentations
+
+### Before Packing, Always:
+- **Clean unused resources**: Remove unreferenced media, fonts, and notes directories
+- **Fix Content_Types.xml**: Declare ALL slides, layouts, and themes present in the package
+- **Fix relationship IDs**: 
+   - Remove font embed references if not using embedded fonts
+- **Remove broken references**: Check all `_rels` files for references to deleted resources
+
+### Common Template Duplication Pitfalls:
+- Multiple slides referencing the same notes slide after duplication
+- Image/media references from template slides that no longer exist
+- Font embedding references when fonts aren't included
+- Missing slideLayout declarations for layouts 12-25
+- docProps directory may not unpack - this is optional

package/skills/slides-grab-export/references/pptx-skill-reference.md

@@ -0,0 +1,189 @@
+# PPTX Skill - Experimental / Unstable PowerPoint Conversion
+
+Converts HTML slides into experimental / unstable PowerPoint presentation files on a best-effort basis.
+
+## Feature Overview
+
+### 1. New Presentation (HTML -> PPTX)
+Convert HTML slide files to experimental / unstable PowerPoint output
+
+### 2. Edit Existing Presentation
+Modify contents of a PPTX file
+
+### 3. Thumbnail Generation
+Generate preview images of a presentation
+
+## Prerequisites (Stage 3)
+
+This skill is **Stage 3**. It executes only when ALL of the following conditions are met:
+
+1. **Explicit user request required**: Only run when the user explicitly requests PPTX conversion ("convert to PPTX", "make a PowerPoint", etc.).
+2. **HTML slides reviewed**: All HTML slides must have been reviewed and approved by the user in `viewer.html`.
+3. **No automatic execution**: Do not automatically start PPTX conversion just because slide generation is complete.
+
+If prerequisites are not met, guide the user to review slides in `<slides-dir>/viewer.html` first (default: `slides/viewer.html`).
+
+---
+
+## Core Workflow
+
+### HTML -> PPTX Conversion
+
+1. **Prepare HTML slides**
+   - Verify HTML files exist in selected `--slides-dir` (default: `slides/`)
+   - Validate each file is 720pt x 405pt (16:9) specification
+
+2. **Run the editable-text engine** (experimental / unstable)
+   ```bash
+   slides-grab convert --slides-dir <path> --output presentation.pptx --engine text
+   ```
+   - Use the packaged `slides-grab convert` command rather than runtime-local skill scripts.
+   - Omit `--engine text` to use the default raster engine for higher visual fidelity.
+
+3. **Verify results**
+   - Check generated PPTX file carefully; expect best-effort fidelity only
+   - Visual verification via thumbnail
+
+## Script Usage
+
+### Programmatic Conversion Note
+The packaged runtime exposes PPTX conversion through `slides-grab convert`. Do not import converter files from runtime-local skill directories in installed-agent workflows.
+
+```bash
+slides-grab convert --slides-dir <path> --output presentation.pptx --engine text
+```
+
+### Thumbnail / OOXML Inspection
+
+Use standard local tools such as LibreOffice, Poppler, or OOXML unzip/zip inspection when you need thumbnails or package-level debugging. These steps are diagnostic aids, not required packaged runtime commands.
+
+```bash
+unzip presentation.pptx -d output_dir
+```
+
+## Reference Documents
+
+- [html2pptx.md](html2pptx.md) - HTML to PPTX conversion detailed guide
+- [ooxml.md](ooxml.md) - Office Open XML technical reference
+
+## PptxGenJS Key Rules
+
+### Color Codes
+```javascript
+// Correct - without #
+{ color: 'FF0000' }
+
+// Wrong - causes file corruption
+{ color: '#FF0000' }
+```
+
+### Adding Slides
+```javascript
+const slide = pres.addSlide();
+
+// Add text
+slide.addText('Title', {
+  x: 0.5,
+  y: 0.5,
+  w: 9,
+  h: 1,
+  fontSize: 36,
+  color: '1a1a2e',
+  bold: true
+});
+
+// Add image
+slide.addImage({
+  path: 'image.png',
+  x: 1,
+  y: 2,
+  w: 4,
+  h: 3
+});
+
+// Add shape
+slide.addShape(pres.ShapeType.rect, {
+  x: 0.5,
+  y: 1,
+  w: 3,
+  h: 2,
+  fill: { color: '1e3a5f' }
+});
+```
+
+### Adding Charts
+```javascript
+// Bar chart
+slide.addChart(pres.ChartType.bar, [
+  {
+    name: 'Series 1',
+    labels: ['A', 'B', 'C'],
+    values: [10, 20, 30]
+  }
+], {
+  x: 1,
+  y: 2,
+  w: 8,
+  h: 4
+});
+
+// Pie chart
+slide.addChart(pres.ChartType.pie, [...], {...});
+
+// Line chart
+slide.addChart(pres.ChartType.line, [...], {...});
+```
+
+## Full Conversion Process
+
+```
++-------------------+
+|   HTML Slides     |
+| <slides-dir>/*.html |
++---------+---------+
+          |
+          v
++-------------------+
+|  html2pptx.js     |
+|  (Playwright +    |
+|   PptxGenJS)      |
++---------+---------+
+          |
+          v
++-------------------+
+|   PPTX File       |
+| presentation.pptx |
++---------+---------+
+          |
+          v
++-------------------+
+|  thumbnail.py     |
+|  (Preview)        |
++-------------------+
+```
+
+## Dependencies
+
+### Node.js
+- pptxgenjs: PowerPoint generation
+- playwright: Browser rendering
+- sharp: Image processing
+
+### Python
+- markitdown: Markdown conversion
+- defusedxml: XML parsing
+- pillow: Image processing
+
+### System
+- LibreOffice: PDF/image conversion (soffice)
+- Poppler: PDF to image (pdftoppm)
+
+## Important Notes
+
+- PPTX export is **experimental / unstable** and may require manual cleanup after generation.
+
+1. **Color codes**: No `#` prefix in PptxGenJS
+2. **Fonts**: Web-safe fonts only
+3. **Text**: Only p, h1-h6, ul, ol tags are converted
+4. **Gradients**: Replace CSS gradients with images
+5. **Validation**: Always verify with thumbnails after conversion

package/skills/slides-grab-html/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: slides-grab-html
+description: HTML-mode presentation pipeline usable in Codex and Claude Code. Build semantic slide-XX.html files, generate bespoke hero/accent imagery with slides-grab image, run the design gate, and export. Use when the deck needs editable, searchable, accessible text or when no existing template must be matched pixel-for-pixel.
+metadata:
+  short-description: Semantic HTML slide pipeline with bespoke imagery
+---
+
+# slides-grab HTML Skill
+
+Build semantic `slide-XX.html` files where text is real HTML (selectable, editable, accessible) and imagery is generated as supporting accent/hero assets — **never** as whole-slide rasters. Use this pipeline when the user wants a deck they can edit, when slides contain charts or diagrams, or when no existing template demands pixel-perfect visual matching.
+
+## Mode signal
+The plan stage records `mode: html` in `slide-outline.md`. If no mode is recorded, default to this pipeline.
+
+## Bespoke imagery rule
+- Use `slides-grab image` to generate individual hero/accent images that sit *beside* or *behind* semantic text inside an HTML slide. The generated image is a supporting visual — text and layout stay in HTML/CSS.
+- A bespoke image prompt describes **the accent visual only** — the atmospheric mood, the hero illustration, the background texture — not the slide's title, body copy, or layout. Let HTML handle text and layout.
+- Good prompt: *"Atmospheric dawn horizon, cyan and silver tones, dreamy Y2K mood, no text, 16:9"* — describes a hero background.
+- If you instead need the generated image to BE the whole slide (title, body, layout burned into the raster), use the image-native pipeline (`../slides-grab-image/SKILL.md`) — semantic HTML is the wrong tool for that.
+
+## Workflow
+
+### Stage 1 — Plan
+Use the installed **slides-grab-plan** skill.
+1. Take topic, audience, and tone.
+2. Run `slides-grab list-styles`, shortlist 2–3 bundled styles, get explicit approval. Optionally offer `slides-grab preview-styles`. If none fit, propose a custom direction. If the user provides a reference template/PDF/PPTX for color tokens only (not pixel-perfect matching), import it with `slides-grab import-template` and record `style: template-pack` — the template pack supplies design tokens, but slides stay semantic HTML.
+3. Record `mode: html` in `slide-outline.md` meta.
+4. Present outline, revise until approved.
+
+### Stage 2 — Design
+Use the installed **slides-grab-design** skill.
+1. Read approved `slide-outline.md`, load the style spec (`src/design-styles-data.js` for bundled ids, `slides-grab show-design` for `DESIGN.slides.md`, or `.slides-grab/template-pack.json` for imported packs).
+2. Write a visual thesis, content plan, system declaration, and design tokens before generating slides.
+3. Generate `slide-XX.html` semantic HTML files with 2-digit numbering in `--slides-dir`.
+4. **Bespoke imagery**: when a slide needs a hero/accent image, run `slides-grab image --prompt "<accent-visual prompt>" --slides-dir <path>`. The default codex provider reuses the local Codex ChatGPT login (`~/.codex/auth.json` — run `codex login` once; no API key required). Save under `<slides-dir>/assets/`. To guide the style, pass reference images with `--reference <path>` (repeatable). Optional providers: `--provider openai` (OpenAI gpt-image-2 via `OPENAI_API_KEY`), `--provider nano-banana` (Google `gemini-3-pro-image-preview` via `GOOGLE_API_KEY`/`GEMINI_API_KEY`, supports `--image-size 2K|4K`). If credentials are unavailable, fall back to web search + download into `<slides-dir>/assets/`.
+5. **Diagrams**: for complex diagrams (architecture, workflows, relationship maps), use `tldraw` via `slides-grab tldraw`, store under `<slides-dir>/assets/`.
+6. **Charts**: default to Chart.js (`<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>`), start from `templates/chart.html`, keep `animation: false`, `responsive: true`, `maintainAspectRatio: false`, wrap `<canvas>` in a stable container. `slides-grab validate` reports `empty-canvas` for unpainted canvases.
+7. **Video**: store under `<slides-dir>/assets/`, prefer `poster="./assets/<file>"`. Use `slides-grab fetch-video` or `yt-dlp` for web sources.
+8. **Icons**: prefer Lucide before emoji.
+9. Run `slides-grab validate --slides-dir <path>`. Auto-fix failures until it passes.
+10. Run the design gate (`../slides-grab-design/references/design-gate.md`): capture PNG evidence, run Pass A (System Contract) + Pass B (Audience Impact), synthesize verdict. Resolve all Critical findings, re-render, re-review until `Proceed`. Record with `slides-grab design-gate --slides-dir <path> --verdict proceed --pass-a-report <a.md> --pass-b-report <b.md>`.
+11. Launch the HTML editor: `slides-grab edit --slides-dir <path>`. For chart decks, also run `slides-grab build-viewer` and confirm charts render in `viewer.html`.
+
+### Stage 3 — Export
+Use the installed **slides-grab-export** skill. Requires a fresh `Proceed` gate receipt.
+1. Widescreen → `slides-grab pdf --slides-dir <path> --output <name>.pdf`.
+2. Per-slide PNG → `slides-grab png --slides-dir <path> --output-dir <path>/out-png --resolution 2160p`.
+3. Card-news → `slides-grab png --slide-mode card-news` (see `../slides-grab-card-news`).
+4. PPTX/Figma (experimental / unstable) → `slides-grab convert` / `slides-grab figma`.
+
+## Rules
+- Keep slide size 720pt × 405pt.
+- Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`). Never put text directly in `<div>`/`<span>`.
+- Backgrounds only on `<div>`; text only in semantic tags.
+- No CSS gradients — use flat fills; rasterize gradients to PNG with Sharp if needed.
+- Put local images/videos under `<slides-dir>/assets/`, reference as `./assets/<file>`.
+- Allow `data:` URLs when a slide must be self-contained; never leave remote `http(s)://` image URLs in saved HTML.
+- Prefer Lucide for iconography; avoid emoji unless the brief explicitly asks.
+- Keep body copy ≥14pt on a 720pt × 405pt slide; 10pt absolute floor.
+- Avoid AI slop tropes (aggressive gradient backgrounds, left-border accent cards, SVG-drawn imagery, generic font stacks, generic 3×2 icon-plus-blurb grids).
+- Do not present slides for review until `slides-grab validate` passes.
+- Do not advance to export while any Critical design-gate finding is unresolved.
+
+## Reference
+- `../slides-grab-plan/SKILL.md` and `../slides-grab-plan/references/`
+- `../slides-grab-design/SKILL.md` and `../slides-grab-design/references/`
+- `../slides-grab-export/SKILL.md` and `../slides-grab-export/references/`