slides-grab 1.0.0 → 1.1.2

package/skills/{ppt-presentation-skill → slides-grab}/SKILL.md

@@ -1,11 +1,11 @@
 ---
-name: ppt-presentation-skill
-description: End-to-end presentation workflow for Codex. Use when making a full presentation from scratch — planning, designing slides, editing, and exporting.
+name: slides-grab
+description: End-to-end presentation workflow for Codex. Use when making a full presentation from scratch — planning, designing slides, editing, and exporting. PDF is preferred; PPTX/Figma export is experimental / unstable.
 metadata:
-  short-description: Full pipeline from topic to PPTX/PDF
+  short-description: Full pipeline from topic to PDF + experimental / unstable PPTX/Figma export
 ---
 
-# Presentation Skill (Codex) - Full Workflow Orchestrator
+# slides-grab Skill (Codex) - Full Workflow Orchestrator
 
 Guides you through the complete presentation pipeline from topic to exported file.
 
@@ -15,7 +15,7 @@ Guides you through the complete presentation pipeline from topic to exported fil
 
 ### Stage 1 — Plan
 
-Use **ppt-plan-skill** (`skills/ppt-plan-skill/SKILL.md`).
+Use **slides-grab-plan** (`skills/slides-grab-plan/SKILL.md`).
 
 1. Take user's topic, audience, and tone.
 2. Create `slide-outline.md`.
@@ -26,23 +26,25 @@ Use **ppt-plan-skill** (`skills/ppt-plan-skill/SKILL.md`).
 
 ### Stage 2 — Design
 
-Use **ppt-design-skill** (`skills/ppt-design-skill/SKILL.md`).
+Use **slides-grab-design** (`skills/slides-grab-design/SKILL.md`).
 
 1. Read approved `slide-outline.md`.
 2. Generate `slide-*.html` files in the slides workspace (default: `slides/`).
-3. Build the viewer: `node scripts/build-viewer.js --slides-dir <path>`
-4. Present viewer to user for review.
-5. Revise individual slides based on feedback.
-6. Optionally launch the visual editor: `slides-grab edit --slides-dir <path>`
+3. Run validation: `slides-grab validate --slides-dir <path>`
+4. If validation fails, automatically fix the slide HTML/CSS until validation passes.
+5. Build the viewer: `node scripts/build-viewer.js --slides-dir <path>`
+6. Present viewer to user for review.
+7. Revise individual slides based on feedback, then re-run validation and rebuild the viewer.
+8. Optionally launch the visual editor: `slides-grab edit --slides-dir <path>`
 
 **Do not proceed to Stage 3 without approval.**
 
 ### Stage 3 — Export
 
-Use **ppt-pptx-skill** (`skills/ppt-pptx-skill/SKILL.md`).
+Use **slides-grab-export** (`skills/slides-grab-export/SKILL.md`).
 
 1. Confirm user wants conversion.
-2. Export to PPTX: `slides-grab convert --slides-dir <path> --output <name>.pptx`
+2. Export to PPTX: `slides-grab convert --slides-dir <path> --output <name>.pptx` (**experimental / unstable**)
 3. Export to PDF (if requested): `slides-grab pdf --slides-dir <path> --output <name>.pdf`
 4. Report results.
 
@@ -54,4 +56,5 @@ Use **ppt-pptx-skill** (`skills/ppt-pptx-skill/SKILL.md`).
 2. **Get explicit user approval** before advancing to the next stage.
 3. **Read each stage's SKILL.md** for detailed rules — this skill only orchestrates.
 4. **Use `decks/<deck-name>/`** as the slides workspace for multi-deck projects.
-5. For full design constraints, refer to `.claude/skills/design-skill/SKILL.md`.
+5. **Call out export risk clearly**: PPTX and Figma export are experimental / unstable and must be described as best-effort output.
+6. For full design constraints, refer to `.claude/skills/design-skill/SKILL.md`.

package/skills/{ppt-design-skill → slides-grab-design}/SKILL.md

@@ -1,11 +1,11 @@
 ---
-name: ppt-design-skill
+name: slides-grab-design
 description: Stage 2 design skill for Codex. Generate and iterate slide-XX.html files in the selected slides workspace.
 metadata:
   short-description: Build HTML slides and viewer for review loop
 ---
 
-# PPT Design Skill (Codex)
+# slides-grab Design Skill (Codex)
 
 Use this after `slide-outline.md` is approved.
 
@@ -24,13 +24,20 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 ## Workflow
 1. Read approved `slide-outline.md`.
 2. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
