skills/hsiangjenli/skills/slidev-theme-neversink

slidev-theme-neversink

SKILL.md

Slidev Theme Neversink

Create educational and academic presentations using the Neversink theme - a bright, flat, minimal Slidev theme with advanced layouts, color schemes, and interactive components.

Quick Start

Basic Neversink presentation setup:

---
theme: neversink
colorSchema: auto
title: Your Presentation Title
---

# Your Title Slide

Your subtitle or author information

---
layout: default
---

# Content Slide

Your content here with **bold**, *italic*, and ==highlighted== text.

Core Capabilities

1. Layout System

Choose from 15+ specialized layouts for different content types:

  • cover - Title slides with optional notes
  • side-title - Side-positioned titles with content areas
  • two-cols-title - Header with two-column layout
  • top-title-two-cols - Top title with two-column content
  • image-left/right - Image with content positioning
  • section - Section dividers with emphasis
  • quote - Styled quotations with attribution
  • credits - Movie-style scrolling credits
  • full - Custom layouts with complete control

For complete layout reference, see layouts.md.

2. Color Schemes

Monochromatic color pairs for visual coherence:

  • Neutrals: black, white, dark, light, gray
  • Colors: Available in regular and -light variants
  • Examples: sky, amber, emerald, pink, navy

Apply colors in frontmatter: color: sky-light

3. Interactive Components

  • StickyNote: Draggable sticky notes with color schemes
  • SpeechBubble: Animated speech bubbles with positioning
  • Admonition: Callout boxes for notes, warnings, tips
  • IceCream: Kawaii mascot character
  • v-drag: Make any element draggable for custom layouts

For component examples, see components.md.

4. Code & Animation Features

  • Syntax highlighting with code focus
  • Step-by-step code reveals
  • Animated transitions between slides
  • Live web content with iframe layouts

Workflow Decision Tree

New Presentation → Use presentation templates in assets/templates/ → Academic: academic-template.md → Technical: technical-template.md → Business: business-template.md

Existing Slidev Presentation → Add theme: neversink to frontmatter → Convert layouts using guidance in layouts.md

Specific FeaturesCode demonstrations: Use technical template with code highlighting → Interactive elements: Add components from components.mdColor theming: Apply schemes from colors.mdAdvanced layouts: Use full layout with custom positioning

Common Examples

Academic Presentation

# Setup new presentation
npm install slidev-theme-neversink
# Use academic template from assets/templates/

Technical Code Demo

---
layout: two-cols-title
color: navy
---

:: title ::
# API Integration Example

:: left ::
```python
# Code example with syntax highlighting
def fetch_data(url):
    response = requests.get(url)
    return response.json()

:: right :: Remember to handle errors!


**Interactive Presentation**
```md
---
layout: full
---

<SpeechBubble position="l" color="sky" animation="float">
Your explanation here
</SpeechBubble>

<div v-drag="[100,200,300,150]">
Draggable content
</div>

Resources

scripts/

Ready-to-use utilities for Neversink presentations:

  • setup_presentation.py - Initialize new Neversink presentation with theme setup
  • convert_layouts.py - Convert existing Slidev layouts to Neversink equivalents
  • validate_colors.py - Check color scheme consistency across slides

references/

Detailed documentation loaded as needed:

  • layouts.md - Complete layout reference with examples and frontmatter options
  • colors.md - Color scheme guide with visual examples and use cases
  • components.md - Interactive component library with code examples
  • animations.md - Animation and transition patterns
  • frontmatter.md - Configuration options and settings reference

assets/

Ready-to-use templates and examples:

  • templates/academic-template.md - Academic presentation starter
  • templates/technical-template.md - Technical demo starter
  • templates/business-template.md - Business presentation starter
  • examples/ - Sample slides demonstrating each layout type
  • components/ - Copy-paste component examples

Installation

Ensure Slidev is installed, then add the theme:

npm install slidev-theme-neversink

Add to your slides.md frontmatter:

---
theme: neversink
---

Advanced Usage

For complex presentations requiring custom layouts, animations, or extensive interactivity, consult the reference files for detailed implementation patterns and best practices.

Weekly Installs
4
First Seen
Mar 3, 2026
Installed on
cline4
gemini-cli4
github-copilot4
codex4
kimi-cli4
cursor4