ProSlide – Professional Slide Generator

Tạo professional text-only slides từ content input. Vietnamese default. Activate slidev skill (built-in, cùng context) cho Slidev Markdown generation + PDF export.

Output Folder Structure

Mỗi lần tạo presentation, output được lưu trong folder có cấu trúc:

output/
└── {slug}-{YYMMDD-HHmm}/
    ├── outline.md
    ├── content-map.md
    ├── coverage-report.md
    ├── research-notes.md
    └── slides/
        └── {slug}-{theme-name}/    # Slidev project
            ├── package.json
            ├── slides.md
            └── dist/               # After export (gitignored)
                └── {slug}.pdf

Naming rules:

• {slug}: kebab-case từ topic chính (max 30 chars)

• {YYMMDD-HHmm}: timestamp lúc tạo folder

• {theme-name}: tên Slidev theme đã chọn (VD: default, seriph, apple-basic)

• Khi reuse outline để generate thêm slide mới, folder mới được thêm vào slides/ của folder đã có

Step 0: Detect Mode (New / Reuse)

1. Kiểm tra input từ user:

   • Nếu user chỉ vào folder output đã có (chứa outline.md) → Reuse mode

   • Nếu user cung cấp nội dung mới (text, file path) → New mode

   • Nếu user nói “dùng lại outline”, “reuse”, “tạo thêm slide” + chỉ folder → Reuse mode

2. Reuse mode → nhảy thẳng tới Step 2.5 (skip Step 1 & 2)

3. New mode → tiếp tục Step 1

Step 1: Tiếp nhận nội dung & Cấu hình

1. Đọc input từ user: text trực tiếp hoặc file path (.md, .txt, .pdf)
2. Nếu input là file path, đọc nội dung file
3. Phân tích sơ bộ: topic, length, complexity
4. Hỏi user bằng AskUserQuestion (4 câu hỏi trong 1 lần):

Câu hỏi 1 – Loại nội dung (header: “Content type”):

• “Hướng dẫn/Giáo dục” – Giải thích khái niệm, tutorial, hướng dẫn học (Gagné + scaffolding)

• “Business/Báo cáo” – Phân tích, đề xuất, báo cáo kết quả (Pyramid Principle)

• “Thuyết phục/Pitch” – Bán ý tưởng, pitch sản phẩm, proposal (PAS + Sparkline)

• “Technical/Process” – Quy trình, kiến trúc, hệ thống, so sánh kỹ thuật (SCR + step-by-step)

Câu hỏi 2 – Mức độ chi tiết (header: “Detail level”):

• “L1 – Tổng quan” – Chỉ ý chính, bullet ngắn gọn (5+ slides)

• “L2 – Cân bằng” – Ý chính + giải thích + ví dụ minh họa (10+ slides)

• “L3 – Chi tiết” – Đầy đủ nội dung, deep dive, code examples (18+ slides)

Câu hỏi 3 – Ngôn ngữ (header: “Language”):

• “Tiếng Việt” – Toàn bộ nội dung tiếng Việt (Recommended)

• “English” – Toàn bộ nội dung tiếng Anh

• “Song ngữ” – Title tiếng Anh, body tiếng Việt (phù hợp technical/academic)

Câu hỏi 4 – Research bổ sung (header: “Research”):

• “Chỉ dùng source” – Tạo slide 100% từ nội dung đầu vào, không tìm thêm

• “Research thêm” – Tìm thêm data, statistics, examples từ web để bổ sung slide

• “Auto” – Tá»± động: research nếu source ít thông tin (<500 words hoặc thiếu data/metrics), skip nếu đủ

Logic đánh dấu Recommended cho câu hỏi 4:

• Nếu source < 500 words HOẶC source chỉ có bullet points không context HOẶC thiếu data/metrics/examples → đánh dấu “Research thêm” là (Recommended)

• Nếu source >= 500 words VÀ có đầy đủ data/context → đánh dấu “Chỉ dùng source” là (Recommended)

Step 1.5: Research bổ sung (Optional)

Chạy sau Step 1, trước Step 2. Quyết định dựa trên câu hỏi 4 ở Step 1.

Khi nào chạy:

• User chọn “Research thêm” → luôn chạy

• User chọn “Auto” → chạy NẾU source < 500 words HOẶC source thiếu data/metrics/examples cụ thể

• User chọn “Chỉ dùng source” → SKIP hoàn toàn, nhảy tới Step 2

Process:

1. Extract 3-5 topic keywords từ source input (dựa trên content type đã chọn)

2. Tạo 2-3 search queries phù hợp:

   • Query 1: "{topic chính}" statistics data {năm hiện tại} (tìm số liệu mới nhất)

   • Query 2: "{topic chính}" trends insights (tìm xu hướng, insights)

   • Query 3: "{topic chính}" examples best practices (tìm ví dụ, case studies)

