npm - @ohos-ports/slides-grab - Versions diffs - 1.5.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/LICENSE +21 -0
package/README-ko.md +292 -0
package/README.md +301 -0
package/bin/ohos-postinstall.cjs +118 -0
package/bin/ppt-agent.js +620 -0
package/convert.cjs +20 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/glib-2.0/include/glibconfig.h +220 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/index.js +1 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/libexpat.so +0 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/libffi.so +0 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/libjpeg.so +0 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/libpcre2-8.so.0 +0 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips-cpp.so.42.20.3 +0 -0
package/native/@img/sharp-libvips-openharmony-arm64/lib/libvips.so.42.20.3 +0 -0
package/native/@img/sharp-libvips-openharmony-arm64/package.json +13 -0
package/native/@img/sharp-openharmony-arm64/lib/sharp-openharmony-arm64.node +0 -0
package/native/@img/sharp-openharmony-arm64/package.json +16 -0
package/package.json +95 -0
package/runtimes/claude-code/agents/design-critic-agent.md +23 -0
package/runtimes/codex/agents/slides-grab-design-critic.md +22 -0
package/scripts/build-viewer.js +444 -0
package/scripts/design-gate.js +258 -0
package/scripts/download-video.js +213 -0
package/scripts/editor-server.js +1167 -0
package/scripts/figma-export.js +169 -0
package/scripts/generate-image.js +116 -0
package/scripts/generate-images.js +164 -0
package/scripts/html2pdf.js +822 -0
package/scripts/html2png.js +246 -0
package/scripts/html2pptx.js +162 -0
package/scripts/import-template.js +86 -0
package/scripts/install-runtime.js +216 -0
package/scripts/render-tldraw.js +44 -0
package/scripts/validate-slides.js +221 -0
package/skills/slides-grab/SKILL.md +65 -0
package/skills/slides-grab/references/presentation-workflow-reference.md +61 -0
package/skills/slides-grab-card-news/SKILL.md +35 -0
package/skills/slides-grab-design/SKILL.md +88 -0
package/skills/slides-grab-design/references/beautiful-slide-defaults.md +88 -0
package/skills/slides-grab-design/references/design-gate.md +349 -0
package/skills/slides-grab-design/references/design-rules.md +76 -0
package/skills/slides-grab-design/references/design-system-full.md +568 -0
package/skills/slides-grab-design/references/detailed-design-rules.md +70 -0
package/skills/slides-grab-export/SKILL.md +55 -0
package/skills/slides-grab-export/references/export-rules.md +27 -0
package/skills/slides-grab-export/references/html2pptx.md +627 -0
package/skills/slides-grab-export/references/ooxml.md +427 -0
package/skills/slides-grab-export/references/pptx-skill-reference.md +189 -0
package/skills/slides-grab-html/SKILL.md +67 -0
package/skills/slides-grab-image/SKILL.md +82 -0
package/skills/slides-grab-plan/SKILL.md +68 -0
package/skills/slides-grab-plan/references/design-md-to-slides-conversion.md +135 -0
package/skills/slides-grab-plan/references/outline-format.md +47 -0
package/skills/slides-grab-plan/references/plan-workflow-reference.md +140 -0
package/src/codex-imagen.js +182 -0
package/src/design-diversity-data.js +6932 -0
package/src/design-gate-report.js +244 -0
package/src/design-gate-state.js +329 -0
package/src/design-import.js +164 -0
package/src/design-md-parser.js +415 -0
package/src/design-styles-data.js +1928 -0
package/src/design-styles.js +209 -0
package/src/editor/codex-edit.js +584 -0
package/src/editor/edit-subprocess.js +170 -0
package/src/editor/editor-codex-prompt.md +50 -0
package/src/editor/editor.html +1785 -0
package/src/editor/js/editor-bbox.js +332 -0
package/src/editor/js/editor-chat.js +56 -0
package/src/editor/js/editor-direct-edit.js +238 -0
package/src/editor/js/editor-dom.js +59 -0
package/src/editor/js/editor-init.js +405 -0
package/src/editor/js/editor-navigation.js +54 -0
package/src/editor/js/editor-select.js +558 -0
package/src/editor/js/editor-send.js +175 -0
package/src/editor/js/editor-sse.js +163 -0
package/src/editor/js/editor-state.js +41 -0
package/src/editor/js/editor-type.js +71 -0
package/src/editor/js/editor-utils.js +167 -0
package/src/editor/js/model-registry.js +37 -0
package/src/editor/screenshot.js +82 -0
package/src/export-resolution.cjs +68 -0
package/src/figma.js +71 -0
package/src/html2pptx-scale.cjs +120 -0
package/src/html2pptx.cjs +1262 -0
package/src/image-contract.js +329 -0
package/src/image-native.js +468 -0
package/src/nano-banana.js +841 -0
package/src/ohos-browser-bridge.cjs +272 -0
package/src/pptx-raster-export.cjs +299 -0
package/src/resolve.js +110 -0
package/src/slide-mode.cjs +72 -0
package/src/template-fidelity.js +267 -0
package/src/template-import.js +505 -0
package/src/template-layout.js +261 -0
package/src/template-pack.js +255 -0
package/src/tldraw/render.js +473 -0
package/src/validation/cli.js +120 -0
package/src/validation/core.js +1023 -0
package/templates/chart.html +121 -0
package/templates/closing.html +54 -0
package/templates/content.html +50 -0
package/templates/contents.html +60 -0
package/templates/cover.html +64 -0
package/templates/custom/.gitkeep +0 -0
package/templates/custom/README.md +7 -0
package/templates/design-styles/README.md +20 -0
package/templates/design-styles/preview.html +4438 -0
package/templates/diagram-tldraw.html +56 -0
package/templates/diagram.html +98 -0
package/templates/quote.html +31 -0
package/templates/section-divider.html +43 -0
package/templates/split-layout.html +43 -0
package/templates/statistics.html +55 -0
package/templates/team.html +49 -0
package/templates/timeline.html +59 -0