-3. Run `node scripts/build-viewer.js --slides-dir <path>` after generation or edits.
-4. Iterate on user feedback by editing only requested slide files.
-5. Keep revising until user approves conversion stage.
+3. Run `slides-grab validate --slides-dir <path>` after generation or edits.
+4. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
+5. Run `node scripts/build-viewer.js --slides-dir <path>` only after validation passes.
+6. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.
+7. Keep revising until user approves conversion stage.
 
 ## Rules
 - Keep slide size 720pt x 405pt.
 - Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).
+- Put local images under `<slides-dir>/assets/` and reference them as `./assets/<file>`.
+- Allow `data:` URLs when the slide must be fully self-contained.
+- Treat remote `https://` images as best-effort only, and never use absolute filesystem paths.
+- Prefer `<img>` for slide imagery and `data-image-placeholder` when no final asset exists.
+- Do not present slides for review until `slides-grab validate --slides-dir <path>` passes.
 - Do not start conversion before approval.
 
 ## Reference

package/skills/{ppt-pptx-skill → slides-grab-export}/SKILL.md

@@ -1,16 +1,16 @@
 ---
-name: ppt-pptx-skill
-description: Stage 3 conversion skill for Codex. Convert approved HTML slides to PPTX/PDF and validate artifacts.
+name: slides-grab-export
+description: Stage 3 conversion skill for Codex. Convert approved HTML slides to PDF and to experimental / unstable PPTX/Figma outputs, then validate artifacts.
 metadata:
   short-description: Convert slides and run conversion checks
 ---
 
-# PPTX Conversion Skill (Codex)
+# slides-grab Export Skill (Codex)
 
 Use this only after the user approves design output.
 
 ## Goal
-Convert reviewed slide HTML into PPTX (and optional PDF) reliably.
+Convert reviewed slide HTML into PDF reliably, and into experimental / unstable PPTX/Figma outputs on a best-effort basis.
 
 ## Inputs
 - Approved `<slides-dir>/slide-*.html`
@@ -22,8 +22,8 @@ Convert reviewed slide HTML into PPTX (and optional PDF) reliably.
 ## Workflow
 1. Confirm user approval for conversion.
 2. Run conversion command:
-   - `node .claude/skills/pptx-skill/scripts/html2pptx.js`
-   - or `slides-grab convert --slides-dir <path>`
+   - `node .claude/skills/pptx-skill/scripts/html2pptx.js` (**experimental / unstable**)
+   - or `slides-grab convert --slides-dir <path>` (**experimental / unstable**)
 3. If requested, run PDF conversion:
    - `slides-grab pdf --slides-dir <path>`
 4. Report success/failure with actionable errors.
@@ -31,6 +31,7 @@ Convert reviewed slide HTML into PPTX (and optional PDF) reliably.
 ## Rules
 - Do not modify slide content during conversion stage unless explicitly requested.
 - If conversion fails, diagnose and fix root causes in source HTML/CSS.
+- Always tell the user that PPTX and Figma export are experimental / unstable and may require manual cleanup.
 
 ## Reference
 For detailed conversion behavior and tools, use:

package/skills/{ppt-plan-skill → slides-grab-plan}/SKILL.md

@@ -1,11 +1,11 @@
 ---
-name: ppt-plan-skill
+name: slides-grab-plan
 description: Stage 1 planning skill for Codex. Build and iterate slide-outline.md until explicit user approval.
 metadata:
   short-description: Create and revise slide outline before design stage
 ---
 
-# PPT Plan Skill (Codex)
+# slides-grab Plan Skill (Codex)
 
 Use this when the user asks to start a new presentation from scratch.
 

package/src/editor/codex-edit.js

@@ -1,9 +1,60 @@
+import { readFileSync } from 'node:fs';
 import { mkdir } from 'node:fs/promises';
-import { dirname } from 'node:path';
+import { dirname, join } from 'node:path';
 import sharp from 'sharp';
 
+import { getPackageRoot } from '../resolve.js';
+
 export const SLIDE_SIZE = { width: 960, height: 540 };
 
