slides-grab 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slides-grab",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Agent-first presentation framework — plan, design, and visually edit HTML slides with Claude Code or Codex, then export to PDF or experimental/unstable PPTX/Figma formats",
   "license": "MIT",
   "author": "vkehfdl1",

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

@@ -23,7 +23,7 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 ## Workflow
 1. Read approved `slide-outline.md` and extract the `style` field from its meta section.
 2. Load the chosen style's full spec from `src/design-styles-data.js` — colors, fonts, layout, signature elements, and things to avoid. If the meta specifies a custom direction instead of a bundled ID, use that custom direction as the design basis.
-3. Before generating slides, write a quick **visual thesis** (mood/material/energy), a **content plan** (opener → support/proof → detail/story → close/CTA), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles). Ground these tokens in the chosen style's spec.
+3. Before generating slides, write a quick **visual thesis** (mood/material/energy), a **content plan** (opener → support/proof → detail/story → close/CTA), a **system declaration** (reused layout patterns, max two background colors, max two typefaces, image-led vs text-led slides, where section dividers reset tempo), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles). Ground these tokens in the chosen style's spec. Follow `references/beautiful-slide-defaults.md` for the full working model, content discipline, color discipline, and AI slop tropes to avoid.
 4. If you need to confirm or revisit the approved bundled style before designing, re-run `slides-grab list-styles` and open the gallery from `slides-grab preview-styles` so the Stage 2 deck stays aligned with the Stage 1 direction.
 5. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
 6. When a slide needs iconography, prefer Lucide as the default icon library. Use clean Lucide icons before falling back to emoji, and only use emoji when the brief explicitly calls for them.
@@ -55,6 +55,10 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 - Treat opening slides and section dividers like posters, not dashboards.
 - Default to cardless layouts; only add a card when it improves structure or comprehension.
 - Use whitespace, alignment, scale, cropping, and contrast before adding decorative chrome.
+- Do not pad slides with filler copy, dummy stats, or decorative iconography — when a slide feels empty, solve it with layout and scale, not invented content.
+- Pull every color from the approved style spec or the user's brand tokens; extend only with harmonic `oklch()` neighbors. Do not invent fresh standalone hex colors mid-slide.
+- Keep body copy at 14pt minimum on a 720pt × 405pt slide and never render any text below the 10pt absolute floor.
+- Avoid AI slop tropes — aggressive gradient backgrounds, left-border accent cards, SVG-drawn imagery, generic font stacks (Inter/Roboto/Arial), and generic 3×2 icon-plus-blurb grids. See `references/beautiful-slide-defaults.md` for the full list.
 - Prefer `tldraw` for complex diagrams instead of recreating dense node/edge diagrams directly in HTML/CSS.
 - Use `slides-grab tldraw` plus `templates/diagram-tldraw.html` when that gives a cleaner, more export-friendly result.
 - Do not present slides for review until `slides-grab validate --slides-dir <path>` passes.
@@ -65,5 +69,5 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 For full constraints and style system, follow:
 - `references/design-rules.md`
 - `references/detailed-design-rules.md`
-- `references/beautiful-slide-defaults.md` — slide-specific art direction defaults adapted from OpenAI's frontend design guidance
+- `references/beautiful-slide-defaults.md` — slide-specific art direction defaults adapted from OpenAI's frontend design guidance and Anthropic's Claude design system guidance (content/color discipline, system declaration, AI slop tropes)
 - `references/design-system-full.md` — archived full design system, templates, and advanced pattern guidance

package/skills/slides-grab-design/references/beautiful-slide-defaults.md

@@ -1,16 +1,28 @@
 # Beautiful Slide Defaults
 
-Slide-specific art direction guidance adapted from OpenAI's frontend design guidance for GPT-5.4. Use it to make HTML slides feel deliberate, premium, and instantly scannable without breaking `slides-grab`'s export constraints.
+Slide-specific art direction guidance adapted from OpenAI's frontend design guidance for GPT-5.4, with additional distilled principles from Anthropic's Claude design system guidance. Use it to make HTML slides feel deliberate, premium, and instantly scannable without breaking `slides-grab`'s export constraints.
 
 ## Working Model
 
-Before building the deck, write two things:
+Before building the deck, write three things:
 
 - **visual thesis** — one sentence describing the mood, material, energy, and imagery treatment
 - **content plan** — opener → support/proof → detail/story → close/CTA or decision
+- **system declaration** — one short paragraph committing to the system you will reuse across the deck
 
 If the style direction is still open, gather visual references or a mood board first. Define the core tokens early: `background`, `surface`, `primary text`, `muted text`, `accent`, plus typography roles for `display`, `headline`, `body`, and `caption`.
 
