Can I use custom Vue components with this skill?

Yes, this skill provides detailed instructions and code patterns for creating custom layouts in the 'layouts/' directory using Vue.js templates, slots, and props.

What is the best Slidev layout for comparing two technologies?

The 'two-cols-header' layout is highly recommended for comparisons, as it provides a spanning header for the topic and two distinct slots (left and right) for side-by-side analysis.

How do I add a background image to a specific slide?

You can use the 'cover' or 'image' layouts and specify the image path in the slide's frontmatter using the 'background' or 'image' properties.

Does this skill help with presentation structure?

Absolutely. It provides standardized patterns for starting with a cover, introducing the speaker, dividing content with section layouts, and ending with a dedicated closing slide.

Slidev Layouts Manager

Name: Slidev Layouts Manager
Author: yoanbernabeu

byyoanbernabeu

•

Design Tools

Optimizes presentation structures using Slidev's built-in and custom layout systems for professional slide decks.

The Slidev Layouts skill empowers developers to create visually stunning and logically structured presentations by leveraging the full suite of Slidev's layout capabilities. It provides expert guidance on selecting the most effective built-in layouts—such as two-column comparisons, centered statements, and image-focused slides—while also offering comprehensive patterns for building reusable custom layouts using Vue.js slots and props. Whether you are building a technical deep-dive or a high-level pitch, this skill ensures your content is presented with maximum impact and consistent formatting.

Key Features

01Expert configuration of all 15+ built-in Slidev layouts including two-cols and cover

02Support for theme-specific layout extensions and responsive design patterns

0313 GitHub stars

04Best-practice guidance for presentation flow and section transitions

05Implementation of custom Vue.js layouts with named slots and dynamic props

06Automated frontmatter setup for background images and iframe embeds

Use Cases

01Structuring a technical workshop with consistent section dividers and code-focused slides

02Developing a branded corporate template with custom Vue-based headers and footers

03Creating a side-by-side feature comparison using the two-cols-header layout

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yoanbernabeu/slidev-skills content

For use in Claude.ai and ChatGPT

Download Skill