skills.rest
szeyu
szeyuCOMMUNITY
Explore all skills by this author →
GitHub

slidev-styling

Style Slidev decks with UnoCSS and custom CSS for cohesive visuals.

5|Updated Feb 4, 2026
Search Tags:#typography#css#animations#responsive#color#slidev#unocss
One-click install
npx skills add https://github.com/szeyu/open-ssyok-finance --skill slidev-styling-szeyu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slidev-styling
Source: https://github.com/szeyu/open-ssyok-finance/tree/main/.agents/skills/slidev-styling
Command: npx skills add https://github.com/szeyu/open-ssyok-finance --skill slidev-styling-szeyu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Style Slidev slides using UnoCSS and custom CSS to achieve cohesive visuals with minimal effort.

Core Features & Use Cases

  • UnoCSS utilities for rapid, atomic styling
  • Custom CSS for brand colors, typography, and animations
  • Per-slide and global styling to ensure consistent design across decks
  • Use case: quickly theme multiple Slidev decks for a product launch, internal training, or conference slides

Quick Start

Apply UnoCSS in your Slidev project, then define a global CSS block and per-slide styles to style all slides.

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 slides with UnoCSS for consistent visual design?▼

Style Slidev slides with UnoCSS by applying atomic utility classes directly in your markdown, then configure global styles in styles/index.css and per-slide scoped styles to ensure deterministic loading and cohesive visuals across decks.

Can I use custom CSS for typography and color systems in Slidev?▼

Custom CSS in Slidev supports typography, color systems, and animations through a global styles/index.css file for brand-wide consistency, while per-slide scoped styles handle deterministic layout and presentation-specific adjustments.

Do I need an uno.config.ts file to apply animations and responsive layouts in Slidev?▼

An uno.config.ts configuration is required to load UnoCSS utilities for animations and responsive layouts in Slidev, ensuring atomic classes are generated deterministically across all slides within the deck.

What is the best way to theme multiple Slidev decks for a product launch or conference?▼

Theme multiple Slidev decks by defining a reusable color system and typography rules in global CSS, then applying UnoCSS atomic utilities per slide to maintain visual cohesion across product launches and internal training.

Why are my per-slide styles not loading deterministically in Slidev?▼

Per-slide styles in Slidev fail to load deterministically when global styles in styles/index.css are missing or when UnoCSS configuration in uno.config.ts does not properly register the atomic utility classes needed for consistent rendering.

Does Slidev support responsive layouts and animations through UnoCSS utilities?▼

Slidev supports responsive layouts and animations through UnoCSS atomic utilities, allowing you to apply breakpoint-based classes and keyframe animation properties directly within markdown content for design-driven presentations.

Related Skills

Explore More Design & Creative Skills→
yoanbernabeuyoanbernabeu
34

slidev-styling

Style Slidev presentations with UnoCSS utilities and custom CSS.

Community
Intermediate
pengelbrechtpengelbrecht

lucida

Convert YAML deck definitions into HTML or PDF presentations.

Community
Intermediate
hmzainjamilhmzainjamil
1

dev-slides

Generate Slidev markdown presentations with code examples, diagrams, and Vue components.

Community
Intermediate
legoutlegout
3

slidev-styling

Style Slidev presentations with UnoCSS utilities and custom CSS overrides.

Community
Intermediate