+### Vocalize the System Before Designing
+
+After the visual thesis and tokens are set, write the system declaration out loud so the deck stays consistent and iteration stays cheap. Name:
+
+- the layout patterns you will reuse for titles, section headers, content, quotes, and closing slides
+- the two background colors (max) you will use to introduce intentional rhythm between sections and content slides
+- the two typefaces max, plus the one accent color that carries focus
+- which slides will be image-led, which will be text-led, and where section dividers reset tempo
+
+A deck without a declared system drifts. Committing to the system up front is the single cheapest way to make the deck feel deliberate.
+
 ## Beautiful Defaults for Slides
 
 - Start with composition, not components.
@@ -34,6 +46,35 @@ Use a narrative rhythm that feels intentional:
 
 Section dividers should reset the visual tempo. Alternate dense proof slides with simpler image-led or statement-led slides so the deck keeps breathing.
 
+## Content Discipline
+
+Every element must earn its place. When a slide feels empty, solve it with layout, scale, whitespace, and a stronger visual anchor — never by inventing filler content.
+
+- Do not pad slides with placeholder copy, dummy stats, or decorative iconography just to fill space.
+- Avoid data slop: invented numbers, vague percentages, and stat strips whose only purpose is to look informational.
+- If you believe a slide needs an extra section, example, page, or call-out beyond the approved outline, ask the user before adding it. The user knows the audience better than you do.
+- Say one thousand no's for every yes. Cutting is a design tool.
+
+## Color Discipline
+
+- Pull every color from the approved style spec in `src/design-styles-data.js` (or the user's brand tokens when they override the bundled style). Do not invent fresh standalone hex colors mid-slide.
+- If the approved palette is too restrictive for a specific slide, extend it harmonically with `oklch()` — derive neighbors from the existing accent or surface — rather than picking a fresh hex from scratch.
+- Keep one accent color per deck. Two background colors max across the entire deck; use them to introduce rhythm between section dividers and content slides, not to decorate individual slides.
+- Every color must trace back to the approved palette or a documented harmonic extension of it.
+
+## AI Slop Tropes to Avoid
+
+Common AI-generated patterns that cheapen a deck instantly. Treat these as anti-patterns unless the brief explicitly asks for them.
+
+- Aggressive full-slide gradient backgrounds used as the primary surface treatment.
+- Rounded-rectangle containers with a solid left-border accent stripe (the AI "accent card" default).
+- Drawing iconography or product imagery with inline SVG shapes — use a real asset or a `data-image-placeholder` box instead.
+- Overused, generic font families: Inter, Roboto, Arial, Fraunces, and OS system stacks. Prefer Pretendard or the style-specified typeface.
+- Emoji as default iconography. Prefer Lucide; emoji is only for briefs that explicitly call for a playful, native-emoji tone.
+- "Feature card grid" 3×2 layouts of icon + heading + two-line blurb used as the generic answer to any content slide.
+- Faux chrome: drop shadows, subtle gradients, and card borders added to decorate empty space instead of carrying meaning.
+- Placeholder-looking real imagery: stock photos that obviously do not match the topic, or AI-generated images with visible artifacts. Prefer a well-composed `data-image-placeholder` over a bad real image.
+
 ## Review Litmus
 
 Before showing the deck, ask:
@@ -43,3 +84,5 @@ Before showing the deck, ask:
 - Is there one real visual anchor, not just decoration?
 - Would this still feel premium without shadows, cards, or extra chrome?
 - Can any line of copy, badge, or callout be removed without losing meaning?
+- Does every color on the slide trace back to the approved style spec or a documented `oklch` harmonic extension of it?
+- Does any slide lean on an AI slop trope? If so, replace it with composition, typography, or real imagery before review.

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

@@ -24,6 +24,19 @@
 - 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.

package/src/editor/codex-edit.js

@@ -450,7 +450,7 @@ export function buildCodexExecArgs({ prompt, imagePath, model }) {
   return args;
 }
 
-export const CLAUDE_MODELS = ['claude-opus-4-6', 'claude-sonnet-4-6'];
+export const CLAUDE_MODELS = ['claude-opus-4-7', 'claude-sonnet-4-6'];
 
 export function isClaudeModel(model) {
   return typeof model === 'string' && CLAUDE_MODELS.includes(model.trim());

package/src/editor/js/editor-state.js

@@ -15,7 +15,7 @@ export const POPOVER_TEXT = 'text';
 export const POPOVER_TEXT_COLOR = 'text-color';
 export const POPOVER_BG_COLOR = 'bg-color';
 export const POPOVER_SIZE = 'size';
-export const DEFAULT_MODELS = ['gpt-5.4', 'gpt-5.3-codex', 'gpt-5.3-codex-spark', 'claude-opus-4-6', 'claude-sonnet-4-6'];
+export const DEFAULT_MODELS = ['gpt-5.4', 'gpt-5.3-codex', 'gpt-5.3-codex-spark', 'claude-opus-4-7', 'claude-sonnet-4-6'];
 export const DIRECT_TEXT_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li']);
 export const NON_SELECTABLE_TAGS = new Set(['html', 'head', 'body', 'script', 'style', 'link', 'meta', 'noscript']);