一键在 Manus 中运行任何 Skill

make-slides

星标15

分支9

更新时间2026年3月3日 21:05

Build presentation slides as HTML/CSS with Puppeteer screenshot loop. Use when the user mentions 'make slides,' 'create slides,' 'presentation,' 'slide deck,' or 'make-slides.'

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

carlvellotti

carlvellotti/pg-carl-vellotti-master-cc

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Make Slides

Build polished presentation slides as HTML/CSS, with a Puppeteer measure → screenshot → iterate loop to ensure pixel-perfect output.

Dimensions

All slides are 1920×1080px (16:9 standard presentation).

Required Inputs

Before starting, confirm you have:

Content — what the slides should cover (outline, notes, transcript, bullet points)
Slide count (optional) — how many slides. Default: let the content dictate.
Style direction (optional) — dark/light, brand colors, mood. Default: dark background, clean type.

If content is missing or unclear, ask before proceeding.

Design Rules

Layout Principles

One idea per slide. If you're cramming, split it.
Visual hierarchy matters more than decoration. Title > key point > supporting detail.
Generous whitespace. Slides are projected large — breathing room is a feature.
Left-align text by default. Center-alignment only for single-line titles or hero statements.

Typography

Title: 72-96px, weight 700-800
Subtitle/key point: 48-60px, weight 600
Body text: 36-44px, weight 400-500
Caption/source: 24-28px, weight 400
Never go below 24px — if the audience can't read it from the back of the room, cut words instead
Use a clean sans-serif: 'Inter', 'Outfit', system-ui, sans-serif

Color

Dark theme default: #0f172a background, #f8fafc text, one accent color
Light theme: #ffffff background, #1e293b text, one accent color
Accent color usage: headlines, key numbers, underlines, highlight boxes — never more than 30% of the slide
High contrast always. Test: squint at it. If you can't read it, fix it.

Visual Elements

Charts/diagrams: Simple, large labels, 3-4 data points max per slide
Icons: Optional. If used, keep consistent style (outline OR filled, not mixed)
Images: Full-bleed or contained with rounded corners. Never stretched.
Code blocks: Dark background, large monospace font (28px+), syntax highlighting

What NOT to Do

No clip art or stock photo placeholders
No bullet point walls (3 bullets max, or use a different layout)
No gradients unless intentional and subtle
No drop shadows on text
No logo on every slide (title + closing only)
No transition animations (this is static HTML)

Build Process

Step 1: Plan the Deck

From the content, outline:

Slide 1: [Title slide — topic + speaker]
Slide 2: [Key question or hook]
Slide 3: [First main point]
...
Slide N: [Closing / CTA]

Present the outline to the user for approval before building.

Step 2: Build the HTML

Create one HTML file per slide in the project folder. Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    .slide {
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      position: relative;
      font-family: 'Inter', system-ui, sans-serif;
      padding: 80px 100px;
      /* colors as CSS variables */
      --bg: #0f172a;
      --text: #f8fafc;
      --accent: #3b82f6;
      background: var(--bg);
      color: var(--text);
    }
  </style>
</head>
<body style="background:#1e1e1e; display:flex; justify-content:center; align-items:center; min-height:100vh;">
  <div class="slide">
    <!-- Slide content -->
  </div>
</body>
</html>

Step 3: Serve and Measure (MANDATORY)

Start the local server and verify with Puppeteer:

cd PROJECT_DIR && python3 -m http.server 8765 &

Measure overflow:

node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
  await page.goto('http://localhost:8765/SLIDE_FILE.html', { waitUntil: 'networkidle0' });
  const m = await page.evaluate(() => {
    const el = document.querySelector('.slide');
    return {
      containerH: el.offsetHeight,
      contentH: el.scrollHeight,
      overflow: el.scrollHeight - el.offsetHeight,
      containerW: el.offsetWidth,
      contentW: el.scrollWidth,
      overflowW: el.scrollWidth - el.offsetWidth
    };
  });
  console.log(JSON.stringify(m, null, 2));
  await browser.close();
})();
"

Target: overflow = 0 in both dimensions.

Step 4: Screenshot Each Slide

node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
  await page.goto('http://localhost:8765/SLIDE_FILE.html', { waitUntil: 'networkidle0' });
  const el = await page.\$('.slide');
  await el.screenshot({ path: 'slide-NN.png' });
  console.log('Screenshot saved');
  await browser.close();
})();
"

Step 5: Iterate (3-5 rounds per slide)

Each round: measure → screenshot → evaluate → edit → measure again.

Check each slide for:

No overflow or clipping
Text readable at presentation size
Visual hierarchy is clear
Accent color used intentionally, not everywhere
Whitespace is generous, not cramped

Step 6: Present to User

Show all slide screenshots in order. Ask for feedback. Iterate as needed.

Cleanup

When done:

pkill -f "python3 -m http.server" 2>/dev/null

同仓库更多 Skills

同仓库

spin-up

carlvellotti/pg-carl-vellotti-master-cc

Set up a project's CLAUDE.md with context management best practices — the subagent delegation pattern that keeps the main conversation clean.

2026-03-0315

web-research

carlvellotti/pg-carl-vellotti-master-cc

