@opendirectory.dev/skills 0.1.53 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendirectory.dev/skills",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {

package/registry.json

@@ -117,6 +117,16 @@
     "version": "2.0",
     "path": "skills/google-trends-api-skills"
   },
+  {
+    "name": "graphic-slide-deck",
+    "description": "Generates a professionally designed HTML slide deck from a brief or content.",
+    "tags": [
+      "Copywriting"
+    ],
+    "author": "OpenDirectory",
+    "version": "1.0.0",
+    "path": "skills/graphic-slide-deck"
+  },
   {
     "name": "hackernews-intel",
     "description": "Monitors Hacker News for user-configured keywords, deduplicates against a local SQLite cache, and sends Slack alerts for new matching posts.",

package/skills/brand-alchemy/README.md

@@ -1,6 +1,6 @@
 # Brand Alchemy
 
-<img src="https://raw.githubusercontent.com/Varnan-Tech/opendirectory/main/docs/assets/opendirectory_banner.webp" width="100%" alt="Brand Alchemy Cover" />
+<img width="1920" height="1072" alt="brand-alchemy-skill-cover-image" src="https://github.com/user-attachments/assets/15d90c97-9eef-4eed-abb3-7ce58438adf0" />
 
 World-class brand strategist and naming expert. Uses an interrogation-led discovery phase to extract your brand's DNA, then applies scientific naming frameworks (Phonosemantics) and automated multi-TLD domain checking.
 

package/skills/graphic-slide-deck/README.md

@@ -0,0 +1,129 @@
+# graphic-slide-deck
+
+Generate a professionally designed HTML slide deck from a brief, content notes, or an existing PowerPoint. Outputs a browser-ready presentation + optional PDF. Supports 13 named layout types and 8 business style presets.
+
+## Install
+
+```bash
+npx "@opendirectory.dev/skills" install graphic-slide-deck --target claude
+```
+
+### Video Tutorial
+Watch this quick video to see how it's done:
+
+https://github.com/user-attachments/assets/ee98a1b5-ebc4-452f-bbfb-c434f2935067
+
+### Step 1: Download the skill from GitHub
+1. Copy the URL of this specific skill folder from your browser's address bar.
+2. Go to [download-directory.github.io](https://download-directory.github.io/).
+3. Paste the URL and click **Enter** to download.
+
+### Step 2: Install the Skill in Claude
+1. Open your **Claude desktop app**.
+2. Go to the sidebar on the left side and click on the **Customize** section.
+3. Click on the **Skills** tab, then click on the **+** (plus) icon button to create a new skill.
+4. Choose the option to **Upload a skill**, and drag and drop the `.zip` file (or you can extract it and drop the folder, both work).
+
+> **Note:** Make sure you upload the folder that contains the `SKILL.md` file directly.
+
+---
+
+## What it does
+
+- Asks the questions that determine how a deck should be structured
+- Plans the slide sequence with named layout types for each slide
+- Generates a single self-contained HTML file -- opens in any browser, no build tools
+- Splits into per-slide HTML files for individual sharing or editing
+- Exports a PDF via Playwright (renders animations to final state)
+- Optionally deploys to a live URL via Vercel for phone/tablet sharing
+- Converts existing PowerPoint files to HTML
+
+## Example
+
+> "Create a 12-slide Series A investor deck for DataPulse. Audience: Series A VCs. Style: midnight-editorial."
+
+Output: 12-slide HTML presentation, per-slide HTML files, and a PDF -- covering problem/solution/traction/team/market/ask.
+
+---
+
+## Supported Styles
+
+| Style | Best for |
+|---|---|
+| midnight-editorial | Investor decks, premium B2B, thought leadership |
+| matt-gray | Internal decks, operational reviews, mixed audiences |
+| clean-slate | Sales decks, customer-facing, enterprise-safe |
+| brutalist | Startup pitches, design-forward, tech conferences |
+| mint-pixel-corporate | SaaS sales, product demos, growth-stage pitches |
+| product-minimal | Product demos, feature showcases, design audiences |
+| magazine-red | Marketing reports, campaign reviews, bold internal |
+| soft-cloud | Onboarding, customer education, approachable SaaS |
+
+---
+
+## Supported Layouts
+
+| Layout | Use case |
+|---|---|
+| title-hero | Opening slide -- large headline + subtext |
+| section-divider | Section break -- bold label, minimal design |
+| text-full | Headers + bullet points or paragraphs |
+| text-left-image-right | Side-by-side: text column + visual |
+| image-left-text-right | Side-by-side: image first, text second |
+| two-column-text | Comparisons, pros/cons, before/after |
+| image-full | Full-bleed image with optional caption overlay |
+| image-grid | 2x2 or 3x2 grid of images or screenshots |
+| stat-highlight | 2-4 large KPI metrics (the unmissable slide) |
+| quote-callout | Pull quote with attribution |
+| comparison-table | Feature or option comparison grid |
+| timeline | Horizontal or vertical milestones |
+| closing-cta | Final slide -- CTA, contact info, next steps |
+
+---
+
+## Output
+
+| File | What it is |
+|---|---|
+| `deck/[name]-slides/index.html` | Full presentation, browser-ready |
+| `deck/[name]-slides/slide-001.html` ... | Per-slide HTML files for individual sharing |
+| `deck/[name].pdf` | PDF export (if requested) |
+| Live URL | Deployed Vercel URL (if requested) |
+
+Slides are 1920x1080px (16:9) by default. 1:1 (1080x1080) available for LinkedIn.
+
+---
+
+## Parameters
+
+| Param | Required | Notes |
+|---|---|---|
+| purpose | Yes | investor pitch / sales call / conference talk / internal / onboarding |
+| audience | Yes | VCs, prospects, your team, executives, conference room |
+| topic_or_content | Yes | Freeform brief, notes, URL, or uploaded file |
+| key_message | No | Single sentence the audience must remember |
+| slide_count | No | Default: 12 |
+| style | No | One of 8 named presets or "show me options" (default: clean-slate) |
+| aspect_ratio | No | 16:9 or 1:1 (default: 16:9) |
+| inline_editing | No | Yes/No -- editable in-browser (default: No) |
+| output_format | No | HTML only / HTML+PDF / HTML+PDF+deploy (default: HTML+PDF) |
+| deck_name | No | Slug for file/folder naming (derived from topic if omitted) |
+
+---
+
+## Dependencies
+
+This skill requires the `frontend-slides` skill files at:
+`/Users/ksd/Desktop/Varnan_skills/frontend-slides/`
+
+Specifically:
+- `viewport-base.css` -- responsive slide foundation (included verbatim in generated HTML)
+- `html-template.md` -- SlidePresentation class and inline editing system
+- `animation-patterns.md` -- entrance animations and background effects
+- `scripts/export-pdf.sh` -- PDF export via Playwright (Node.js required, auto-installs)
+- `scripts/deploy.sh` -- Vercel deployment (Node.js required)
+- `scripts/extract-pptx.py` -- PowerPoint content extraction (Python + `python-pptx` required)
+
+## No API keys required
+
+Pure AI skill. No external services, no scraping, no dependencies to install beyond the above.

package/skills/graphic-slide-deck/SKILL.md

@@ -0,0 +1,364 @@
+---
+name: graphic-slide-deck
+description: Generates a professionally designed HTML slide deck from a brief or content. Outputs a single-file presentation + optional PDF. Supports 13 layout types and 8 style presets. Trigger when user says "create a slide deck", "make a presentation", "build a pitch deck", "make slides", "convert my notes to slides".
+compatibility: [claude-code, gemini-cli, github-copilot]
+author: OpenDirectory
+version: 1.0.0
+---
+
+# Graphic Slide Deck
+
+Generate a professionally designed HTML slide deck from a brief, content notes, or an existing file. Output is a single self-contained HTML file -- opens in any browser, no build tools.
+
+---
+
+**Critical rules -- non-negotiable:**
+
+1. Every slide MUST fit within 100vh. No scrolling inside slides. Content overflows → split into two slides.
+2. ALL font sizes and spacing MUST use `clamp()`. Never fixed px/rem on anything that scales.
+3. Single self-contained HTML: all CSS/JS inline. Zero external dependencies except font CDN link.
+4. Never dump HTML in chat. Save to file, show summary only.
+5. No generic AI slop aesthetics -- check against the DO NOT USE list in `references/style-presets.md`.
+
+---
+
+## Step 1: Brief Intake
+
+Need three things to start. If all three present in the message: skip to Step 2.
+
+If any missing, ask exactly:
+
+> "To get started, I need three things:
+> 1. **Purpose** -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other)
+> 2. **Audience** -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn)
+> 3. **Topic or content** -- paste notes, a URL, a brief description, or upload a file"
+
+Wait for all three before continuing.
+
+---
+
+## Step 2: Complete Intake
+
+Ask all questions in one message, grouped by category. User can skip any -- defaults apply.
+
+> "A few questions before I start:
+>
+> **Content**
+> 1. **Key message** -- single sentence the audience must remember after leaving
+> 2. **Slide count** -- Short (5-10) / Medium (10-20) / Long (20+)?
+> 3. **Content source** -- All content ready / Rough notes (I'll structure) / Topic only (I'll draft)?
+> 4. **Existing assets** -- Any images, screenshots, or logos to include? (yes + paths / no)
+>
+> **Design**
+> 5. **Style** -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options"
+> 6. **Aspect ratio** -- 16:9 (1920×1080, default) / 1:1 (1080×1080, LinkedIn)
+> 7. **Inline editing** -- should text be editable in-browser after export? (Yes / No)
+>
+> **Output**
+> 8. **Output format** -- HTML only / HTML + PDF / HTML + PDF + deploy to URL
+> 9. **Deck name** -- slug for file/folder naming (e.g. "q2-investor-pitch"); I'll derive if skipped"
+
+**Defaults if skipped:**
+
+| Question | Default |
+|---|---|
+| Key message | derived from purpose + topic |
+| Slide count | 12 |
+| Content source | topic only |
+| Existing assets | none |
+| Style | clean-slate |
+| Aspect ratio | 16:9 |
+| Inline editing | No |
+| Output format | HTML + PDF |
+| Deck name | derived from topic slug |
+
+**If style = "show me options":**
+Generate 3 single-slide HTML previews (one for each of 3 different style presets that fit the deck's purpose). Save to `.claude-design/previews/style-a.html`, `style-b.html`, `style-c.html`. Open each: `open .claude-design/previews/style-a.html` etc. Ask user to pick before Step 3.
+
+---
+
+## Step 2.5: Internal Design Direction (not shown to user)
+
+From Step 2 answers, determine before Step 3:
+
+**Visual character** (derived from style, or inferred if not specified):
+- midnight-editorial or magazine-red → `dark-editorial`
+- clean-slate or product-minimal → `light-minimal`
+- matt-gray → `neutral-professional`
+- brutalist → `bold-expressive`
+- mint-pixel-corporate or soft-cloud → `fresh-corporate`
+- Style not specified: investor pitch → midnight-editorial; sales → clean-slate; conference → brutalist or midnight-editorial; internal → matt-gray
+
+**ONE unmissable slide** -- identify before Step 3:
+- Investor pitch → stat-highlight (traction/metrics slide)
+- Sales deck → stat-highlight (ROI/results slide)
+- Conference talk → quote-callout or stat-highlight (key insight)
+- Internal presentation → closing-cta (decision/recommendation slide)
+
+**Layout selection bias** -- note the 2-3 most relevant layouts for this deck type to prioritize in Step 3.
+
+Never ask the user for design direction -- derive it entirely from their answers.
+
+---
+
+## Step 3: Structure Design
+
+Read `references/layout-library.md` before planning.
+
+Plan the full slide sequence. Assign a layout type from the 13 in `references/layout-library.md` to each slide.
+
+**Deck type → typical structure:**
+
+**Investor pitch (12 slides):**
+1. [title-hero] Company + tagline
+2. [section-divider] The Problem
+3. [text-full] Problem detail
+4. [text-left-image-right] Solution overview
+5. [image-full] Product screenshot
+6. **[stat-highlight] Traction -- unmissable slide**
+7. [comparison-table] vs. competitors
+8. [timeline] Roadmap
+9. [text-full] Team
+10. [stat-highlight] Market size
+11. [text-left-image-right] Business model
+12. [closing-cta] The ask
+
+**Sales deck (8-10 slides):**
+1. [title-hero]
+2. [quote-callout] Prospect pain point
+3. [text-left-image-right] Solution
+4. [image-grid] Product screenshots
+5. **[stat-highlight] ROI/results -- unmissable**
+6. [comparison-table] vs. alternatives
+7. [text-full] Implementation / next steps
+8. [closing-cta]
+
+**Conference talk (15-20 slides):**
+title-hero → section-dividers → text-full slides → image-full → **stat-highlight or quote-callout (unmissable)** → timeline → closing-cta
+
+**Internal presentation (8-12 slides):**
+title-hero → text-full (context) → stat-highlight (current state) → two-column-text (options) → comparison-table → text-full (recommendation) → **closing-cta (the decision -- unmissable)**
+
+Output the proposed structure as a numbered list with `[layout-type]` in brackets. Example:
+
+```
+Proposed structure (12 slides, midnight-editorial style):
+
+1. [title-hero] DataPulse -- Revenue decisions in 5 minutes
+2. [section-divider] The Problem
+...
+12. [closing-cta] The ask + team@datapulse.io
+
+Does this structure work, or should I adjust any slides?
+```
+
+Wait for confirmation before Step 4.
+
+---
+
+## Step 4: Content Draft
+
+Write per-slide copy in sequence. Plain text only -- no HTML yet.
+
+**Copy rules per layout:**
+
+- `title-hero`: headline (6 words max) + subtitle (1 sentence) + optional pill badge text
+- `section-divider`: 2-4 word section label only
+- `text-full`: heading (5 words max) + 4-6 bullets OR 2 paragraphs (never both on same slide)
+- `text-left-image-right` / `image-left-text-right`: heading + 3-4 bullets + `[IMAGE: description]`
+- `two-column-text`: 2 column headings + max 3 bullets each
+- `image-full`: `[IMAGE: description]` + optional caption (10 words max)
+- `image-grid`: up to 6 `[IMAGE: description]` placeholders with short captions
+- `stat-highlight`: 2-4 metrics written as `NUMBER | label` (e.g. `3× | faster close`). ZERO body copy.
+- `quote-callout`: quote (30 words max) + attribution (name, title)
+- `comparison-table`: column headers (3 max) + 4-6 row labels + cell content (1-3 words each)
+- `timeline`: 3-6 milestones (label + date + 1-line description)
+- `closing-cta`: headline (5 words max) + CTA action text + contact info (email + URL -- both required)
+
+**Forbidden words** (in all copy, no exceptions):
+"powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (as filler adjective).
+
+**Copy philosophy:** Fragments are fine. Numbers beat adjectives. Every word earns its place.
+
+---
+
+## Step 5: HTML Generation
+
+Read ALL before generating any HTML:
+
+**This skill's references:**
+- `references/design-system.md`
+- `references/layout-library.md`
+- `references/style-presets.md`
+- `references/animation-guide.md`
+
+**frontend-slides cross-references (read these exact files):**
+- `/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css` -- include FULL contents verbatim inside `<style>` block
+- `/Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md` -- SlidePresentation class, keyboard nav, inline editing system
+- `/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md` -- entrance animations, background effects, interactive effects
+
+**Generation rules:**
+
+1. Single self-contained HTML. All CSS and JS inline. Font CDN `<link>` is the only external reference.
+2. Include the FULL verbatim contents of `viewport-base.css` inside the `<style>` block -- do not paraphrase or shorten it.
+3. Fonts from Google Fonts or Fontshare only. Font choices come from the chosen preset in `references/style-presets.md`.
+4. Use the SlidePresentation class from `html-template.md`. Implement full keyboard navigation (arrows, space, page up/down), touch/swipe, progress bar, and nav dots. `navDotsContainer.innerHTML = ""` before building nav dots -- never skip this.
+5. If inline editing opted-in: implement the full inline editing system from `html-template.md` including `exportFile()`. The `exportFile()` function MUST strip `contenteditable`, `body.edit-active`, and `.active`/`.show` classes before capturing `outerHTML`.
+6. Aspect ratio:
+   - 16:9 (default): slides are `width: 100vw; height: 100vh`
+   - 1:1 (LinkedIn): add `--slide-height: min(100vh, 100vw)` CSS custom property and use it on `.slide`
+7. Every slide section MUST use `class="slide"` -- required for export-pdf.sh's slide detection.
+8. Add a comment before each slide: `/* === SLIDE N: LAYOUT-TYPE === */`
+9. Apply the ONE unmissable slide from Step 2.5 with maximum visual weight -- largest typography, most animation, the style preset's signature element at full intensity. All other slides are compositionally quieter.
+10. No images provided → use CSS-generated visuals (gradient meshes, geometric shapes, grid patterns from `animation-patterns.md`). This is a first-class path, not a fallback.
+
+**Typography discipline:**
+- Stat numbers: `clamp(3.5rem, 12vw, 9rem)` -- a metric that fills a third of the slide reads authoritative
+- Hero headline: `clamp(2.5rem, 8vw, 6rem)` at minimum. Never size down for safety.
+- Never use fixed px/rem on any element the user will see. Clamp everything.
+
+**CSS gotcha from viewport-base.css:** Never write `-clamp()`, `-min()`, `-max()` directly in CSS. Wrap in `calc(-1 * clamp(...))`.
+
+---
+
+## Step 6: Self-QA
+
+Check every item. Fix every failure -- do not skip.
+
+**Viewport and rendering:**
+- [ ] Every `.slide` has `height:100vh; height:100dvh; overflow:hidden`
+- [ ] ALL font sizes and spacing use `clamp()` -- no fixed px on scaling elements
+- [ ] No slide overflows at 1280×720 viewport (check against density limits from `layout-library.md`)
+- [ ] Images use `max-height: min(50vh, 400px)`
+- [ ] Breakpoints for 700px, 600px, 500px viewport heights present (from viewport-base.css)
+- [ ] `prefers-reduced-motion` media query present
+- [ ] No `-clamp()`, `-min()`, `-max()` in CSS -- wrapped in `calc(-1 * ...)` if negative needed
+
+**Structure:**
+- [ ] Slide count matches Step 3 plan
+- [ ] Every slide uses `class="slide"`
+- [ ] Each layout type correctly implemented per `references/layout-library.md`
+- [ ] SlidePresentation class present with keyboard nav, touch, progress bar, nav dots
+- [ ] `navDotsContainer.innerHTML = ""` before building nav dots
+- [ ] If inline editing opted-in: `exportFile()` strips edit-state before capturing `outerHTML`
+
+**Design quality:**
+- [ ] ONE unmissable slide visually dominant -- not buried among equal-weight slides
+- [ ] Typography hierarchy clear: display >> heading >> body (at least 2:1 size ratio between levels)
+- [ ] Style preset tokens applied consistently (colors, fonts from `references/style-presets.md`)
+- [ ] No slop patterns (check against DO NOT USE list in `references/style-presets.md`)
+
+**Content:**
+- [ ] No forbidden words in any slide copy
+- [ ] title-hero headline is 6 words or fewer
+- [ ] stat-highlight has ZERO body copy competing with the numbers
+- [ ] closing-cta has specific action + contact info (not just "Thank You")
+
+If any check fails: fix inline, then re-run the checklist mentally before proceeding.
+
+---
+
+## Step 7: Output
+
+**Save the main HTML first:**
+
+```bash
+mkdir -p deck/[name]-slides
+```
+
+Write to: `deck/[name]-slides/index.html`
+
+Open it: `open deck/[name]-slides/index.html`
+
+**Per-slide HTML files (always generate these):**
+
+Extract each `<section class="slide">` from the main HTML. For each one, create a standalone file with:
+- The full `<style>` block from the main HTML (copied verbatim)
+- The individual `<section class="slide">` wrapped in a minimal HTML shell
+- No SlidePresentation JS (static per-slide viewing, no navigation needed)
+
+Write to: `deck/[name]-slides/slide-001.html`, `slide-002.html`, etc. (zero-padded to 3 digits).
+
+**If PDF requested:**
+
+```bash
+bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
+  deck/[name]-slides/index.html \
+  deck/[name].pdf
+```
+
+Note: first run installs Playwright automatically (~30-60 seconds). Inform the user.
+
+**If deploy requested:**
+
+```bash
+bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
+  deck/[name]-slides/
+```
+
+**Cleanup:** Delete `.claude-design/previews/` if style preview files were generated in Step 2.
+
+---
+
+## Step 8: Summary (no HTML in chat)
+
+Present in chat:
+
+```
+## Slide Deck: [deck name]
+Date: [today] | Style: [style] | Slides: [N] | Aspect: [16:9 or 1:1]
+Purpose: [purpose] | Audience: [audience]
+
+---
+
+### Files
+Main:      deck/[name]-slides/index.html
+Per-slide: deck/[name]-slides/slide-001.html → slide-0NN.html
+PDF:       deck/[name].pdf  [if generated]
+Live URL:  [url]  [if deployed]
+
+---
+
+### Navigation
+Arrow keys / Space / Page Up/Down -- advance slides
+Click nav dots -- jump to any slide
+Touch / swipe -- works on mobile
+
+---
+
+### Customize
+Edit :root CSS variables at the top of the file to change colors
+Swap the @import font URL to change typography
+Remove .reveal class from elements to disable entrance animations
+
+---
+
+### Deck Checklist
+- [ ] Replace [IMAGE: description] placeholders with real images
+- [ ] Verify the metric/quote on slide [N] is accurate (the unmissable slide)
+- [ ] Test on your target display size ([1920×1080 or 1080×1080])
+- [ ] If presenting live: test keyboard nav in fullscreen mode (F11 / Cmd+Ctrl+F)
+- [ ] Replace [QR: url] on closing slide with an actual QR code image
+```
+
+Do not print the HTML in the chat.
+
+---
+
+## Section Reference
+
+| Layout | Use case |
+|---|---|
+| title-hero | Opening slide -- large headline + subtext |
+| section-divider | Section break -- bold label, minimal |
+| text-full | Headers + bullets or paragraphs |
+| text-left-image-right | Side-by-side: text + image |
+| image-left-text-right | Side-by-side: image first |
+| two-column-text | Comparisons, pros/cons, before/after |
+| image-full | Full-bleed image + optional caption |
+| image-grid | 2×2 or 3×2 image gallery |
+| stat-highlight | 2-4 large KPI metrics |
+| quote-callout | Pull quote with attribution |
+| comparison-table | Feature/option comparison grid |
+| timeline | Horizontal or vertical milestones |
+| closing-cta | Final slide -- CTA + contact info |

package/skills/graphic-slide-deck/evals/evals.json

@@ -0,0 +1,35 @@
+{
+  "skill_name": "graphic-slide-deck",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Create a 12-slide Series A investor deck for a B2B analytics SaaS called DataPulse. Audience: Series A VCs. Key message: we turn warehouse data into revenue decisions in under 5 minutes. Style: midnight-editorial. Output: HTML + PDF.",
+      "expected_output": "All 3 required fields present -- skips Step 1. Asks all 9 questions in Step 2 grouped into Content / Design / Output categories. After answers: reads style-presets.md midnight-editorial tokens (Instrument Serif + Inter, #D8F90A accent, #111111 bg). Reads viewport-base.css from frontend-slides exact path -- includes FULL verbatim contents in style block. Reads html-template.md -- uses SlidePresentation class with navDotsContainer.innerHTML='' before nav dot loop. Reads animation-patterns.md. Generates single HTML, 12 slides, all using class='slide'. Structure plan includes stat-highlight as unmissable slide (traction metrics) -- confirmed with user before generating. Step 4 drafts per-slide copy first: stat-highlight has ZERO body copy, only number+label pairs. HTML generation: all font sizes use clamp(), midnight-editorial tokens applied consistently, stat numbers at clamp(3.5rem, 12vw, 9rem) in #D8F90A. Self-QA passes all 18 checklist items. Writes deck/datapulse-slides/index.html. Per-slide files written: deck/datapulse-slides/slide-001.html through slide-012.html, each with full style block + individual slide section + no SlidePresentation JS. PDF export called: bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh deck/datapulse-slides/index.html deck/datapulse.pdf. No HTML in chat. Summary shown with file paths, navigation instructions, and deck checklist.",
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "Make me a sales deck for our project management tool. Audience: operations directors at 50-200 person companies. Key message: cut project reporting time by 80%.",
+      "expected_output": "All 3 required fields present -- skips Step 1. Asks 9 questions in Step 2. User answers style='show me options'. Generates 3 single-slide HTML previews (style-a.html clean-slate, style-b.html mint-pixel-corporate, style-c.html matt-gray for sales context), saves to .claude-design/previews/, opens each automatically. Asks user to pick. After pick: reads chosen style preset tokens. Step 3: sales deck structure -- title-hero, quote-callout (pain), text-left-image-right (solution), image-grid (screenshots), stat-highlight (80% time reduction -- unmissable), comparison-table, text-full (next steps), closing-cta. Confirms structure with user. Step 4: per-slide copy with no forbidden words. stat-highlight copy: '80%' metric with 'Reporting time cut' label -- nothing else. Step 5 HTML: stat-highlight slide uses clamp(3.5rem, 12vw, 9rem) for the 80% number, ZERO body copy competing with it, counter animation applied (one dramatic moment). Default output=HTML+PDF so PDF export runs. .claude-design/previews/ deleted after generation. Summary shown with slide count, file paths, and deck checklist.",
+      "files": []
+    },
+    {
+      "id": 3,
+      "prompt": "Make me some slides.",
+      "expected_output": "Purpose, audience, and topic all missing. Does NOT read any reference files. Does NOT generate any HTML, structure plan, or outline. Asks exactly: 'To get started, I need three things: 1. Purpose -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other) 2. Audience -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn) 3. Topic or content -- paste notes, a URL, a brief description, or upload a file'. Stops and waits. After user provides all three, proceeds to Step 2 and asks all 9 grouped questions in one message.",
+      "files": []
+    },
+    {
+      "id": 4,
+      "prompt": "Build a 15-slide conference talk about LLM evaluation frameworks. Audience: ML engineers at a NeurIPS workshop. Key message: evals are product decisions, not research artifacts. Style: brutalist. Aspect ratio: 1:1. Output: HTML + PDF + deploy.",
+      "expected_output": "Skips Step 1. Asks 9 questions in Step 2. After answers: reads brutalist style preset tokens -- Archivo Black 900, #FF3300 accent, #FFFFFF bg, zero border-radius everywhere, heavy 3px solid black borders. Aspect ratio 1:1: CSS custom property --slide-height: min(100vh, 100vw) applied on .slide, not default 100vh. Structure: 15 slides including section-dividers for talk chapters, quote-callout for key insight, stat-highlight as unmissable slide. Confirms structure with user before content draft. Step 5 HTML: Archivo Black confirmed loaded via Google Fonts @import. All borders are 3px solid #000000. Zero border-radius anywhere in the HTML. stat-highlight in #FF3300 accent. Animation: blur-in (400ms) as default entrance for conference talk; ONE slide uses gradient mesh background (dramatic moment). Per-slide HTML files generated (slide-001 through slide-015). PDF export called: bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh deck/llm-evals-slides/index.html deck/llm-evals.pdf. Deploy called: bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh deck/llm-evals-slides/. Summary shows live URL, file paths, all navigation instructions.",
+      "files": []
+    },
+    {
+      "id": 5,
+      "prompt": "Convert my existing PowerPoint to a beautiful slide deck. File: quarterly-review.pptx. Style: matt-gray. Board presentation.",
+      "expected_output": "Purpose=internal/board, audience=board, content=from file. Skips Step 1 (all 3 fields derivable). Asks 9 questions in Step 2. Runs python /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/extract-pptx.py quarterly-review.pptx /tmp/extracted-pptx/ to extract content. Presents extracted slide titles and content for user confirmation. After confirmation: skips Step 3-4 content planning (extracted content drives the structure). Assigns layout types to extracted slides based on content type (slides with bullet lists → text-full, slides with single large numbers → stat-highlight, title slide → title-hero, etc.). Reads matt-gray preset tokens: DM Sans 700/400, #2563EB accent, white bg, 4px left border signature element. Step 5 HTML: all slides from extracted content, class='slide' on each, DM Sans loaded via @import, all font sizes clamp()-based. Per-slide files generated. No PDF requested in original prompt -- Step 8 summary asks: 'Want a PDF export as well?' before showing final checklist.",
+      "files": []
+    }
+  ]
+}