3. Chạy WebSearch cho mỗi query

4. Extract findings relevant: statistics, data points, examples, quotes, trends

5. LÆ°u kết quả vào {output_folder}/research-notes.md theo format:

# Research Notes — [Topic]

## Search Queries

1. [query 1]
2. [query 2]
3. [query 3]

## Findings

### Statistics & Data

- [stat 1] — Source: [url/name]
- [stat 2] — Source: [url/name]

### Trends & Insights

- [insight 1]
- [insight 2]

### Examples & Case Studies

- [example 1]
- [example 2]

## Selected for Slides

Items below sẽ được đưa vào Content Map với tag [R]:

1. [item] — lý do chọn
2. [item] — lý do chọn

1. Append selected items vào Content Map (Step 2) với prefix [R] để phân biệt source gốc vs researched
2. Thông báo user: “Research xong: tìm thấy X data points, Y insights. Đã lÆ°u tại research-notes.md”

Quy tắc research:

• Chỉ lấy thông tin factual, có nguồn rõ ràng

• Ưu tiên: số liệu cụ thể > xu hướng > ví dụ > quotes

• KHÔNG thay thế nội dung source, chỉ BỔ SUNG

• Max 10 items đưa vào Content Map (tránh overwhelming)

• Research items trong outline phải ghi rõ “(Nguồn: research)” trong speaker notes hoặc content

Visual Patterns per Content Type

Khi tạo slides, áp dụng visual patterns phù hợp với content type đã chọn:

Auto Theme Recommendation

Dựa trên content type, gợi ý Slidev theme (user có quyền chọn khác hoặc nhập tên theme bất kỳ):

Slidev Theme List

Danh sách themes chính thức và community phổ biến, hiển thị cho user khi chọn:

Official themes:

Community themes (phổ biến):

User cũng có thể nhập tên bất kỳ Slidev theme từ npm.

Step 2: Phân tích nội dung & Tạo outline (New mode)

1. Tạo output folder: output/{slug}-{YYMMDD-HHmm}/ và subfolder slides/

2. Đọc references/outline-rules.md (relative to this skill folder) để nắm quy tắc outline

3. Áp dụng framework tương ứng với content type đã chọn ở Step 1 (xem Content Type → Framework Mapping trong outline-rules.md)

4. Content Map (xem “Content Map Rules” trong outline-rules.md):

   • Parse source → extract topics → assign priority (must/should/nice) theo detail level

   • Nếu Step 1.5 đã chạy → append research items vào Content Map với prefix [R] (xem outline-rules.md)

   • LÆ°u Content Map ra file {output_folder}/content-map.md

5. Phân tích nội dung theo detail level đã chọn (xem Detail Level Mapping + Content Selection Criteria trong outline-rules.md)

6. Tạo outline theo cấu trúc bắt buộc: Opening > Body > Closing. Cross-check với Content Map: mọi must topics phải xuất hiện, should/nice theo threshold

7. LÆ°u outline ra file {output_folder}/outline.md với metadata header (xem Outline File Format trong outline-rules.md)

8. Hiển thị outline cho user review (numbered list với slide titles + brief content description)

9. Coverage Report (xem “Coverage Report Rules” trong outline-rules.md):

   • Generate file {output_folder}/coverage-report.md mapping source topics → slides + omission justification

   • Thông báo cho user: tóm tắt 1 dòng coverage % + mention report file path

10. Feedback loop: Hỏi user “Outline OK? Bạn có muốn chỉnh sá»­a gì không?” bằng AskUserQuestion (header: “Outline review”):

• “OK, tiếp tục” – Chấp nhận outline, chuyển sang chọn theme

• “Chỉnh sá»­a” – User sẽ mô tả thay đổi → cập nhật outline file + re-check coverage → show lại → hỏi lại

Step 2.5: Reuse mode (khi đã có outline)

1. Đọc {output_folder}/outline.md — parse metadata header để lấy: content_type, detail_level, language, slug
2. Hiển thị tóm tắt cho user: “Reuse outline: {title}, {detail_level}, {language}, {N} slides”
3. Tiếp tục chọn theme ở Step 2.6

Step 2.6: Chọn Slidev theme (cả New và Reuse mode)

1. Hiển thị bảng Slidev Theme List (xem section ở trên)
2. Kiểm tra {output_folder}/slides/ xem đã có Slidev project folder nào chÆ°a → show user “(đã tạo)” bên cạnh theme đã dùng
3. Hỏi user bằng AskUserQuestion (header: “Theme”): “Chọn Slidev theme:” + đánh dấu recommended theme dá»±a trên bảng Auto Theme Recommendation + cho phép nhập tên theme khác qua “Other”

