site-slides

name	site-slides
description	Generate presentation slides from images or PDF files. Use when user wants to create slides, generate presentations, or convert PDF to slides for the training camp website. Triggers on keywords like "slides", "presentation", "幻灯片", "演示文稿".

Site Slides Generator

Generate presentation slides for the AI training camp website from a directory of images or a PDF file.

Usage

User provides a directory name (e.g., test1), and this skill will:

1. Look for the directory in ./site/public/slides/<directory-name>
2. If not found, report an error
3. If found, process the contents to generate slides

Workflow

Step 1: Validate Directory

Check if the directory exists:

ls ./site/public/slides/<directory-name>

If directory doesn't exist, inform the user and stop.

Step 2: Analyze Contents

Check what's in the directory:

• If there's exactly ONE .pdf file and no image files → Go to Step 3 (PDF conversion)
• If there are image files (.jpg, .jpeg, .png, .gif, .webp) → Go to Step 4 (Generate slides)

Step 3: PDF to Images Conversion

If directory contains only a PDF file:

1. Check if pdf2jpg command exists:

   which pdf2jpg
   

2. If not found, install swiss-knife:

   cargo install swiss-knife
   

3. Convert PDF to JPG images:

   cd ./site/public/slides/<directory-name> && pdf2jpg <filename>.pdf
   

   This generates 001.jpg, 002.jpg, etc. in the current directory.

4. Delete the original PDF file after successful conversion (if it still exists). Since we're still in the slides directory, use the filename directly:

   rm -f <filename>.pdf
   

   Note: Use -f flag in case pdf2jpg already deleted the file.

5. Proceed to Step 4.

Step 4: Generate Slides MDX File

1. List all image files in sorted order:

   ls -1 ./site/public/slides/<directory-name>/*.{jpg,jpeg,png,gif,webp} 2>/dev/null | sort
   

2. Read each image to understand its content and generate appropriate captions.

3. Ask the user for:

   • Title: The presentation title (e.g., "Werner Vogels - The Renaissance Developer")
   • Description: Brief description of the presentation
   • Category: Category for the presentation (e.g., "技术分享", "课程介绍")

4. Create MDX file at ./site/src/pages/presentations/<directory-name>.mdx following this template:

---
layout: ../../layouts/PresentationLayout.astro
title: <TITLE>
description: <DESCRIPTION>
category: <CATEGORY>
---

import PresentationCarousel from '../../components/presentations/PresentationCarousel';
import { getUrl } from '../../utils/url';

# <TITLE>

<BRIEF_INTRO>

<PresentationCarousel
  client:load
  title="<TITLE>"
  slides={[
    {
      image: "/slides/<directory-name>/<image-filename>",
      alt: "<alt-text>",
      caption: "<caption>"
    },
    // ... more slides
  ]}
/>

## 核心要点

<KEY_POINTS_BASED_ON_CONTENT>

## 延伸阅读

- [查看课程大纲](/curriculum) - 了解 AI 编程训练营完整内容
- [探索工具生态](/tools) - 学习 AI 编程工具的使用
- [浏览学习资料](/materials) - 获取更多技术学习资源

Step 5: Update index.astro

1. Read ./site/src/pages/presentations/index.astro

2. Add a new entry to the presentations array:

   {
     title: "<TITLE>",
     description: "<DESCRIPTION>",
     href: getUrl("presentations/<directory-name>"),
     thumbnail: getUrl("slides/<directory-name>/<first-image>"),
     slideCount: <NUMBER_OF_SLIDES>,
     date: "<YYYY-MM-DD>",  // Today's date
     category: "<CATEGORY>",
   },
   

3. Use the first image as the thumbnail (or ask the user to pick one).

Example

User: "Create slides from the vogels-keynote directory"

1. Check ./site/public/slides/vogels-keynote exists ✓
2. Find 32 JPG images
3. Ask user for title, description, category
4. Read images to understand content
5. Generate ./site/src/pages/presentations/vogels-keynote.mdx
6. Update ./site/src/pages/presentations/index.astro

Notes

• Always read a sample of images (first, middle, last) to understand the presentation content
• Generate meaningful alt text and captions based on image content
• Use today's date for the date field in index.astro
• Image paths in the MDX should be absolute paths starting with /slides/

Important: Avoiding MDX Syntax Errors

When generating captions and alt text, NEVER use Chinese quotation marks (" and ") inside JSX string attributes. These characters cause MDX parsing errors.

Bad example:

caption: "真正的问题不是"AI会取代我吗？"而是..."

Good example (use 「」 instead):

caption: "真正的问题不是「AI会取代我吗？」而是..."

Also avoid:

• Unescaped special characters in strings
• Line breaks within caption strings
• Using backticks or other quote characters that might conflict with JSX syntax