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:

.
+-- 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.