Cline for Slides
Provides guidelines and best practices for creating and working with Slidev presentation projects.
---
description: Provides guidelines and best practices for creating and working with Slidev presentation projects.
author: https://github.com/nickbaumann98
version: 1.0
tags: ["slidev", "slides", "markdown", "vue", "vite", "guide"]
globs: ["slides.md", "**/slides.md", "*.vue", "layouts/**/*.vue", "components/**/*.vue"]
---
# Slidev Project Instructions
This document provides guidelines for working with Slidev projects. Slidev is a Markdown-based presentation tool powered by Vue and Vite.
## Core Concepts & Structure
1. **Entry Point**: The main presentation content is typically in `http://slides.md`.
2. **Slide Separation**: Slides are separated by `---` on a new line.
3. **Frontmatter/Headmatter**:
* YAML blocks at the beginning of the file (`--- ... ---`) configure the deck (headmatter) or individual slides (frontmatter).
* Headmatter (first block) applies globally (e.g., `theme`, `title`, `addons`).
* Frontmatter configures specific slides (e.g., `layout`, `background`, `class`, `transition`, `clicks`).
* **YAML Quoting:** Prefer double quotes (`"..."`) for strings containing single quotes (`'`) to avoid parsing errors (e.g., `title: "My Deck's Title"`).
4. **Layouts**:
* Define the structure of slides. Specified via `layout:` in frontmatter.
* Default layout for the first slide is `cover`, others are `default`.
* Custom layouts are placed in the `layouts/` directory as `.vue` files. Use `<slot />` for default content and named slots (`<slot name="xxx" />`) for specific sections.
5. **Components**:
* Vue components can be used directly in Markdown (e.g., `<MyComponent />`).
* Components are auto-imported from:
* Slidev built-ins (`@slidev/client/builtin/`).
* The active theme.
* Installed addons.
* The local `components/` directory.
* Custom components go in the `components/` directory as `.vue` files.
6. **Styles**:
* [UnoCSS](https://unocss.dev) is built-in for utility-first styling. Apply classes directly in Markdown or components.
* Global styles can be added in the `styles/` directory (e.g., `styles/index.css`).
* Scoped styles for a specific slide can be added using `<style scoped>...</style>` within the slide's Markdown.
7. **Assets**:
* Static assets (images, videos) can be placed in the `public/` directory and referenced with absolute paths starting with `/` (e.g., `background: /my-image.png`).
* Relative paths (e.g., `./image.png`) work for standard Markdown image syntax (``) but might break in frontmatter or components after building. Prefer the `public/` directory method for reliability.
8. **Notes**:
* Presenter notes are added as HTML comments (`<!-- ... -->`) at the *very end* of a slide's Markdown content.
* Notes support Markdown formatting.
## Key Features & Syntax
1. **Code Blocks**:
* Use standard Markdown fenced code blocks (e.g., ` ```ts ... ``` `).
* Syntax highlighting is provided by Shiki.
* Supports line highlighting (`{1,3-5}`), line numbers (`{lines:true}`), Monaco editor (`{monaco}`), diffs (`{monaco-diff}`), code imports (`<<< @/path/to/file.js#region {lines=...}`). Refer to the Syntax Guide for details.
2. **Animations (Clicks)**:
* Use `<v-click>` component or `v-click` directive to reveal elements step-by-step.
* `v-after` reveals elements simultaneously with the previous `v-click`.
* `.hide` modifier (e.g., `v-click.hide`) hides elements instead of showing them.
* `<v-clicks>` component applies `v-click` to its children (useful for lists).
* Control timing with `at="..."` (e.g., `v-click="3"` for absolute click 3, `v-click="'+2'"` for 2 clicks after the previous relative element).
* Specify enter/leave ranges: `v-click="[2, 5]"` (visible from click 2 up to, but not including, 5).
* Override total clicks per slide with `clicks: N` in frontmatter.
3. **Motion (VueUse Motion)**:
* Use the `v-motion` directive for element transitions (e.g., `:initial="{ x: -80 }" :enter="{ x: 0 }"`).
* Can be triggered by clicks using `:click-N` attributes (e.g., `:click-1="{ y: 30 }"`).
4. **Slide Transitions**:
* Set in headmatter (`transition: slide-left`) for global effect or frontmatter for specific slides.
* Built-in transitions: `fade`, `fade-out`, `slide-left`, `slide-right`, `slide-up`, `slide-down`, `view-transition`.
* Specify different forward/backward transitions: `transition: slide-left | slide-right`.
5. **Diagrams**: Supports Mermaid (` ```mermaid ... ``` `) and PlantUML (` ```plantuml ... ``` `).
6. **LaTeX**: Use `$` for inline math (`$a^2+b^2=c^2$`) and `$$` for block math.
7. **Global Context**: Access runtime info like `$nav` (navigation controls), `$clicks` (current click count), `$page` (current slide number), `$frontmatter`, `$slidev.configs` within components or directly in Markdown using `{{ }}`. Use composables like `useNav()` from `@slidev/client` in `<script setup>`.
## Development Workflow
1. **Initialization (Full Project)**: Use `pnpm create slidev <project-name>` (or npm/yarn/bun equivalent).
2. **Development Server (Full Project)**: Run `pnpm dev` (or `npm run dev`, etc.) in the project directory. Access at `http://localhost:3030`.
3. **Development Server (Single File)**: Navigate to the directory containing your `slides.md` and run `npx @slidev/cli`. This is useful for quick previews without a full project setup.
* **Note:** Ensure you use the correct package name: `@slidev/cli`.
* **Theme Installation:** If a theme specified in the frontmatter (e.g., `theme: seriph`) isn't installed, Slidev will prompt you to install it. Confirm by pressing 'y' and choosing your package manager (e.g., 'npm').
4. **Editing**: Modify `slides.md` and add custom components/layouts/styles as needed.
4. **Exporting**:
* Install `playwright-chromium` (`pnpm add -D playwright-chromium`).
* Run `pnpm export` (or `npm run export`, etc.) to generate a PDF (`slides-export.pdf` by default).
* Use `--format png` or `--format pptx`.
* Use `--with-clicks` to export each click step as a separate page/image.
* Use `--output <filename>` to specify the output file.
* Use `--dark` for dark mode export.
5. **Building for Hosting**:
* Run `pnpm build` (or `npm run build`, etc.) to create a static SPA in the `dist/` folder.
* Use `--base /path/` if deploying to a subpath.
* Deploy the `dist` folder to static hosting (Netlify, Vercel, GitHub Pages). Configuration files (`netlify.toml`, `vercel.json`, GitHub Actions workflow) are often included in the starter template.
## Best Practices
* Keep `http://slides.md` focused on content.
* Use layouts for consistent slide structure.
* Use components for reusable UI elements and interactivity.
* Leverage themes and addons for styling and features before building custom solutions.
* Use the `public/` directory for static assets referenced in frontmatter or components.
* Utilize presenter mode (`/presenter` route or button) for notes and controls during presentation.
* Pay attention to terminal output for errors (e.g., YAML parsing issues) when starting the server.
Created: 7/2/2025
Keywords: text snippets, slack for ai prompts, slack for ai, AI consulting, AI Cheat Tool, AI Cheat Tool for developers, AI Cheat Tool for AI, AI Cheat Tool for ChatGPT, chatgpt prompt generator, AI Cheat Tool for email, AI Cheat Tool for text, AI Cheat Tool for keyboard shortcuts, AI Cheat Tool for text expansion, AI Cheat Tool for text snippets, AI Cheat Tool for text replacement, AI Cheating Tool, AI Cheating Tool for developers, AI Cheating Tool for AI, AI Cheating Tool for ChatGPT, AI Cheating Tool for email, AI Cheating Tool for text, AI Cheating Tool for keyboard shortcuts, prompt cheating, AI prompt engineering, AI context engineering, context engineering, ai prompt manager, AI prompt manager, AI prompt management, ai consulting, prompt engineering consulting, generative ai consulting, ai implementation services, llm integration consultants, ai strategy for enterprises, enterprise ai transformation, ai prompt optimization, large language model consulting, ai training for teams, ai workflow automation, build ai knowledge base, llm prompt management, ai prompt infrastructure, ai adoption consulting, enterprise ai onboarding, custom ai workflow design, ai integration for dev teams, ai productivity tools, team prompt collaboration, github gists, github snippets, github code snippets, github code snippets automation, github, text expansion, text automation, snippet manager, code snippets, team collaboration tools, shared snippets, snippet sharing, keyboard shortcuts, productivity tools, workflow automation, AI-powered productivity, snippet tool for teams, team knowledge base, AI text completion, text expander for teams, snippet collaboration, multi-platform productivity, custom keyboard shortcuts, snippet sharing platform, collaborative snippet management, knowledge base automation, team productivity software, business productivity tools, snippet management software, quick text input, macOS productivity apps, Windows productivity tools, Linux productivity tools, cloud-based snippets, cross-platform snippets, team workspace tools, workflow enhancement tools, automation tools for teams, text automation software, team knowledge sharing, task automation, integrated team tools, real-time collaboration, AI for team productivity, business text automation, time-saving tools, clipboard manager, multi-device clipboard, keyboard shortcut manager, team communication tools, project management integration, productivity boost AI, text snippet sharing, text replacement software, text management tools, efficient team collaboration, AI workspace tools, modern productivity apps, custom text automation, digital workspace tools, collaborative workspaces, cloud productivity tools, streamline team workflows, smart text management, snippets AI app, snippet management for teams, shared knowledge platforms, team-focused text automation, team productivity platform, AI text expansion tools, snippet taking app, note taking app, note taking software, note taking tools, note taking app for teams, note taking app for developers, note taking app for AI, note taking app for ChatGPT, snippet software, snippet tools, snippet app for teams, snippet app for developers, snippet app for AI, snippet app for ChatGPT, AI agent builder, AI agent snippets, AI agent prompts, prompt management, prompt engineering, ChatGPT snippets, ChatGPT prompts, AI prompt optimization, AI-powered prompts, prompt libraries for AI, prompt sharing for ChatGPT, GPT productivity tools, AI assistant snippets, ChatGPT integrations, custom AI prompts, AI agent workflows, machine learning snippets, automated AI prompts, AI workflow automation, collaborative AI prompts, personalized AI agents, text snippets for ChatGPT, AI prompt creation tools, AI code snippet manager, GPT-4 text automation, AI-powered writing assistants, AI tools for developers, AI agent integrations, developer prompt snippets, AI text generation workflows, AI-enhanced productivity, GPT prompt sharing tools, team collaboration for AI, openAI integrations, text automation for AI teams, AI-powered collaboration tools, GPT-4 team tools, AI-driven text expanders, AI-driven productivity solutions, AI agent for email writing, AI agent for text expansion, AI agent for text automation, AI agent for text snippets, AI agent for text replacement, AI agent for keyboard shortcuts, AI Agent Developer, Prompt engineering, Machine Learning Engineer, AI Engineer, Customer Support, Code snippets for developers, Recruiting, AI agent for automation, AI agent for AI automation, AI agent for ChatGPT automation, AI agent for email automation, electron app for snippets, desktop snippet manager, code snippet organization, AI prompt repository, intelligent text expansion, vibe coding, Claude cli ai prompts, prompt optimizer, buy prompts, sell prompts, snippets store, sell scripts, buy scripts, buy python scripts, scraping scripts, AI prompt marketplace, ChatGPT prompt marketplace, best AI prompts, best ChatGPT prompts, AI prompt database, AI prompt packs, AI prompt bundles, GPT prompt marketplace, prompt engineering masterclass, prompt engineering certification, prompt engineering course, ChatGPT prompt store, AI prompt store, prompt monetization, sell AI prompts, buy AI prompts, prompt marketplace platform, AI prompt plugins, Claude prompt marketplace, AI prompt subscription, Custom GPT, real-time prompt collaboration, developer workflow optimization, team prompt library, knowledge management for developers, code snippet search, searchable code library, reusable code blocks, prompt engineering tools, prompt template management, collaborative coding, cross-team knowledge sharing, code snippet versioning, AI prompt templates, technical documentation tools, developer productivity suite, team snippet repository, AI prompt history, snippet synchronization, cloud snippet backup, markdown snippet support, syntax highlighting for snippets, code categorization, programming language snippets, language-specific code templates, contextual code suggestions, snippets with AI integration, command palette for snippets, code snippet folder organization, team snippet discovery, private and public snippets, enterprise code management, team codebase documentation, prompt engineering best practices, Vibe Coding, Vibe Coding for developers, Vibe Coding for AI, Vibe Coding for ChatGPT, Vibe Coding for email, Vibe Coding for text, Vibe Coding for keyboard shortcuts, Vibe Coding for text expansion, Vibe Coding for text snippets, Vibe Coding for text replacement, free prompt generator, ai prompt generator, prompt generator, promptlayer, promptimize ai, langchain prompt management, lanhsmith prompt management, latitude, langchain, langgraph, langchain documentation, raycast, text expander, raycast snippets, raycast mac, cursor, cursro ai, cursor snippets, cursor rules, cursor ai rules, learn prompting, how to prompt, prompting guide, prompting tutorials, best prompting practices, ai prompt best practices, prompting techniques, prompting, aws, testing, api, go, express, pwa, javascript, react, typescript, java, nextjs, jest, ios, spa, performance, accessibility, security, node, seo, rest, python, webpack, vite, windows, logging, php, laravel, redis, monitoring, openai, gpt, azure, gcp, rust, swift, deployment, vue, angular, django, ci/cd, ssr, nuxt, c#, jwt, lambda, microservices, git, pandas, flask, analytics, cdn, oauth, mongodb, graphql, react native, electron, spring, android, scaling, mocha, machine learning, numpy
AI Prompts, ChatGPT, Code Snippets, Prompt Engineering