iridite/slidev-templates/neko-style

Name: neko-style
Author: iridite

Claude Code and agent skill by iridite/slidev-templates

Trust tier 2

community

LLM review pending

By iridite
Coding
iridite/slidev-templates
neko-style/SKILL.md
Updated 31 Oct 2026
Version 1.0.12 versions recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

Create polished Slidev presentations using the neko-style theme — animated glow backgrounds, 45+ reusable components, semantic color system. Use when building technical talks, conference decks, or product presentations with this template.

Install

npx vskill@latest install iridite/slidev-templates/neko-style

SKILL.md

neko-style Slidev Presentations

Create professional presentations with animated glow polygon backgrounds, 45+ battle-tested components, and a semantic color system.

When to Use

Building presentations with the neko-style theme
User mentions "glow backgrounds", "KubeCon template", or "neko-style"
Creating slides that need rich visual components (architecture diagrams, feature grids, pipelines)

Quick Start

bash

# Option A: New project from starter
npx degit iridite/slidev-templates/neko-style my-presentation
cd my-presentation/starter && npm install && npm run dev
 
# Option B: Add to existing Slidev project (NOT published to npm)
git clone https://github.com/iridite/slidev-templates.git
# If using bun: install theme's own node_modules first (bun uses per-file symlinks;
# Vite follows them to the real path and needs deps installed there)
cd slidev-templates/neko-style/theme && npm install && cd -
npm install /path/to/slidev-templates/neko-style/theme
# Then set `theme: neko-style` in slides.md frontmatter

For new projects: include vite.config.ts to avoid LiquidGlass naming conflict warning:

export default {
  slidev: { components: { extensions: ['vue', 'md'] } },
}

🚫 Mandatory: Component-First Rule

When the user asks for a neko-style presentation, you MUST use built-in components — not plain divs.

Decision flow for every slide:

