make-slides

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.'

跳到安装

仓库: carlvellotti/pg-carl-vellotti-master-cc
最近来源活动: 2026年3月3日 21:05
检测到的 SKILL.md 语言: 英语
星标: 16
分支: 9

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

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

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/carlvellotti/pg-carl-vellotti-master-cc --skill make-slides

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

spin-up

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

2026-03-03

web-research

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-03

查看这个仓库的全部 Skills

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=>

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

make-slides

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

Make Slides

Dimensions

Required Inputs

Design Rules

Layout Principles

Typography

Color

Visual Elements

What NOT to Do

Build Process

Step 1: Plan the Deck

Step 2: Build the HTML

Step 3: Serve and Measure (MANDATORY)

Step 4: Screenshot Each Slide

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

Step 6: Present to User

Cleanup

Make Slides

Dimensions

Required Inputs

Design Rules

Layout Principles

Typography

Color

Visual Elements

What NOT to Do

Build Process

Step 1: Plan the Deck

Step 2: Build the HTML

Step 3: Serve and Measure (MANDATORY)

Step 4: Screenshot Each Slide

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

Step 6: Present to User

Cleanup