slidev-styling

Style Slidev presentations with UnoCSS utilities and custom CSS.

34|1|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-styling
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slidev-styling
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/customization/slidev-styling
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers and designers style Slidev presentations by leveraging UnoCSS utilities and custom CSS to create branded, polished slides.

Core Features & Use Cases

  • UnoCSS integration for granular, atomic styling
  • Custom CSS with scoped and global styles for branding
  • Responsive design, typography, color systems, and animations
  • Reusable style patterns via Uno.config shortcuts and tokens

Quick Start

Add UnoCSS and configure slide styling in your Slidev project.

Frequently Asked Questions about slidev-styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style Slidev presentations with UnoCSS utilities?

You style Slidev presentations by integrating UnoCSS atomic utilities and custom CSS to apply consistent typography, colors, and responsive layouts. This requires configuring UnoCSS in uno.config.ts and adding accompanying global styles in styles/index.css.

Can I use custom CSS for branding in Slidev?

Yes, you can apply custom CSS for branding in Slidev using scoped and global styles. Combined with UnoCSS shortcuts and design tokens, this method ensures a consistent branded visual identity across your slide deck.

Do I need a specific Slidev project setup to use UnoCSS?

Yes, you need an existing Slidev project with UnoCSS configured. Specifically, you must set up uno.config.ts for utility definitions and provide accompanying global styles in styles/index.css to enable the styling workflows.

What is the best way to create responsive slide decks in Slidev?

The best way to create responsive slide decks in Slidev is by combining UnoCSS atomic utilities with custom CSS. This integration handles responsive design, consistent typography, and layout patterns across multiple slides effectively.

How do I add reusable style patterns in Slidev?

Add reusable style patterns in Slidev by defining UnoCSS shortcuts and design tokens within your uno.config.ts file. These tokens allow you to consistently apply predefined typography, colors, and layout classes across your presentation.

Does UnoCSS support animations and color systems for Slidev?

UnoCSS supports animations and color systems for Slidev when configured in uno.config.ts. By integrating these atomic utilities with custom global styles, you can build polished, branded slide decks with dynamic visual effects.