What content type is this page? → Check routing table below
Matching component found → use it (edit props, don't reimplement)
No component match → use .neko-glass-card glass card pattern
Run the self-check before delivering

Forbidden patterns (produce bright cards that clash with the dark theme):

html

<!-- ❌ NEVER in dark mode (default) -->
<div class="bg-sky-50 border border-sky-200">
<div class="bg-emerald-50 text-slate-600">
<div class="bg-slate-100 border border-gray-200">

html

<!-- ✅ Use instead -->
<FeatureIconGrid :columns="3" :items="..." />              <!-- component -->
<div class="neko-glass-card p-5">...</div>                 <!-- glass card -->
<div border="2 solid green-800" bg="green-800/20" rounded-lg overflow-hidden>  <!-- semantic card -->

Self-check before delivering:

[ ] Are there plain div cards with no built-in component used?
[ ] Any bg-*-50 / bg-slate-100 / border-*-200 classes?
[ ] Any text-slate-600 / text-gray-700 (near-invisible on dark bg)?
[ ] Every page maps to a layout or component pattern?

Critical Rule: No `<Transition>` for Click Animations

NEVER use `<Transition>` or `<TransitionGroup>`. They cause elements to vanish on backward navigation. Always use class-toggle + CSS:

vue

<div class="transition duration-500 ease-in-out"
  :class="$clicks < 1 ? 'opacity-0 translate-y-6' : 'opacity-100 translate-y-0'">
  Content reveals on click 1
</div>

All animations: transition duration-500 ease-in-out. No exceptions.

Glow Background System (Per-Slide Frontmatter)

yaml

---
glowSeed: 42              # REQUIRED per page — different values = different backgrounds
glowPreset: blue          # Color: blue (default) | rust | cyan
theme: dark               # Theme: dark (default) | light
glow: full                # Position: full | top | bottom | left | right | center
glowOpacity: 0.4          # Intensity: 0-1 (default 0.4)
glowHue: 0                # Hue shift: 0-360
---

Color presets:

blue — Technical talks, product launches (#18549a → #12238b)
rust — Rust topics, innovation themes (#ed5132 → #ed4832)
cyan — AI/ML topics, academic presentations (#32aeed → #32e5ed)

Pick ONE preset for the entire presentation. Decide in the first slide's frontmatter and use it on every slide — switching presets mid-deck creates visual noise. The glowSeed already provides per-page variety; the preset is the deck's identity.

Component Routing Table

I need to show...	Use this component	Clicks
— Data Display —
Feature grid (icon+title+desc cards)	`FeatureIconGrid`	items.length
Pattern / concept card grid	`PatternCardGrid`	items.length
Executive KPI & benchmark metrics grid	`MetricsGrid`	items.length
Architecture/approach comparison matrix	`ComparisonMatrix`	rows.length
Linear process (card+icon+desc)	`ProcessFlowGrid`	items.length
Three challenges / column cards	`LifecycleChallengesThreeCol`	items.length
Capability reveal row	`CapabilityRevealRow`	items.length
Stats / metrics row	`StatsRow`	stats.length
Learning path / step progress	`LearningPathSteps`	steps.length
Checklist (glass morphism)	`GlassChecklist`	items.length
Code + explanation split	`CodeExplainSplit`	1
Artifact + floating callouts	`ArtifactExplainBoard`	items.length
Motion animation gallery	`MotionPrinciplesGallery`	animations.length
— Layout —
Agenda / table of contents	`AgendaGrid`	sections.length
Banner image + facts sidebar	`BannerSplitLayout`	facts.length+1
Categorized icon / tech stack list	`CategoryIconList`	categories.length
Horizontal icon+label tags	`IconLabelWrap`	items.length
Left-border accent items (criteria)	`AccentBorderList`	items.length
Narrative + Code/Diagram split layout	`layout: split`	slots
High-impact statement & takeaway layout	`layout: headline`	0
Benchmark KPI dashboard layout	`layout: metrics`	items.length
— Progression & Architecture —
Step-by-step pipeline (arrows)	`StackedFlowPipeline`	nodes×2−1
Spectrum / progression / roadmap	`RouteProgressionLane`	steps×2−1
System layers (architecture tiers)	`LayeredArchView`	layers.length
Hub-spoke architecture diagram	`FlowDiagram`	max(click values)
Data flow / funnel pipeline	`EventPipeline`	max(click values)
Terminal + orbital tool loop	`TerminalOrbitDemo`	max(click values)
— Narrative —
Problem vs Solution split	`ProblemSolutionSplit`	2
Reasons + Lessons (classified)	`ReasonLessonGrid`	reasons+lessons
Key insight / takeaway callout	`LearningCallout`	0
Bottom conclusion bar	`InsightCalloutBar`	0
Dramatic question reveal	`SpotlightQuestion`	1
Large centered statement / quote	`CenteredStatement`	1
— Speaker —
Multi-speaker panel	`SpeakerLineupIntro`	speakers.length
Speaker + community ecosystem	`SpeakerEcosystemIntro`	2
Character / persona full-screen	`FullBleedCharacterReveal`	1
Left/right split brand intro	`SplitBrandIntro`	2
Error screen / surprise opener	`WorksOnMyMachineHero`	0
— Media —
Full-screen video + overlay	`FadeVideoSlide`	0
Video with floating annotations	`FeatureOverlayVideo`	items.length
Screenshot gallery + QR hover	`SessionHoverGallery`	0
— Closing —
Thank you / closing split panel	`ThankYouSplitPanel`	0
Contact QR codes (×3)	`ContactQrTriplet`	0
Recruiting / job roles	`RecruitingRoleList`	roles.length
— Advanced —
Refractive glassmorphism card	`LiquidGlass`	0
Terminal recording playback	`AsciinemaPlayer`	0

Page Templates (Copy-Paste Ready)

Cover Page

Two styles — choose one:

---
layout: cover
glowSeed: 100
glowPreset: blue
transition: fade-out
---
 
# Presentation Title
 
## Subtitle or tagline

# Title and ## Subtitle now render with hero typography (3.5rem/bold and 1.5rem/normal) automatically in the cover layout.

Or with custom entrance animation and speaker line:

---
layout: cover
glowSeed: 100
glowPreset: blue
transition: fade-out
clicks: 2
---
 
<div px-14>
<h1
  v-click="1"
  :class="$clicks < 1 ? 'opacity-0 scale-105 blur-sm' : 'opacity-100 scale-100 blur-0'"
  text-5xl font-bold transition duration-1200 ease-in-out
>Presentation Title</h1>
 
<p
  v-click="1"
  :class="$clicks < 1 ? 'opacity-0 translate-y-4' : 'opacity-100 translate-y-0'"
  text-xl opacity-85 transition duration-800 ease-in-out delay-200
>Subtitle or tagline</p>
 
<div
  v-click="2"
  :class="$clicks < 2 ? 'opacity-0 translate-y-3' : 'opacity-80 translate-y-0'"
  mt-8 flex items-center gap-4 text-lg transition duration-500 ease-in-out
>
  <div i-carbon:user-avatar></div>
  <span>Speaker Name / Team</span>
  <span opacity-50>·</span>
  <span>2026</span>
</div>
</div>

Section Divider

---
layout: section
glowSeed: 200
glowPreset: blue
sectionNumber: 1
sectionTitle: The Problem
sectionSubtitle: Why current workflows fall short
---

Problem vs Solution

---
layout: page
glowSeed: 200
clicks: 3
---
 
# Why We Built This
 
<div
  v-click="1"
  :class="$clicks < 1 ? 'opacity-0 translate-y-5 scale-95' : 'opacity-100 translate-y-0 scale-100'"
  transition duration-500 ease-in-out
>
  <ProblemSolutionSplit
    :problems="[
      { icon: 'i-carbon:warning-alt', text: 'Manual deployment takes 2 hours' },
      { icon: 'i-carbon:warning-alt', text: 'No rollback capability' },
      { icon: 'i-carbon:warning-alt', text: 'Configuration drift across environments' },
    ]"
    :solutions="[
      { icon: 'i-carbon:checkmark', text: 'One-click deploy in 3 minutes' },
      { icon: 'i-carbon:checkmark', text: 'Instant rollback to any version' },
      { icon: 'i-carbon:checkmark', text: 'GitOps ensures consistency' },
    ]"
  />
</div>
 
<div
  v-click="2"
  :class="$clicks < 2 ? 'opacity-0 translate-y-3 blur-sm' : 'opacity-100 translate-y-0 blur-0'"
  transition duration-500 ease-in-out
>
  <InsightCalloutBar tone="yellow">
    The bottleneck isn't skill — it's friction.
  </InsightCalloutBar>
</div>

Feature Showcase

---
layout: page
glowSeed: 250
clicks: 4
---
 
# Key Features
 
<FeatureIconGrid :columns="4" :items="[
  { icon: 'i-carbon:lightning', title: 'Fast', description: 'Sub-ms latency', tone: 'amber' },
  { icon: 'i-carbon:security', title: 'Secure', description: 'Zero-trust', tone: 'teal' },
  { icon: 'i-carbon:scale', title: 'Scalable', description: '10M+ requests', tone: 'violet' },
  { icon: 'i-carbon:code', title: 'Dev-Friendly', description: '12 SDKs', tone: 'cyan' },
]" />

Tech Stack / Categorized List

---
layout: page
glowSeed: 300
clicks: 2
---
 
# Technology Stack
 
<CategoryIconList :categories="[
  { title: 'Frontend', items: [
    { icon: 'i-logos:vue', label: 'Vue 3' },
    { icon: 'i-logos:typescript-icon', label: 'TypeScript' },
    { icon: 'i-logos:unocss', label: 'UnoCSS' },
  ]},
  { title: 'Backend', items: [
    { icon: 'i-logos:go', label: 'Go' },
    { icon: 'i-logos:postgresql', label: 'PostgreSQL' },
    { icon: 'i-logos:redis', label: 'Redis' },
  ]},
]" />