Step 3: Tạo slide (Slidev)

1. Xác định theme package name:

   • Official themes: @slidev/theme-{name} (VD: @slidev/theme-seriph)

   • Community themes: slidev-theme-{name} (VD: slidev-theme-geist)

   • Nếu user nhập custom name → dùng nguyên tên

2. Đọc references/slide-templates.md (relative to this skill folder) để nắm Slidev Markdown patterns cho từng slide type

3. Đọc outline từ {output_folder}/outline.md (nếu Reuse mode) hoặc từ context (nếu vừa tạo)

4. Activate slidev skill trong cùng agent context. Cung cấp:

   • Headmatter config:

     theme: { theme-name }
     fonts:
       sans: Tahoma
       serif: Arial
       mono: Fira Code
       provider: none
     

   • Layout mapping table cho mỗi slide type:

     Slide Type	Slidev Layout
     title	cover
     agenda	default
     content	default
     comparison	two-cols-header
     summary	default
     cta	end
     transition	section
     statement	statement
     metric	fact
     code	default

   • Nội dung từng slide theo outline (title, body content, slide type → layout)

   • Slidev Markdown templates từ references/slide-templates.md

   • Vietnamese fonts requirement: Tahoma, Arial, sans-serif qua fonts config

   • Output path: {output_folder}/slides/{slug}-{theme-name}/

5. Slidev skill tạo Slidev project:

   • package.json:

     {
       "name": "{slug}-{theme-name}",
       "private": true,
       "scripts": {
         "dev": "slidev",
         "build": "slidev build",
         "export": "slidev export --output dist/{slug}.pdf --timeout 60000"
       },
       "dependencies": {
         "@slidev/cli": "latest",
         "{theme-package}": "latest"
       },
       "devDependencies": {
         "playwright-chromium": "latest"
       }
     }
     

   • slides.md: Headmatter + all slides theo Slidev Markdown format

6. Install dependencies: pnpm install trong Slidev project folder

7. Export PDF: npx slidev export --output dist/{slug}.pdf --timeout 60000

8. Thông báo output:

   • Slidev project path

   • PDF path (nếu export thành công)

   • Output folder path (nhắc user có thể reuse outline: /proslide + chỉ folder path)

   • Hướng dẫn: cd {project-path} && pnpm dev để xem slides trong browser

Slidev Constraints (CRITICAL)

Khi activate slidev skill, PHẢI tuân thủ các constraints sau:

• Vietnamese fonts: Dùng Tahoma, Arial, sans-serif qua fonts config trong headmatter với provider: none (system fonts, không fetch từ Google Fonts). KHÔNG dùng Impact, Courier New (Vietnamese rendering kém)

• Text-only: Không dùng image layouts, không embed images. Chỉ text, bullets, code blocks

• Speaker notes: Dùng HTML comments <!-- notes --> sau content mỗi slide

• Code blocks: Dùng native Markdown fenced blocks với language tag (python, javascript, etc.). Slidev tá»± động syntax highlight. Max 10-15 dòng/slide. Dùng line highlighting {2,3} để nhấn mạnh dòng quan trọng, hoặc click-based highlighting {1|3-4|all} để walkthrough từng phần (xem templates trong references/slide-templates.md)

• Nested lists: Slidev Markdown hỗ trợ nested lists tốt (indent 2 spaces). Dùng thoải mái cho L2/L3 sub-bullets

• Max content per slide: Tuân theo rules từ outline-rules.md:

  • L1: 2-3 bullets, <8 words/bullet

  • L2: 3-5 bullets + 1-2 sub-bullets

  • L3: 3-5 bullets + 2-3 sub-bullets, max 100 words/slide

• Slide separator: Dùng --- giữa các slides (Slidev convention)

• Layout front matter: Mỗi slide PHẢI có layout specification trong front matter block

• Projector contrast: Đảm bảo text/background contrast ratio >= 4.5:1 (WCAG AA). Theme đã chọn sẽ handle phần lớn, nhÆ°ng vẫn cần verify

Important Notes

• Chỉ tạo text-only slides, không hình ảnh

• Vietnamese fonts: Tahoma, Arial, sans-serif (qua Slidev fonts config, provider: none)

• Chi tiết quy tắc outline: xem references/outline-rules.md

• Slidev Markdown templates cho slide types: xem references/slide-templates.md

• Theme do user chọn từ Slidev ecosystem, không cần custom CSS

• Slidev project có thể chạy local bằng pnpm dev để preview slides trong browser

• PDF export dùng Playwright (cần playwright-chromium dependency)