MCPInstall

slidev-styling

by yoanbernabeuFrontend & Design

Style Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.

Installs
307
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-styling
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads slidev-styling automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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>

Spacing:

<div class="p-4">Padding 4</div>
<div class="m-2">Margin 2</div>
<div class="px-4 py-2">Horizontal/Vertical padding</div>
<div class="mt-8">Margin top 8</div>

Layout:

<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Color System

Default Colors

<!-- Grays -->
<span class="text-gray-100">100</span>
<span class="text-gray-500">500</span>
<span class="text-gray-900">900</span>

<!-- Colors -->
<span class="text-red-500">Red</span>
<span class="text-orange-500">Orange</span>
<span class="text-yellow-500">Yellow</span>
<span class="text-green-500">Green</span>
<span class="text-blue-500">Blue</span>
<span class="text-purple-500">Purple</span>
<span class="text-pink-500">Pink</span>

Custom Colors

In uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    colors: {
      brand: {
        DEFAULT: '#5d8392',
        light: '#8bb4c4',
        dark: '#3d5a65',
      },
      accent: '#f59e0b',
    },
  },
})

Usage:

<span class="text-brand">Brand color</span>
<span class="bg-brand-light">Light brand background</span>
<span class="text-accent">Accent color</span>

Typography

Font Sizes

<p class="text-xs">Extra small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">XL (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-3xl">3XL (30px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-5xl">5XL (48px)</p>

Custom Fonts

In frontmatter:

---
fonts:
  sans: 'Inter'
  serif: 'Merriweather'
  mono: 'Fira Code'
---

In uno.config.ts:

export default defineConfig({
  theme: {
    fontFamily: {
      display: ['Inter', 'sans-serif'],
      body: ['Open Sans', 'sans-serif'],
    },
  },
})

Usage:

<h1 class="font-display">Display heading</h1>
<p class="font-body">Body text</p>

Google Fonts

---
fonts:
  sans: 'Roboto'
  serif: 'Playfair Display'
  mono: 'JetBrains Mono'
  provider: 'google'
---

Global Styles

styles/index.css

/* styles/index.css */

/* Root variables */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-size-base: 16px;
}

/* Global typography */
.slidev-layout h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.slidev-layout h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-secondary);
}

/* Custom utility classes */
.highlight {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  padding: 0 0.25em;
}

.shadow-brand {
  box-shadow: 0 4px 14px 0 rgba(93, 131, 146, 0.39);
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Scoped Styles

Per-Slide Styles

Add <style> at the end of a slide:

# My Styled Slide

<div class="custom-box">
  Special content
</div>

<style>
.custom-box {
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  color: white;
}

h1 {
  color: #667eea;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
</style>

Scoped vs Global

Styles in <style> are automatically scoped to the slide.

For global styles within a slide:

<style>
:global(.slidev-layout) {
  /* Affects all slides */
}
</style>

Layout Utilities

Flexbox

<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex items-center justify-center h-full">
  <p>Centered content</p>
</div>

<div class="flex flex-wrap gap-2">
  <span class="badge">Tag 1</span>
  <span class="badge">Tag 2</span>
</div>

Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <!-- Responsive grid -->
</div>

Positioning

<div class="relative">
  <div class="absolute top-0 right-0">
    Top right corner
  </div>
</div>

<div class="fixed bottom-4 right-4">
  Fixed position
</div>

Custom Shortcuts

In uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'btn': 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600',
    'btn-outline': 'px-4 py-2 rounded border border-blue-500 text-blue-500 hover:bg-blue-50',
    'card': 'p-4 rounded-lg shadow-md bg-white dark:bg-gray-800',
    'section-title': 'text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4',
    'badge': 'px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800',
  },
})

Usage:

<button class="btn">Click me</button>
<div class="card">Card content</div>
<h2 class="section-title">Section</h2>

Dark Mode Styling

Dark Mode Classes

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Adapts to dark mode
</div>

In Custom CSS

.my-component {
  background: #ffffff;
  color: #1a1a1a;
}

