Slidev Styling

This covers the full styling system in Slidev, from UnoCSS utilities to custom CSS and animations. You'll use it when you need to go beyond basic Markdown formatting: custom color schemes, typography tweaks, responsive layouts, dark mode variants, or reusable component patterns. The skill includes practical examples of inline utilities, global styles in index.css, scoped per-slide styles, and custom shortcuts in uno.config.ts. It's thorough on flexbox and grid patterns, shows how to set up custom fonts from Google, and walks through animation techniques including v-motion integration. If you're building branded decks or presentations with specific design requirements, this is your reference.

skills.sh installs: 320
GitHub stars: 42
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add yoanbernabeu/slidev-skills --skill slidev-styling --agent claude-code

Installs into .claude/skills of the current project.

Files

Styling in Slidev

This skill covers all styling options in Slidev, including UnoCSS utilities, custom CSS, scoped styles, and advanced styling techniques.

When to Use This Skill

Customizing slide appearance
Adding custom colors and typography
Creating reusable style patterns
Implementing animations
Building responsive layouts

UnoCSS Basics

Slidev uses UnoCSS, an atomic CSS framework similar to Tailwind CSS.

Inline Classes

<div class="text-xl font-bold text-blue-500">
  Styled text
</div>

Common Utilities

Typography:

<span class="text-sm">Small</span>
<span class="text-base">Base</span>
<span class="text-lg">Large</span>
<span class="text-xl">Extra Large</span>
<span class="text-2xl">2XL</span>

<span class="font-bold">Bold</span>
<span class="font-semibold">Semibold</span>
<span class="italic">Italic</span>
<span class="underline">Underlined</span>

Colors:

<span class="text-red-500">Red text</span>
<span class="text-blue-600">Blue text</span>
<span class="bg-green-100">Green background</span>
<span class="bg-yellow-200 text-yellow-800">Yellow combo</span>

SKILL.md on GitHub