Slidev Builder — Presentation Generator
Tạo Slidev project + PDF từ nội dung đầu vào. Activate slidev skill (built-in, cùng context) cho Slidev Markdown generation + PDF export.
Output: output/{slug}-{YYMMDD-HHmm}/slides/{slug}-{theme-name}/ (package.json, slides.md, dist/{slug}.pdf)
Step 1: Tiếp nhận nội dung & Cấu hình
- Đọc input: text trực tiếp hoặc file path
- Phân tích sơ bộ: topic, length, complexity
- Hỏi user bằng AskUserQuestion (4 câu hỏi):
Câu hỏi 1 - Loại nội dung (header: "Content type"):
- "Hướng dẫn/Giáo dục" - Tutorial, hướng dẫn học (Gagné + scaffolding)
- "Business/Báo cáo" - Phân tích, đề xuất, báo cáo (Pyramid Principle)
- "Thuyết phục/Pitch" - Pitch sản phẩm, proposal (PAS + Sparkline)
- "Technical/Process" - Quy trình, kiến trúc, so sánh kỹ thuật (SCR)
Câu hỏi 2 - Mức độ chi tiết (header: "Detail level"):
- "L1 - Tổng quan" - Ý chính, bullet ngắn gọn (5+ slides)
- "L2 - Cân bằng" - Ý chính + giải thích + ví dụ (10+ slides)
- "L3 - Chi tiết" - Deep dive, code examples (18+ slides)
Câu hỏi 3 - Ngôn ngữ (header: "Language"):
- "Tiếng Việt" (Recommended)
- "English"
- "Song ngữ" - Title tiếng Anh, body tiếng Việt
Câu hỏi 4 - Audience (header: "Audience"):
- "Executive/Decision maker" - Bottom-line upfront, metrics, ngắn gọn
- "Technical team" - Jargon OK, chi tiết kỹ thuật
- "Mixed/General" - Cần giải thích thuật ngữ, ví dụ cụ thể
- "Workshop/Hands-on" - Interactive, knowledge checks
- Phân tích nội dung → tạo slide plan nội bộ (title + key points cho mỗi slide)
- Tạo output folder:
output/{slug}-{YYMMDD-HHmm}/
Slidev Theme List
Official themes:
| Theme | Package | Mô tả |
|---|---|---|
default | @slidev/theme-default | Minimalist, light/dark |
seriph | @slidev/theme-seriph | Serif-based formal, light/dark |
apple-basic | @slidev/theme-apple-basic | Keynote-inspired, light/dark |
bricks | @slidev/theme-bricks | Playful blocks, light |
shibainu | @slidev/theme-shibainu | Cute dark theme |
Community themes (phổ biến):
| Theme | Package | Mô tả |
|---|---|---|
geist | slidev-theme-geist | Vercel design system, light/dark |
academic | slidev-theme-academic | Formal academic, light/dark |
dracula | slidev-theme-dracula | Vibrant dark theme |
User cũng có thể nhập tên bất kỳ Slidev theme từ npm.
Auto Theme Recommendation
| Content Type | Primary | Secondary |
|---|---|---|
| Hướng dẫn/Giáo dục | seriph | default |
| Business/Báo cáo | default | apple-basic |
| Thuyết phục/Pitch | apple-basic | seriph |
| Technical/Process | default | seriph |
Step 2: Chọn Slidev theme
- Hiển thị bảng Slidev Theme List
- Hỏi user bằng AskUserQuestion (header: "Theme"): đánh dấu recommended theme dựa trên Auto Theme Recommendation + cho phép nhập tên khác qua "Other"
Step 3: Tạo slide (Slidev)
- Xác định theme package name:
- Official themes: @slidev/theme-{name} - Community themes: slidev-theme-{name} - Custom name → dùng nguyên tên
- Đọc
references/slide-templates.md(relative to this skill folder) để nắm Slidev Markdown patterns - Activate
slidevskill trong cùng agent context. Cung cấp: Headmatter config:theme: {theme-name} fonts: sans: Tahoma serif: Arial mono: Fira Code provider: noneLayout mapping table: Slide Type Slidev Layout title cover agenda default content default comparison two-cols-header comparison-simple two-cols summary default cta end transition section statement statement metric fact quote quote table default diagram default code default
- Nội dung từng slide (title, body content, slide type → layout) - Slidev Markdown templates từ references/slide-templates.md - Vietnamese fonts: Tahoma, Arial, sans-serif qua fonts config - Output path: {output_folder}/slides/{slug}-{theme-name}/
- Slidev skill tạo project:
package.json(deps:@slidev/cli,{theme-package},playwright-chromium) +slides.md(headmatter + all slides) - Install:
pnpm installtrong Slidev project folder - Export PDF:
npx slidev export --output dist/{slug}.pdf --timeout 60000 - Thông báo output:
- Slidev project path + PDF path (nếu export thành công) - Hướng dẫn: cd {project-path} && pnpm dev để xem slides - "Chạy lại /slidev-builder {output_folder}/ với theme khác để tạo variant mới."
Slidev Constraints (CRITICAL)
Khi activate slidev skill, PHẢI tuân thủ:
- Vietnamese fonts:
Tahoma, Arial, sans-serifqua fonts config,provider: none. KHÔNG dùng Impact, Courier New - Text-only: Không image layouts, không embed images. Chỉ text, bullets, code blocks
- Speaker notes: HTML comments
<!-- notes -->sau content mỗi slide - Code blocks: Native Markdown fenced blocks với language tag. Max 10-15 dòng/slide. Line highlighting
{2,3}hoặc click-based{1|3-4|all} - Nested lists: Indent 2 spaces. Dùng thoải mái cho L2/L3 sub-bullets
- Max content per slide: 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:
---giữa các slides - Layout front matter: Mỗi slide PHẢI có layout specification
- Projector contrast: contrast ratio >= 4.5:1 (WCAG AA)
- v-click:
<v-clicks>wrapper cho L2/L3 bullet lists. L1 KHÔNG dùng v-click - Mermaid diagrams: Built-in, ```
mermaid``` code block. Max 8-10 nodes - Slide transitions:
transition: fadehoặcslide-left. Global trong headmatter - v-mark:
<span v-mark.highlight>cho key terms. Max 1-2 per slide - Shiki Magic Move: `
magic-move``` cho L2/L3 technical. Max 3-4 steps - Inline code trên dark slides:
layout: cover,end,sectionchứa inline code → thêm scoped style:<style> code {color: #e2e8f0!important; background: rgba(255,255,255,0.15)!important;} </style>
Important Notes
- Chỉ tạo text-only slides, không hình ảnh
- Slidev Markdown templates: xem
references/slide-templates.md - Theme do user chọn từ Slidev ecosystem, không cần custom CSS
pnpm devđể preview slides trong browser- PDF export dùng Playwright (cần
playwright-chromiumdependency)