# Slidev Template Creator

> Creates a reusable Slidev project template from an existing Slidev presentation via URL

- Skill: `mdeuerlein/slidev-template-creator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mdeuerlein/slidev-template-creator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mdeuerlein/slidev-template-creator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: mdeuerlein (https://skillmd.com/u/mdeuerlein)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mdeuerlein/slidev-template-creator

---


# Slidev Template Creator

Turns a finished Slidev presentation into a clean, reusable project template with layouts, components, design tokens, placeholder content, and documentation.

## Goal

An existing presentation should not become a copy, but a maintainable Slidev template that lets you quickly start new presentations in the same visual style.

The template should:

- preserve the existing visual design as well as possible
- provide reusable layouts and Vue components
- contain central styles and design tokens
- replace project-specific content with placeholders
- include example slides demonstrating how to use the layouts
- be locally installable, runnable, and exportable
- be documented concisely and practically

## Input

The skill always requires the URL of the source presentation.

- When invoked with an argument, for example `/slidev-template-creator <url>`, use the argument as the URL.
- When invoked without an argument, first ask for the URL of the presentation.
- Only start analysis or file operations once a URL is available.

## Prerequisites

- Work in the target project or clone/download the source presentation into a suitable working folder.
- First read the existing Slidev structure, in particular `slides.md`, `package.json`, `theme/`, `components/`, `layouts/`, `assets/`, and central styles.
- Do not blindly overwrite existing files. Check existing content and preserve a sensible project structure if Slidev is already cleanly organized.
- Install or run the existing project scripts only if they are needed for validation.

## Steps

1. **Obtain the source presentation**
   - Use the provided URL to open or clone the presentation or repository, or to load the relevant files.
   - If the URL does not clearly lead to a repository or downloadable project, briefly clarify how the source files should be provided.

2. **Analyze the presentation**
   - Identify the layout types used, slide patterns, recurring design elements, and components.
   - Extract colors, fonts, spacing, borders, shadows, accents, backgrounds, and card styles.
   - Determine the required assets such as images, icons, logos, and backgrounds.
   - Separate reusable structure from project-specific content.

3. **Establish the template structure**
   - Use a clear Slidev structure. If no better local structure exists, follow this orientation:

```text
.
+-- slides.md
+-- package.json
+-- README.md
+-- theme/
|   +-- index.ts
|   +-- styles.css
|   +-- layouts/
+-- components/
+-- assets/
|   +-- images/
|   +-- icons/
|   +-- backgrounds/
+-- docs/
    +-- usage.md
```

4. **Create layouts**
   - Create at least these reusable layouts, as long as they fit the source design:
     - Cover for title, subtitle, author, date, and an optional key visual
     - Agenda for 3 to 6 items
     - Section for chapter number, chapter heading, and subline
     - Content for a central statement, text, or bullet points
     - Two Column for text plus visual, code, graphic, or list
     - Process for 3 to 5 linear steps
     - KPI or Metrics for figures and results overviews
     - Closing for wrap-up, call-to-action, contact, and optional QR code

5. **Derive components**
   - Create Vue components only for elements that appear multiple times in the design or that clearly simplify the slides.
   - Typical components are header, footer, logo area, chapter number, accent line, cards, KPI cards, process steps, icon cards, quote box, note box, image frame, and code block container.
   - Use props for variable content, but avoid excessive abstraction.

6. **Centralize the design system**
   - Define central styles and CSS custom properties for colors, backgrounds, accents, text colors, font sizes, spacing, border radius, shadows, lines, glow effects, and card styles.
   - Do not spread CSS unnecessarily across many files.
   - Make sure later design adjustments can be made in a central location as much as possible.

7. **Replace content**
   - Remove project-specific content from the source presentation.
   - Use sensible placeholders such as `{{ presentation_title }}`, `{{ subtitle }}`, `{{ author }}`, `{{ company }}`, `{{ date }}`, `{{ section_title }}`, `{{ agenda_item }}`, `{{ metric_value }}`, and `{{ metric_label }}`.
   - Create functional example slides in `slides.md` that demonstrate all available layouts.

8. **Add documentation**
   - Document in `README.md` or `docs/usage.md`:
     - Installation
     - Starting a new presentation
     - available layouts
     - available components
     - customizing colors and design tokens
     - locations for assets
     - local dev start
     - export

9. **Validate**
   - Check that `npm install` and `npm run dev`, or the existing project scripts, work.
   - Verify that the example slides render and that no asset paths are broken.
   - If a dev server is started, stop it after the check or clearly state the running URL.

## Quality criteria

- The template is not just a copy of the source presentation.
- The existing look remains recognizably preserved.
- Layouts and components are reusable, but not unnecessarily complex.
- Design tokens are centrally maintainable.
- Example slides work without project-specific legacy baggage.
- Asset paths, imports, and Slidev configuration are consistent.
- The documentation is short, practical, and directly usable.

## Output

At the end, briefly report:

1. Which source URL was used.
2. Which files were created or changed.
3. Which layouts are available.
4. Which components are available.
5. How to start a new presentation with the template.
6. Which commands are used for development and export.
7. Which open items or manual follow-ups remain.