package/skills/slides-grab-design/references/design-system-full.md ADDED Viewed

@@ -0,0 +1,568 @@
+# Design Skill - Professional Presentation Design System
+A skill for designing HTML slides for top-tier business presentations.
+Delivers minimal, refined design with professional typography and precise layouts.
+---
+## Core Design Philosophy
+### 1. Less is More
+- Remove unnecessary decorative elements
+- Content takes center stage
+- Leverage whitespace aggressively
+- Clear visual hierarchy
+### 2. Typography-Driven Design
+- Pretendard as the default font
+- Font size contrast creates visual impact
+- Fine-tuned letter-spacing and line-height
+- Weight variations for emphasis
+### 3. Strategic Color Usage
+- Limited color palette (2-3 colors)
+- Monotone base + accent color
+- Background color sets the mood
+- High contrast for readability
+---
+## Base Settings
+### Slide Size (16:9 default)
+```html
+<body style="width: 720pt; height: 405pt;">
+```
+### Supported Aspect Ratios
+| Ratio | Size | Use Case |
+|-------|------|----------|
+| 16:9 | 720pt x 405pt | Default, monitors/screens |
+| 4:3 | 720pt x 540pt | Legacy projectors |
+| 16:10 | 720pt x 450pt | MacBook |
+### Default Font Stack
+```css
+font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+```
+### Pretendard Webfont CDN
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+```
+---
+## Typography System
+### Font Size Scale
+| Purpose | Size | Weight | Example |
+|---------|------|--------|---------|
+| Hero Title | 72-96pt | 700-800 | Cover main title |
+| Section Title | 48-60pt | 700 | Section divider heading |
+| Slide Title | 32-40pt | 600-700 | Slide heading |
+| Subtitle | 20-24pt | 500 | Subtitle, description |
+| Body | 16-20pt | 400 | Body text |
+| Caption | 12-14pt | 400 | Caption, source |
+| Label | 10-12pt | 500-600 | Badge, tag |
+### Letter Spacing
+```css
+/* Large titles: tight */
+letter-spacing: -0.02em;
+/* Medium titles */
+letter-spacing: -0.01em;
+/* Body: default */
+letter-spacing: 0;
+/* Captions, labels: slightly wider */
+letter-spacing: 0.02em;
+```
+### Line Height
+```css
+/* Titles */
+line-height: 1.2;
+/* Body text */
+line-height: 1.6 - 1.8;
+/* Single-line text */
+line-height: 1;
+```
+---
+## Color Palette System
+All color palettes are now bundled as design styles accessible via `slides-grab list-styles`. The five original palettes are styles 31–35:
+- **executive-minimal** — Refined business (warm white + black accent)
+- **sage-professional** — Calm and trustworthy (sage green tones)
+- **modern-dark** — High-impact dark (pure dark + white text)
+- **corporate-blue** — Traditional business (white + blue accent)
+- **warm-neutral** — Warm and approachable (cream + terracotta)
+Run `slides-grab list-styles` to browse all 95 bundled styles, or design a fully custom palette when none fit.
+---
+## Layout System
+### Spacing Standards (padding/margin)
+```css
+/* Full slide padding */
+padding: 48pt;
+/* Section spacing */
+gap: 32pt;
+/* Element spacing */
+gap: 16pt;
+/* Text block internal spacing */
+gap: 8pt;
+```
+### Grid System
+```css
+/* 2-column layout */
+display: grid;
+grid-template-columns: 1fr 1fr;
+gap: 32pt;
+/* 3-column layout */
+grid-template-columns: repeat(3, 1fr);
+/* Asymmetric layout (40:60) */
+grid-template-columns: 2fr 3fr;
+/* Asymmetric layout (30:70) */
+grid-template-columns: 1fr 2.3fr;
+```
+---
+## Design Components
+### 1. Badge/Tag
+```html
+<p style="
+  display: inline-block;
+  padding: 6pt 14pt;
+  border: 1px solid #1a1a1a;
+  border-radius: 20pt;
+  font-size: 10pt;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+">PRESENTATION</p>
+```
+### 2. Section Number
+```html
+<p style="
+  display: inline-block;
+  padding: 4pt 12pt;
+  background: #1a1a1a;
+  color: #ffffff;
+  border-radius: 4pt;
+  font-size: 10pt;
+  font-weight: 600;
+">SECTION 1</p>
+```
+### 3. Logo Area
+```html
+<div style="display: flex; align-items: center; gap: 8pt;">
+  <div style="
+    width: 20pt;
+    height: 20pt;
+    background: #1a1a1a;
+    border-radius: 4pt;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  ">
+    <p style="color: #fff; font-size: 12pt;">*</p>
+  </div>
+  <p style="font-size: 12pt; font-weight: 600;">LogoName</p>
+</div>
+```
+### 4. Icon Button
+```html
+<div style="
+  width: 32pt;
+  height: 32pt;
+  border: 1px solid #1a1a1a;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+">
+  <p style="font-size: 14pt;">&#x2197;</p>
+</div>
+```
+### 5. Divider Line
+```html
+<div style="
+  width: 100%;
+  height: 1pt;
+  background: #d4d4d0;
+"></div>
+```
+### 6. Info Grid
+```html
+<div style="display: flex; gap: 48pt;">
+  <div>
+    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Contact</p>
+    <p style="font-size: 12pt; font-weight: 500;">334556774</p>
+  </div>
+  <div>
+    <p style="font-size: 10pt; color: #999; margin-bottom: 4pt;">Date</p>
+    <p style="font-size: 12pt; font-weight: 500;">March 2025</p>
+  </div>
+</div>
+```
+---
+## Slide Templates
+### 1. Cover Slide
+- Template file: `templates/cover.html`
+### 2. Table of Contents (Contents)
+- Template file: `templates/contents.html`
+### 3. Section Divider
+- Template file: `templates/section-divider.html`
+### 4. Content Slide
+- Template file: `templates/content.html`
+### 5. Statistics/Data Slide
+- Template file: `templates/statistics.html`
+### 6. Image + Text (Split Layout)
+- Template file: `templates/split-layout.html`
+### 7. Team Introduction
+- Template file: `templates/team.html`
+### 8. Quote Slide
+- Template file: `templates/quote.html`
+### 9. Timeline Slide
+- Template file: `templates/timeline.html`
+### 10. Closing Slide
+- Template file: `templates/closing.html`
+### 11. Chart Slide
+- Template file: `templates/chart.html`
+### 12. Diagram Slide
+- Template file: `templates/diagram.html`
+### 13. Tldraw Diagram Slide
+- Template file: `templates/diagram-tldraw.html`
+- Use this when the slide needs a complex diagram that will be easier to author in `tldraw` and safer to export as a local image asset.
+### Custom Templates
+- Custom template directory: `templates/custom/`
+- Users can add template files as drop-in for reuse.
+---
+## Advanced Design Patterns
+### Asymmetric Layout
+Eye-catching compositions
+```css
+/* Golden ratio */
+grid-template-columns: 1fr 1.618fr;
+/* Extreme asymmetry */
+grid-template-columns: 1fr 3fr;
+```
+### Overlay Text
+Text placed over images
+```html
+<div style="position: relative;">
+  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.5);"></div>
+  <div style="position: relative; z-index: 1;">
+    <h2 style="color: #fff;">Overlay Text</h2>
+  </div>
+</div>
+```
+### Gradient Overlay
+```html
+<div style="
+  background: linear-gradient(to right, #1a1a1a 0%, transparent 60%);
+  position: absolute;
+  inset: 0;
+"></div>
+```
+### Card Style
+```html
+<div style="
+  background: #ffffff;
+  border-radius: 12pt;
+  padding: 24pt;
+  box-shadow: 0 2pt 8pt rgba(0,0,0,0.08);
+"></div>
+```
+---
+## Chart / Diagram / Image Library Guide
+### 1. Chart.js (Bar / Line / Pie)
+#### CDN Link
+```html
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+```
+#### Usage Example
+```html
+<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16pt;">
+  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
+    <p style="font-size: 10pt; margin-bottom: 6pt;">Bar Chart</p>
+    <canvas id="barChart" style="width: 100%; height: 120pt;"></canvas>
+  </div>
+  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
+    <p style="font-size: 10pt; margin-bottom: 6pt;">Line Chart</p>
+    <canvas id="lineChart" style="width: 100%; height: 120pt;"></canvas>
+  </div>
+  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
+    <p style="font-size: 10pt; margin-bottom: 6pt;">Pie Chart</p>
+    <canvas id="pieChart" style="width: 100%; height: 120pt;"></canvas>
+  </div>
+</div>
+<script>
+  const labels = ['Q1', 'Q2', 'Q3', 'Q4'];
+  const values = [12, 19, 15, 23];
+  new Chart(document.getElementById('barChart'), {
+    type: 'bar',
+    data: { labels, datasets: [{ data: values, backgroundColor: ['#1f2937', '#2563eb', '#10b981', '#f59e0b'] }] },
+    options: { animation: false, responsive: true, maintainAspectRatio: false }
+  });
+  new Chart(document.getElementById('lineChart'), {
+    type: 'line',
+    data: { labels, datasets: [{ data: values, borderColor: '#2563eb', backgroundColor: '#93c5fd', fill: true }] },
+    options: { animation: false, responsive: true, maintainAspectRatio: false }
+  });
+  new Chart(document.getElementById('pieChart'), {
+    type: 'pie',
+    data: { labels, datasets: [{ data: [35, 28, 22, 15], backgroundColor: ['#2563eb', '#10b981', '#f59e0b', '#ef4444'] }] },
+    options: { animation: false, responsive: true, maintainAspectRatio: false }
+  });
+</script>
+```
+Recommendations:
+- Use `options.animation: false` for stable PPTX conversion.
+- Set explicit width/height on `canvas` elements.
+### 2. Mermaid (Flowchart / Sequence Diagram)
+#### CDN Link
+```html
+<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+```
+#### Usage Example
+```html
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20pt;">
+  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
+    <p style="font-size: 10pt; margin-bottom: 6pt;">Flowchart</p>
+    <pre class="mermaid">
+flowchart LR
+  A[Plan] --> B[Design]
+  B --> C[Review]
+  C --> D[Convert]
+    </pre>
+  </div>
+  <div style="border: 1px solid #e5e5e0; border-radius: 10pt; padding: 10pt;">
+    <p style="font-size: 10pt; margin-bottom: 6pt;">Sequence Diagram</p>
+    <pre class="mermaid">
+sequenceDiagram
+  participant U as User
+  participant A as Agent
+  U->>A: Request slide
+  A->>U: Return HTML
+    </pre>
+  </div>
+</div>
+<script>
+  mermaid.initialize({ startOnLoad: true, securityLevel: 'loose' });
+</script>
+```
+Recommendations:
+- Write Mermaid DSL inside `<pre class="mermaid">`.
+- Fix the diagram container size for stable layout.
+### 3. Inline SVG Icon Guide
+```html
+<div style="display: flex; align-items: center; gap: 8pt;">
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M5 12h14M12 5l7 7-7 7" stroke="#1f2937" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+  </svg>
+  <p style="font-size: 12pt; color: #1f2937;">Next step</p>
+</div>
+```
+Rules:
+- Always specify `viewBox`.
+- Set explicit size via `width`/`height`.
+- Use HEX values with `#` prefix for `stroke`/`fill` colors.
+- Place text outside SVG using `<p>`, `<h1>`-`<h6>` tags.
+### 4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)
+#### Canonical Local Asset Image
+```html
+<img src="./assets/team-photo.png" alt="Team photo" style="width: 220pt; height: 140pt; object-fit: cover;">
+```
+Store the image at `<slides-dir>/assets/team-photo.png`.
+#### Self-Contained Fallback (`data:` URL)
+```html
+<img src="data:image/svg+xml;base64,..." alt="Illustration" style="width: 220pt; height: 140pt; object-fit: cover;">
+```
+#### Remote URL Source (Download Before Saving)
+```html
+<img src="https://images.example.com/hero.png" alt="Hero image" style="width: 220pt; height: 140pt; object-fit: cover;">
+```
+If the image source starts on the web, download it into `<slides-dir>/assets/` and change the saved slide HTML to `./assets/<file>`.
+#### Placeholder (Image Stand-In)
+```html
+<div data-image-placeholder style="width: 220pt; height: 140pt; border: 1px dashed #c7c7c7; background: #f3f4f6; display: flex; align-items: center; justify-content: center;">
+  <p style="font-size: 10pt; color: #6b7280; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;">Image Placeholder</p>
+</div>
+```
+Rules:
+- Always include `alt` on `img` tags.
+- Use `./assets/<file>` as the default image contract for slide HTML.
+- Keep slide assets in `<slides-dir>/assets/`.
+- `data:` URLs are allowed for fully self-contained slides.
+- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
+- Do not use absolute filesystem paths in slide HTML.
+- Do not use non-body `background-image` for content imagery; use `<img>` instead.
+- Use `data-image-placeholder` to reserve space when no image is available yet.
+- Use high-resolution originals and fit with `object-fit`.
+---
+## Text Usage Rules
+### Required Tags
+```html
+<!-- All text MUST be inside these tags -->
+<p>, <h1>-<h6>, <ul>, <ol>, <li>
+<!-- Forbidden - ignored in PowerPoint conversion -->
+<div>text here</div>
+<span>text here</span>
+```
+### Recommended Usage
+```html
+<!-- Good -->
+<h1 style="...">Title</h1>
+<p style="...">Body text</p>
+<!-- Bad -->
+<div style="...">Text directly in div</div>
+```
+---
+## Output and File Structure
+### File Save Rules
+```
+<slides-dir>/   (default: slides/)
+├── slide-01.html  (Cover)
+├── slide-02.html  (Contents)
+├── slide-03.html  (Section Divider)
+├── slide-04.html  (Content)
+├── ...
+└── slide-XX.html  (Closing)
+```
+### File Naming Rules
+- Use 2-digit numbers: `slide-01.html`, `slide-02.html`
+- Name sequentially
+- No special characters or spaces
+---
+## Workflow (Stage 2: Design + Human Review)
+This skill is **Stage 2**. It works from the `slide-outline.md` approved by the user in Stage 1 (plan-skill).
+### Prerequisites
+- `slide-outline.md` must exist and be approved by the user.
+### Steps
+1. **Analyze + Design**: Read `slide-outline.md`, decide theme/layout, generate HTML slides
+2. **Diagram choice**: If a slide needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), prefer `tldraw`. Export the diagram with `slides-grab tldraw` and reference the generated local asset from the slide HTML.
+3. **Validate slides**: After slide generation or edits, automatically run:
+   ```bash
+   slides-grab validate --slides-dir <path>
+   ```
+4. **Auto-fix validation issues**: If validation fails, fix the source HTML/CSS and re-run validation until it passes
+5. **Auto-build viewer**: After validation passes, automatically run:
+   ```bash
+   slides-grab build-viewer --slides-dir <path>
+   ```
+6. **Guide user to review**: Tell the user to check slides in the browser:
+   ```
+   open <slides-dir>/viewer.html
+   ```
+7. **Revision loop**: When the user requests changes to specific slides:
+   - Edit only the relevant HTML file
+   - Re-run `slides-grab validate --slides-dir <path>` and fix any failures
+   - Re-run `slides-grab build-viewer --slides-dir <path>` to rebuild the viewer
+   - Guide user to review again
+8. **Completion**: Repeat the revision loop until the user signals approval for PPTX conversion
+### Absolute Rules
+- **Never start PPTX conversion without approval** — PPTX conversion is the responsibility of `pptx-skill` and requires explicit user approval.
+- **Prefer tldraw for complex diagrams** — Use `slides-grab tldraw` when the slide needs a non-trivial diagram instead of forcing dense diagram geometry into HTML/CSS.
+- **Never skip validation** — Run `slides-grab validate --slides-dir <path>` after generation or edits and fix failures before review.
+- **Never forget to build the viewer** — Run `slides-grab build-viewer --slides-dir <path>` every time slides are generated or modified.
+---
+## Important Notes
+1. **CSS gradients**: Not supported in PowerPoint conversion — replace with background images
+2. **Webfonts**: Always include the Pretendard CDN link
+3. **Image paths**: Use `./assets/<file>` from each `slide-XX.html`; avoid absolute filesystem paths and do not leave remote `http(s)://` image URLs in saved slide HTML
+4. **Colors**: Always include `#` prefix in CSS
+5. **Text rules**: Never place text directly in div/span