+const PPT_DESIGN_SKILL_PATH = join(getPackageRoot(), 'skills', 'slides-grab-design', 'SKILL.md');
+const DETAILED_DESIGN_SKILL_PATH = join(getPackageRoot(), '.claude', 'skills', 'design-skill', 'SKILL.md');
+const DETAILED_DESIGN_SECTION_HEADINGS = [
+  '## Base Settings',
+  '### 4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)',
+  '## Text Usage Rules',
+  '## Workflow (Stage 2: Design + Human Review)',
+  '## Important Notes',
+];
+const DETAILED_DESIGN_SKILL_FALLBACK = [
+  '## 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 contract for slide HTML.',
+  '- Keep slide assets in <slides-dir>/assets/.',
+  '- data: URLs are allowed for fully self-contained slides.',
+  '- Remote https:// URLs are allowed but non-deterministic and fallback only.',
+  '- 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>.',
+  '',
+  '## Workflow (Stage 2: Design + Human Review)',
+  '- After slide generation or edits, run node scripts/build-viewer.js --slides-dir <path>.',
+  '- Edit only the relevant HTML file during revision loops.',
+  '- Never start PPTX conversion without explicit approval.',
+  '- Never forget to rebuild the viewer after slide changes.',
+  '',
+  '## Important Notes',
+  '- CSS gradients are not supported in PowerPoint conversion; replace them with background images.',
+  '- Always include the Pretendard CDN link.',
+  '- Use ./assets/<file> from each slide-XX.html and avoid absolute filesystem paths.',
+  '- Always include # prefix in CSS colors.',
+  '- Never place text directly in div/span.',
+].join('\n');
+
+let cachedPptDesignSkillPrompt = null;
+let cachedDetailedDesignSkillPrompt = null;
+
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -77,6 +128,67 @@ function formatTargets(targets) {
   });
 }
 
+export function getPptDesignSkillPrompt() {
+  if (cachedPptDesignSkillPrompt !== null) {
+    return cachedPptDesignSkillPrompt;
+  }
+
+  try {
+    cachedPptDesignSkillPrompt = readFileSync(PPT_DESIGN_SKILL_PATH, 'utf8').trim();
+  } catch {
+    cachedPptDesignSkillPrompt = '';
+  }
+
+  return cachedPptDesignSkillPrompt;
+}
+
+function extractMarkdownSection(markdown, heading) {
+  const lines = markdown.split('\n');
+  const startIndex = lines.findIndex((line) => line.trim() === heading.trim());
+  if (startIndex === -1) {
+    return '';
+  }
+
+  const levelMatch = heading.match(/^(#+)\s/);
+  const headingLevel = levelMatch ? levelMatch[1].length : null;
+  if (!headingLevel) {
+    return '';
+  }
+
+  const extracted = [lines[startIndex]];
+  for (let i = startIndex + 1; i < lines.length; i += 1) {
+    const line = lines[i];
+    const nextHeadingMatch = line.match(/^(#+)\s/);
+    if (nextHeadingMatch && nextHeadingMatch[1].length <= headingLevel) {
+      break;
+    }
+    extracted.push(line);
+  }
+
+  return extracted.join('\n').trim();
+}
+
+export function getDetailedDesignSkillPrompt() {
+  if (cachedDetailedDesignSkillPrompt !== null) {
+    return cachedDetailedDesignSkillPrompt;
+  }
+
+  try {
+    const markdown = readFileSync(DETAILED_DESIGN_SKILL_PATH, 'utf8');
+    const sections = DETAILED_DESIGN_SECTION_HEADINGS
+      .map((heading) => extractMarkdownSection(markdown, heading))
+      .filter(Boolean);
+
+    cachedDetailedDesignSkillPrompt = sections.length > 0
+      ? sections.join('\n\n')
+      : DETAILED_DESIGN_SKILL_FALLBACK;
+  } catch {
+    cachedDetailedDesignSkillPrompt = DETAILED_DESIGN_SKILL_FALLBACK;
+  }
+
+  return cachedDetailedDesignSkillPrompt;
+}
+
 export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selections = [] }) {
   const sanitizedPrompt = typeof userPrompt === 'string' ? userPrompt.trim() : '';
   if (!sanitizedPrompt) {
@@ -103,9 +215,30 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
     ];
   });
 
+  const pptDesignSkillPrompt = getPptDesignSkillPrompt();
+  const skillLines = pptDesignSkillPrompt
+    ? [
+        'Project skill guidance (follow strictly):',
+        `Source: ${PPT_DESIGN_SKILL_PATH}`,
+        pptDesignSkillPrompt,
+        '',
+      ]
+    : [];
+  const detailedDesignSkillPrompt = getDetailedDesignSkillPrompt();
+  const detailedSkillLines = detailedDesignSkillPrompt
+    ? [
+        'Detailed design/export guardrails (selected from the full design system):',
+        `Primary source: ${DETAILED_DESIGN_SKILL_PATH}`,
+        detailedDesignSkillPrompt,
+        '',
+      ]
+    : [];
+
   return [
     `Edit ${normalizedSlidePath} only.`,
     '',
+    ...skillLines,
+    ...detailedSkillLines,
     'User edit request:',
     sanitizedPrompt,
     '',
@@ -116,6 +249,8 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
     '- Keep existing structure/content unless the request requires a change.',
     '- Keep slide dimensions at 720pt x 405pt.',
     '- Keep text in semantic tags (<p>, <h1>-<h6>, <ul>, <ol>, <li>).',
+    '- Keep local assets under ./assets/ and preserve portable relative paths.',
+    '- Do not persist runtime-only editor/viewer injections such as <base>, debug scripts, or viewer wrapper markup into the slide file.',
     '- Return after applying the change.',
   ].join('\n');
 }

