Перейти к содержанию

PROMPT: Initialize sli.dev Presentation Project

You are setting up a new sli.dev presentation project from scratch in the current empty directory.

CRITICAL: Use Context7 MCP if available

Before executing ANY commands, check if you have access to Context7 MCP tools (resolve-library-id and get-library-docs).

If Context7 IS available: 1. First resolve the library ID for "slidev" via resolve-library-id 2. Fetch the latest documentation via get-library-docs for the resolved ID 3. Use the ACTUAL current installation instructions, CLI commands, and configuration format from the docs — do NOT rely on your training data, it may be outdated 4. Pay special attention to: required Node.js version, package manager compatibility, frontmatter schema changes, breaking changes in recent versions 5. Also resolve and check docs for any slidev plugins or themes if needed

If Context7 is NOT available: - Proceed with your best knowledge but warn the user that docs were not verified against the latest version

Steps

1. Verify prerequisites

node --version    # must be >= 18
npm --version     # or pnpm/bun — check which is available

If node is not installed or version is too old — STOP and tell the user.

2. Initialize the project

# Init package.json
npm init -y

# Install slidev as dev dependency
npm install -D @slidev/cli @slidev/theme-default

3. Create project structure

.
├── package.json
├── slides.md          # main presentation file
├── public/
│   └── images/        # presentation images go here
├── components/        # custom Vue components (optional)
├── styles/
│   └── index.css      # global custom styles (optional)
└── .gitignore

4. Configure package.json scripts

Add to package.json:

{
  "scripts": {
    "dev": "slidev",
    "build": "slidev build",
    "export": "slidev export"
  }
}

5. Create slides.md

If the user has provided a slides.md file (e.g. from Watchword key praktikum-slides-md or horsemigration-slides-md), use that content.

If not, create a minimal starter:

---
theme: default
title: "Presentation Title"
drawings:
  persist: false
transition: slide-left
---

# Slide 1

Hello World

---

# Slide 2

Content here

6. Create .gitignore

node_modules/
dist/
.slidev/
*.local

7. Create public/images/ directory

mkdir -p public/images

8. Install Google Fonts (if custom fonts needed)

If slides.md frontmatter specifies custom fonts (e.g. Inter, JetBrains Mono, Share Tech Mono), verify they are either: - Available via Google Fonts (slidev auto-loads from fonts: frontmatter) - Or installed locally

Check the fonts: block in the frontmatter and confirm it matches slidev's font configuration format from the docs.

9. Verify it runs

npm run dev

Should start on http://localhost:3030

10. Report to user

Tell the user: - What was installed and which versions - Where to put their images (public/images/) - How to run (npm run dev) - How to build for production (npm run build) - How to export to PDF (npm run export — may need playwright: npx playwright install chromium)

Important notes

  • If the user mentions specific slidev plugins (e.g. @slidev/plugin-drawings), install those too
  • If using custom CSS with CSS custom properties (like our Tinkerer DNA theme), it goes in the <style> block inside slides.md or in styles/index.css
  • The public/ directory is served as static assets — images referenced as /images/filename.png in slides.md must be in public/images/
  • If Context7 found any breaking changes or deprecations, warn the user explicitly