package/skills/slides-grab-design/references/detailed-design-rules.md ADDED Viewed

@@ -0,0 +1,70 @@
+## Base Settings
+### Slide Size (16:9 default)
+- Keep slide body at 720pt x 405pt.
+- Use Pretendard as the default font stack.
+- Include the Pretendard webfont CDN link when needed.
+### 4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)
+- Always include alt on img tags.
+- Use `./assets/<file>` as the default image and video contract for slide HTML.
+- Keep slide assets in `<slides-dir>/assets/`.
+- Use `tldraw`-generated assets for complex diagrams whenever possible.
+- Use `slides-grab image --prompt "<prompt>" --slides-dir <path>` with the default codex-imagen provider (reuses Codex CLI ChatGPT login; no API key required) when a slide needs bespoke generated imagery.
+- `data:` URLs are allowed for fully self-contained slides.
+- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
+- Store local videos under `<slides-dir>/assets/`, reference them as `./assets/<file>`, and prefer `poster="./assets/<file>"` for export-friendly thumbnails.
+- If a video starts on YouTube or another supported page, use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly if needed) before saving the slide HTML.
+- Default provider codex-imagen reuses the local Codex ChatGPT login (`~/.codex/auth.json`) — run `codex login` once; **no API key required**. ⚠️ codex-imagen uses an unsupported private Codex backend that may break without notice. Optional alternatives: `--provider openai` (OpenAI gpt-image-2 via `OPENAI_API_KEY`; maps `--aspect-ratio` to the nearest supported OpenAI image size; `--image-size 2K|4K` is Nano Banana-only) or `--provider nano-banana` (Google `gemini-3-pro-image-preview` via `GOOGLE_API_KEY` or `GEMINI_API_KEY`; supports `--image-size 2K|4K`). If credentials are unavailable, fall back to web search + download into `<slides-dir>/assets/`.
+- Do not use absolute filesystem paths in slide HTML.
+- Do not use non-body `background-image` for content imagery; use `<img>` instead.
+- Use `data-image-placeholder` to reserve space when no image is available yet.
+## Text Usage Rules
+- All text must be inside `<p>`, `<h1>`-`<h6>`, `<ul>`, `<ol>`, or `<li>`.
+- Never place text directly in `<div>` or `<span>`.
+## Typography Scale Rules
+- Body copy minimum is 14pt on a 720pt × 405pt slide; prefer 16-20pt so copy reads cleanly at presentation distance and on PDF export.
+- Absolute floor for captions, labels, footnotes, and meta text is 10pt. Never render any text below 10pt.
+- Display and title text should scale well above body copy — prefer 36pt or larger so the slide's main takeaway reads in 3-5 seconds.
+- If content does not fit at the minimum scale, cut content. Do not shrink type to accommodate more.
+- Keep at most two typefaces across the deck. One display/headline face plus one body face is enough.
+## Color Usage Rules
+- Pull every color from the approved style spec in `src/design-styles-data.js` or the user-provided brand tokens. Do not invent fresh standalone hex colors mid-slide.
+- If the approved palette cannot cover a specific slide, extend it harmonically with `oklch()` — derive the new color from the existing accent, surface, or background — rather than picking a fresh hex from scratch.
+- Keep one accent color per deck. Two background colors max across the entire deck, used to introduce rhythm between section dividers and content slides.
+- Every CSS color must keep the `#` prefix and survive raster export to PPTX/PDF; avoid non-sRGB values that will flatten unexpectedly.
+## Icon Usage Rules
+- Prefer Lucide as the default icon library for slide UI elements, callouts, and supporting visuals.
+- Do not default to emoji for iconography; reserve emoji for cases where the brief explicitly wants a playful or native-emoji tone.
+- Keep icon sizing, stroke weight, and color aligned with the deck's approved design tokens.
+## Chart Usage Rules
+- Prefer Chart.js for bar, line, pie, doughnut, and mixed quantitative slides.
+- Start from `templates/chart.html` when a chart slide needs a proven structure.
+- Keep the `<canvas>` in a stable wrapper and set Chart.js options to `animation: false`, `responsive: true`, and `maintainAspectRatio: false`.
+- Match chart colors to the approved style tokens; avoid rainbow palettes unless the data categories require distinct hues.
+- Direct-label the key data point or keep legends short. Do not let chart legends compete with the slide headline.
+- `slides-grab validate` treats a visible unpainted canvas as `empty-canvas`; fix script loading, target ids, sizing, or data before review/export.
+## Workflow (Stage 2: Design + Human Review)
+- After slide generation or edits, run `slides-grab validate --slides-dir <path>`.
+- After validation passes, run `slides-grab build-viewer --slides-dir <path>`.
+- Edit only the relevant HTML file during revision loops.
+- When the brief explicitly calls for an image, the user requests one, or the slide clearly benefits from it, prefer `slides-grab image` before falling back to remote image sourcing.
+- Prefer `slides-grab tldraw` + local exported assets for architecture, workflow, relationship, and other complex diagrams.
+- For Chart.js decks, open the generated viewer and confirm charts render inside `viewer.html`, not only as standalone slide files.
+- Keep local videos and their poster thumbnails together under `<slides-dir>/assets/`.
+- Never start PPTX conversion without explicit approval.
+- Never forget to build the viewer after slide changes.
+- Do not persist runtime-only editor/viewer injections in saved slide HTML.
+## Important Notes
+- CSS gradients may not export cleanly to all formats; prefer solid colors or background images when possible.
+- Always include the Pretendard CDN link.
+- Use `./assets/<file>` from each `slide-XX.html` for local images and videos, and avoid absolute filesystem paths.
+- Always include `#` prefix in CSS colors.
+- Never place text directly in `div`/`span`.