package/skills/graphic-slide-deck/references/animation-guide.md

@@ -0,0 +1,100 @@
+# Animation Guide
+
+Decision rules for when and where to apply animations. For CSS/JS implementation snippets, read `/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md` directly. This guide tells you WHICH snippets to use -- that file tells you HOW.
+
+---
+
+## The One Dramatic Moment Rule
+
+Every deck has exactly ONE slide with maximum animation intensity. All other slides use the same minimal entrance animation.
+
+This is not a suggestion. A deck where every slide has elaborate animation trains the audience to ignore animation as filler. The one dramatic slide lands because every other slide was quiet.
+
+**What counts as maximum intensity:**
+- Counter animation on stat numbers (counting up to the final value)
+- Staggered multi-element entrance (each stat/bullet appears with a slight delay)
+- Background effect (gradient mesh, grid pattern, particle-like CSS animation)
+- Combined: dramatic entrance + background effect on the same slide
+
+**What counts as minimal (the default for all other slides):**
+- Single fade + slide-up on the slide content block (the `.reveal` class)
+- 200-400ms duration, `ease-out` or `ease-out-expo` easing
+- No staggering on regular slides
+
+---
+
+## Animation Budget by Deck Type
+
+### Investor pitch
+- **Default entrance:** Fade + slide-up on `.slide-content` (300ms ease-out)
+- **Unmissable slide (stat-highlight):** Counter animation on each stat number + staggered entrance (each stat appears 150ms after the previous)
+- **Avoid:** Particle systems, glitch effects, 3D tilt on hover, parallax scrolling
+
+### Sales deck
+- **Default entrance:** Scale-in on `.slide-content` (`transform: scale(0.97)` → `scale(1)`, 300ms)
+- **Unmissable slide (stat-highlight):** Counter animation on the ROI number + brief background flash
+- **Avoid:** Bouncy easing (`cubic-bezier` with values > 1), script/handwritten fonts on animated text, anything > 500ms
+
+### Conference talk
+- **Default entrance:** Blur-in (blur from 8px to 0, 400ms ease-out) on main content block
+- **Unmissable slide:** Staggered text reveals + ONE background effect (gradient mesh or grid pattern CSS animation)
+- **Background effect:** Subtle animated gradient or grid on section-divider slides only -- not on content slides
+- **Avoid:** Corporate navy as the dominant color (defeats the conference aesthetic), same entrance on every single element
+
+### Internal presentation
+- **Default entrance:** Simple fade (opacity 0 → 1, 150ms ease)
+- **Unmissable slide:** Same fade -- no dramatic animation for internal decks
+- **Avoid:** Any animation that could be perceived as distracting in a board meeting
+
+---
+
+## Which Snippets to Use from animation-patterns.md
+
+Reference these specific sections from `/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md`:
+
+**For investor/sales decks → Core Entrance Animations section:**
+- "Fade + Slide Up" -- most versatile, use for default slide entrance
+- "Scale In" -- good for sales decks, slightly warmer feeling
+
+**For conference talks → Core Entrance Animations + Background Effects:**
+- "Blur In" -- for headline entrances
+- "Gradient Mesh" -- for section-divider backgrounds
+- "Grid Pattern" -- for technical/developer conference decks
+
+**For the one dramatic slide → Interactive Effects:**
+- Counter animation for stat numbers -- in the Optional Enhancements section of html-template.md
+
+**For ALL decks → Intersection Observer setup:**
+The `.reveal` class + Intersection Observer pattern from html-template.md. This is the backbone of all entrance animations. Every slide's content block gets `class="reveal"` and becomes visible when scrolled into view.
+
+---
+
+## Animation Reference Table
+
+| Deck type | Default slide | Unmissable slide | Background effects | Avoid |
+|---|---|---|---|---|
+| Investor pitch | Fade + slide-up (300ms) | Counter + staggered stats | None | Particles, glitch, 3D tilt |
+| Sales deck | Scale-in (300ms) | Counter on ROI number | None | Bouncy easing, > 500ms |
+| Conference talk | Blur-in (400ms) | Staggered + gradient mesh | Section dividers only | Corporate uniformity |
+| Internal | Fade (150ms) | Fade only | None | Any elaborate animation |
+| Onboarding (soft-cloud) | Fade + slide-up (250ms) | Staggered steps | Light gradients OK | Heavy or aggressive motion |
+
+---
+
+## Technical Notes
+
+**Stagger implementation:** Apply `animation-delay: calc(var(--i) * 0.15s)` to each stat or bullet element, where `--i` is set via inline style (`style="--i: 0"`, `style="--i: 1"`, etc.).
+
+**Counter animation:** Target `.stat-number` elements. Read the full JS implementation from `html-template.md`'s Optional Enhancements section. Briefly: count from 0 to final value over ~1.2 seconds using `requestAnimationFrame`, applying `easeOutExpo` curve.
+
+**`prefers-reduced-motion` is mandatory:** Every animation must have a corresponding reduced-motion override. The pattern from `viewport-base.css`:
+```css
+@media (prefers-reduced-motion: reduce) {
+  .reveal { opacity: 1; transform: none; transition: none; }
+  /* Disable all transforms and transitions */
+}
+```
+
+**Do not animate layout properties:** Never animate `height`, `width`, `padding`, `margin`. Only animate `opacity`, `transform`, `filter`. Layout animations trigger expensive reflows.
+
+**Performance check:** If a background effect uses CSS animation (like an animated gradient), add `will-change: transform` or `will-change: opacity` to the animated element -- but only for that one element, not globally.