Web research using Tavily and Firecrawl. Searches the web, reads pages, crawls sites, and synthesizes findings. Use when: (1) user says "web research", "research this", "look into", "find out about", "what's the latest on", "/web-research", (2) user needs information from the web to inform a decision, strategy, or content, (3) user provides a URL and wants it read/analyzed, (4) user wants competitive intel, market research, or topic deep-dives. NOT for: X/Twitter research (use /x-research), Reddit research (use Reddit MCP directly), scraping for data pipelines, or browser automation unrelated to research.

2026-03-0315

name	make-slides
description	Build presentation slides as HTML/CSS with Puppeteer screenshot loop. Use when the user mentions 'make slides,' 'create slides,' 'presentation,' 'slide deck,' or 'make-slides.'
user-invocable	true
allowed-tools	Read,Write,Edit,Bash,Glob,Grep

Make Slides

Build polished presentation slides as HTML/CSS, with a Puppeteer measure → screenshot → iterate loop to ensure pixel-perfect output.

Dimensions

All slides are 1920×1080px (16:9 standard presentation).

Required Inputs

Before starting, confirm you have:

Content — what the slides should cover (outline, notes, transcript, bullet points)
Slide count (optional) — how many slides. Default: let the content dictate.
Style direction (optional) — dark/light, brand colors, mood. Default: dark background, clean type.

If content is missing or unclear, ask before proceeding.

Design Rules

Layout Principles

One idea per slide. If you're cramming, split it.
Visual hierarchy matters more than decoration. Title > key point > supporting detail.
Generous whitespace. Slides are projected large — breathing room is a feature.
Left-align text by default. Center-alignment only for single-line titles or hero statements.

Typography

Title: 72-96px, weight 700-800
Subtitle/key point: 48-60px, weight 600
Body text: 36-44px, weight 400-500
Caption/source: 24-28px, weight 400
Never go below 24px — if the audience can't read it from the back of the room, cut words instead
Use a clean sans-serif: 'Inter', 'Outfit', system-ui, sans-serif

Color

Dark theme default: #0f172a background, #f8fafc text, one accent color
Light theme: #ffffff background, #1e293b text, one accent color
Accent color usage: headlines, key numbers, underlines, highlight boxes — never more than 30% of the slide
High contrast always. Test: squint at it. If you can't read it, fix it.

Visual Elements

Charts/diagrams: Simple, large labels, 3-4 data points max per slide
Icons: Optional. If used, keep consistent style (outline OR filled, not mixed)
Images: Full-bleed or contained with rounded corners. Never stretched.
Code blocks: Dark background, large monospace font (28px+), syntax highlighting

What NOT to Do

No clip art or stock photo placeholders
No bullet point walls (3 bullets max, or use a different layout)
No gradients unless intentional and subtle
No drop shadows on text
No logo on every slide (title + closing only)
No transition animations (this is static HTML)

Build Process

Step 1: Plan the Deck

From the content, outline:

Slide 1: [Title slide — topic + speaker]
Slide 2: [Key question or hook]
Slide 3: [First main point]
...
Slide N: [Closing / CTA]

Present the outline to the user for approval before building.

Step 2: Build the HTML

Create one HTML file per slide in the project folder. Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    .slide {
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      position: relative;
      font-family: 'Inter', system-ui, sans-serif;
      padding: 80px 100px;
      /* colors as CSS variables */
      --bg: #0f172a;
      --text: #f8fafc;
      --accent: #3b82f6;
      background: var(--bg);
      color: var(--text);
    }
  </style>
</head>
<body style="background:#1e1e1e; display:flex; justify-content:center; align-items:center; min-height:100vh;">
  <div class="slide">
    <!-- Slide content -->
  </div>
</body>
</html>

Step 3: Serve and Measure (MANDATORY)

Start the local server and verify with Puppeteer:

cd PROJECT_DIR && python3 -m http.server 8765 &

Measure overflow:

node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
  await page.goto('http://localhost:8765/SLIDE_FILE.html', { waitUntil: 'networkidle0' });
  const m = await page.evaluate(() => {
    const el = document.querySelector('.slide');
    return {
      containerH: el.offsetHeight,
      contentH: el.scrollHeight,
      overflow: el.scrollHeight - el.offsetHeight,
      containerW: el.offsetWidth,
      contentW: el.scrollWidth,
      overflowW: el.scrollWidth - el.offsetWidth
    };
  });
  console.log(JSON.stringify(m, null, 2));
  await browser.close();
})();
"

Target: overflow = 0 in both dimensions.

Step 4: Screenshot Each Slide

node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
  await page.goto('http://localhost:8765/SLIDE_FILE.html', { waitUntil: 'networkidle0' });
  const el = await page.\$('.slide');
  await el.screenshot({ path: 'slide-NN.png' });
  console.log('Screenshot saved');
  await browser.close();
})();
"

Step 5: Iterate (3-5 rounds per slide)

Each round: measure → screenshot → evaluate → edit → measure again.

Check each slide for:

No overflow or clipping
Text readable at presentation size
Visual hierarchy is clear
Accent color used intentionally, not everywhere
Whitespace is generous, not cramped

Step 6: Present to User

Show all slide screenshots in order. Ask for feedback. Iterate as needed.

Cleanup

When done:

pkill -f "python3 -m http.server" 2>/dev/null