Takeaways / Checklist

---
layout: page
glowSeed: 420
clicks: 1
---
 
# Takeaways
 
<div
  v-click="1"
  :class="$clicks < 1 ? 'opacity-0 translate-y-4 scale-98' : 'opacity-100 translate-y-0 scale-100'"
  class="mt-4 transition duration-600 ease-in-out"
>
  <GlassChecklist :items="[
    'Key point 1 — one sentence.',
    'Key point 2 — one sentence.',
    'Key point 3 — one sentence.',
  ]" />
</div>

Contents / TOC

---
layout: contents-toc
glowSeed: 50
accent: cyan
---
 
-Introduction
-Problem Space
-Our Approach
-Results
-Next Steps

Closing Slide

---
layout: end
glowSeed: 700
---

Or with a richer split-panel closing:

---
layout: page-wide
glowSeed: 700
---
 
<ThankYouSplitPanel
  title="Thank You"
  subtitle="Questions welcome"
  :links="[
    { label: 'GitHub', url: 'github.com/your-repo', qrSrc: '/qr-github.png' },
    { label: 'Docs', url: 'your-docs.dev', qrSrc: '/qr-docs.png' },
  ]"
/>

Executive Metrics & KPIs

---
layout: metrics
glowSeed: 600
clicks: 3
---
 
::title::
# Quantitative Benchmarks & Impact
 
::lead::
Rigorous measurements across production workloads comparing the before and after states.

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingneko-style/SKILL.md

Popularity

Repository stars: 72
Repository forks: 4
7-day trend score: 21

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/iridite/slidev-templates/neko-style/badge)](https://verified-skill.com/skills/iridite/slidev-templates/neko-style)

Something wrong with this skill or its page? Tell us.