package/src/editor/js/editor-init.js

@@ -149,6 +149,13 @@ popoverBgColorInput.addEventListener('input', () => {
   }, 'Background color updated.', { delay: 300 });
 });
 
+function hasEditableFocus() {
+  const activeElement = document.activeElement;
+  if (!(activeElement instanceof HTMLElement)) return false;
+  if (activeElement.matches('input, textarea, select')) return true;
+  return activeElement.isContentEditable;
+}
+
 // Style toggles
 toggleBold.addEventListener('click', () => {
   mutateSelectedObject((el) => {
@@ -199,9 +206,9 @@ alignRight.addEventListener('click', () => {
 
 // Global keyboard
 document.addEventListener('keydown', (event) => {
-  const inPromptField = document.activeElement === promptInput;
+  const inEditableField = hasEditableFocus();
 
-  if (state.toolMode === TOOL_MODE_SELECT && (event.ctrlKey || event.metaKey) && !inPromptField) {
+  if (state.toolMode === TOOL_MODE_SELECT && (event.ctrlKey || event.metaKey) && !inEditableField) {
     const key = event.key.toLowerCase();
     if (key === 'b') { event.preventDefault(); if (!toggleBold.disabled) toggleBold.click(); return; }
     if (key === 'i') { event.preventDefault(); if (!toggleItalic.disabled) toggleItalic.click(); return; }
@@ -219,7 +226,7 @@ document.addEventListener('keydown', (event) => {
     return;
   }
 
-  if (inPromptField) return;
+  if (inEditableField) return;
 
   if (event.key === 'ArrowLeft') {
     event.preventDefault();

package/src/figma.js

@@ -0,0 +1,63 @@
+import { mkdir } from 'node:fs/promises';
+import { basename, dirname, extname, join, resolve } from 'node:path';
+
+export const DEFAULT_FIGMA_SUFFIX = '-figma.pptx';
+export const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
+export const FIGMA_EXPORT_LAYOUT_NAME = 'SLIDES_GRAB_STANDARD';
+export const SLIDE_WIDTH_INCHES = 10;
+export const SLIDE_HEIGHT_INCHES = 5.625;
+
+export function buildDefaultFigmaOutput(slidesDir) {
+  const absoluteSlidesDir = resolve(slidesDir);
+  const deckName = basename(absoluteSlidesDir);
+  const parentDir = dirname(absoluteSlidesDir);
+  return join(parentDir, `${deckName}${DEFAULT_FIGMA_SUFFIX}`);
+}
+
+export function normalizeFigmaOutput(slidesDir, output) {
+  if (typeof output === 'string' && output.trim() !== '') {
+    const trimmed = output.trim();
+    return extname(trimmed).toLowerCase() === '.pptx' ? trimmed : `${trimmed}.pptx`;
+  }
+
+  return buildDefaultFigmaOutput(slidesDir);
+}
+
+export function getFigmaImportCaveats() {
+  return [
+    'Figma export is experimental / unstable. Figma imports PPTX best-effort, and complex layouts, shadows, and grouped elements can shift or flatten.',
+    'Fonts are resolved inside Figma. If Pretendard is unavailable there, expect substitution and reflow.',
+    'Import is one-way. Re-importing creates a new Figma Slides file instead of updating the existing one.',
+    'Review every imported slide, especially chart-heavy slides and text near slide edges.',
+  ];
+}
+
+export function getFigmaManualImportInstructions() {
+  return 'Figma Slides -> Import -> select the generated .pptx file.';
+}
+
+export function configureFigmaExportPresentation(pres) {
+  pres.defineLayout({
+    name: FIGMA_EXPORT_LAYOUT_NAME,
+    width: SLIDE_WIDTH_INCHES,
+    height: SLIDE_HEIGHT_INCHES,
+  });
+  pres.layout = FIGMA_EXPORT_LAYOUT_NAME;
+  return pres;
+}
+
+export async function ensureOutputDirectory(outputFile) {
+  await mkdir(dirname(resolve(outputFile)), { recursive: true });
+}
+
+function toSlideOrder(fileName) {
+  const match = fileName.match(/\d+/);
+  return match ? Number.parseInt(match[0], 10) : Number.POSITIVE_INFINITY;
+}
+
+export function sortFigmaSlideFiles(a, b) {
+  const orderA = toSlideOrder(a);
+  const orderB = toSlideOrder(b);
+  if (orderA !== orderB) return orderA - orderB;
+  return a.localeCompare(b);
+}