package/skills/slides-grab-export/SKILL.md ADDED Viewed

@@ -0,0 +1,55 @@
+---
+name: slides-grab-export
+description: Stage 3 conversion skill usable in Codex and Claude Code. Convert approved HTML slides to PDF or per-slide PNG reliably, and to experimental / unstable PPTX/Figma outputs on a best-effort basis.
+metadata:
+  short-description: Convert slides and run conversion checks
+---
+# slides-grab Export Skill
+Use this only after the user approves design output **and the Stage 2 design gate verdict is `Proceed`** (zero unresolved Critical findings — see `../slides-grab-design/references/design-gate.md`). PDF, PPTX, and Figma exports require a fresh `slides-grab design-gate` Proceed receipt for the current slide files.
+## Goal
+Convert reviewed slide HTML into PDF or per-slide PNG reliably, and into experimental / unstable PPTX/Figma outputs on a best-effort basis.
+## Inputs
+- Approved `<slides-dir>/slide-*.html`
+- Optional output path settings
+## Outputs
+- Presentation artifact (`.pdf`, `.png` per slide, or `.pptx`)
+## Workflow
+1. Confirm user approval for conversion **and that the Stage 2 design gate passed** with verdict `Proceed`. If any **Critical** design-gate finding is still unresolved, refuse to export — return to Stage 2, fix the Critical issue, re-run the gate, record Proceed with `slides-grab design-gate`, and only then convert.
+2. Pick the right primary target:
+   - Card-news / Instagram-style decks → `slides-grab png --slides-dir <path> --slide-mode card-news --resolution 2160p` (see `slides-grab-card-news`).
+   - Widescreen slide decks → `slides-grab pdf --slides-dir <path> --output <name>.pdf`.
+3. When per-slide raster output is needed (card news, social posts, thumbnails):
+   - `slides-grab png --slides-dir <path> --output-dir <path>/out-png --resolution 2160p`
+   - Add `--slide-mode card-news` for 1:1 cards.
+4. If the user also wants a PDF deck:
+   - `slides-grab pdf --slides-dir <path> --output <name>.pdf`
+   - Add `--slide-mode card-news` when the deck is square.
+5. For decks with Chart.js or other `<canvas>` charts, confirm `slides-grab validate --slides-dir <path>` passes without `empty-canvas`, then build/open `viewer.html` once before export. Chart.js charts should use disabled animation so PDF/PNG capture sees the final painted state.
+6. If the user wants PPTX (experimental / unstable):
+   - Default visual-fidelity export: `slides-grab convert --slides-dir <path> --output <name>.pptx --engine raster`
+   - Editable-text export: `slides-grab convert --slides-dir <path> --output <name>-editable.pptx --engine text`
+   - `--resolution` can only be used with the raster engine. The text engine requires semantic text tags, rasterizes canvas/SVG visuals, and may reject unsupported HTML/CSS.
+7. If the user wants Figma-importable PPTX (experimental / unstable):
+   - `slides-grab figma --slides-dir <path> --output <name>-figma.pptx`
+8. Report success/failure with actionable errors.
+## Rules
+- Do not export while any **Critical** design-gate finding is unresolved (`../slides-grab-design/references/design-gate.md`). The design gate is a hard precondition for this stage, and `slides-grab pdf`, `slides-grab convert`, and `slides-grab figma` block if the latest receipt is missing or stale.
+- Do not modify slide content during conversion stage unless explicitly requested.
+- If conversion fails, diagnose and fix root causes in source HTML/CSS.
+- For chart-heavy decks, treat a blank exported chart as a source rendering bug first: re-run validation, inspect `empty-canvas`, and verify the same slide in `viewer.html` before retrying PDF/PNG/PPTX export.
+- Always tell the user that PPTX and Figma export are experimental / unstable and may require manual cleanup.
+- Use the packaged CLI and bundled references only; do not depend on unpublished agent-specific files.
+## Reference
+For detailed conversion behavior and tools, use:
+- `references/export-rules.md`
+- `references/pptx-skill-reference.md` — archived full PPTX workflow guidance
+- `references/html2pptx.md` — archived converter usage guide
+- `references/ooxml.md` — archived OOXML reference