.dark .my-component {
  background: #1a1a1a;
  color: #ffffff;
}

Animations

Transition Utilities

<div class="transition-all duration-300 hover:scale-110">
  Scales on hover
</div>

<div class="transition-colors duration-200 hover:bg-blue-500">
  Color transition
</div>

Custom Animations

/* styles/index.css */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

Animation with v-motion

<div
  v-motion
  :initial="{ opacity: 0, y: 50 }"
  :enter="{ opacity: 1, y: 0, transition: { duration: 500 } }"
>
  Animated content
</div>

Responsive Design

Breakpoints

<div class="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  Responsive grid
</div>

<div class="hidden lg:block">
  Only visible on large screens
</div>

Default Breakpoints

PrefixWidth
sm640px
md768px
lg1024px
xl1280px
2xl1536px

Common Patterns

Card Component

<div class="p-6 rounded-xl bg-white dark:bg-gray-800 shadow-lg">
  <h3 class="text-lg font-semibold mb-2">Card Title</h3>
  <p class="text-gray-600 dark:text-gray-300">Card content</p>
</div>

Badge

<span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
  Active
</span>

Alert Box

<div class="p-4 rounded-lg bg-yellow-50 border-l-4 border-yellow-400">
  <p class="text-yellow-700">Warning message</p>
</div>

Code Annotation

<div class="relative">

```js
const x = 1 // [!code highlight]
<div class="absolute right-4 top-4 text-xs text-gray-500"> Important line! </div> </div> ```

Best Practices

1. Use Utilities First

<!-- Prefer utilities -->
<div class="p-4 bg-blue-500 text-white rounded">
  Good
</div>

<!-- Custom CSS only when necessary -->

2. Create Shortcuts for Repeated Patterns

shortcuts: {
  'btn-primary': 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',
}

3. Maintain Consistency

Use the same spacing scale:

  • gap-4 everywhere, not mixing gap-3 and gap-5

4. Support Dark Mode

Always provide dark mode variants for custom styles.

5. Test Export

Some CSS features don't export well to PDF:

  • Complex gradients
  • Some filters
  • Animations (become static)

Output Format

When styling slides:

# [Slide Title]

<div class="[utility classes]">
  Content
</div>

<style>
/* Scoped styles if needed */
.custom-class {
  property: value;
}
</style>

STYLE DECISIONS:

  • Colors: [primary, secondary]
  • Typography: [font choices]
  • Spacing: [consistent scale]
  • Custom shortcuts: [list]

FILES MODIFIED:

  • uno.config.ts (shortcuts, theme)
  • styles/index.css (global styles)

FAQ

What does the slidev-styling skill do?

Style Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.

How do I install slidev-styling?

Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-styling in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-styling/ (personal) or .claude/skills/slidev-styling/ (project).

Which AI agents can use slidev-styling?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is slidev-styling safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains slidev-styling?

It is published by yoanbernabeu in yoanbernabeu/slidev-skills. It has 307 recorded installs.

More from yoanbernabeu/slidev-skills

View all →

slidev-quick-start

yoanbernabeu/slidev-skills

Get started with Slidev presentations in minutes. Use this skill to create your first presentation or set up a new Slidev project.

Docs & Writing299 installs

slidev-themes

yoanbernabeu/slidev-skills

Open the skill to read its SKILL.md instructions.

297 installs

slidev-syntax-guide

yoanbernabeu/slidev-skills

Master Slidev's extended Markdown syntax. Use this skill to write slides with advanced formatting, frontmatter, and special features.

Docs & Writing279 installs

slidev-drawings

yoanbernabeu/slidev-skills

Open the skill to read its SKILL.md instructions.

253 installs

slidev-project-structure

yoanbernabeu/slidev-skills

Understand Slidev project structure and configuration. Use this skill to configure themes, addons, and customize your presentation setup.

Docs & Writing248 installs

slidev-layouts

yoanbernabeu/slidev-skills

Open the skill to read its SKILL.md instructions.

225 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs