Skill v1.0.1

currentAutomated scan100/100

iridite/slidev-templates/neko-style

+113 new

──Details

PublishedOctober 31, 2026 at 07:23 PM

Content Hashsha256:ca4cbf735e644a64...

Git SHAe2e7df80e73d

Bump Typepatch

Compare with v1.0.0

──Files

Files (1 file, 19.3 KB)

SKILL.md19.3 KBactive

SKILL.md · 583 lines · 19.3 KB

name: neko-slidev description: 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. metadata: version: "1.0.1"

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.
 
<MetricsGrid
  :columns="3"
  :items="[
    { value: '10x', label: 'Concurrent Capacity', trend: '+900%', trendTone: 'up', tone: 'sky', subtext: 'Autonomous worker scaling without lockups' },
    { value: '45ms', label: 'P99 Latency', trend: '-65%', trendTone: 'up', tone: 'emerald', subtext: 'Sub-second tool dispatch & recovery' },
    { value: '99.9%', label: 'Delivery Integrity', trend: 'Audit Green', trendTone: 'neutral', tone: 'teal', subtext: 'Automated continuous smoke verification' },
  ]"
/>

Approach / System Comparison

---
layout: page
glowSeed: 650
clicks: 3
---
 
# Paradigm Comparison
 
<div class="mt-4">
  <ComparisonMatrix
    traditional-title="Manual / Script-Heavy Workflow"
    modern-title="AI Agent Orchestrated Delivery"
    :rows="[
      { dimension: 'Deploy Automation', traditional: 'Separate repo + manual token juggling', modern: 'Self-contained CI pipeline in main branch', tag: 'Automated' },
      { dimension: 'Background Rendering', traditional: 'Software blur rasterization (blackouts on 4K)', modern: 'GPU-accelerated singleton compositor', tag: 'Zero-Flicker' },
      { dimension: 'Presentation Authoring', traditional: 'Manual div crafting & fragile styles', modern: 'SKILL-guided contract-first component generation', tag: 'AI-Native' },
    ]"
  />
</div>

Split Screen Narrative + Code/Diagram

---
layout: split
ratio: '4:6'
glowSeed: 700
---
 
::left::
# Architecture Shift
 
By moving from fragmented local state to an autonomous orchestration engine, the system eliminates human synchronization overhead.
 
<InsightCalloutBar tone="cyan" class="mt-4">
  Deterministic invariants replace probabilistic guessing.
</InsightCalloutBar>
 
::right::

import { createAgentPipeline } from '@core/runtime'

// Initialize self-verifying workflow const pipeline = createAgentPipeline({ mode: 'autonomous', verification: 'continuous', }) await pipeline.runAll()

Semantic Color System

Color	Meaning	Use for
`red-800`	Problems, warnings	Challenges, pain points, what's broken
`green-800`	Solutions, success	Fixes, improvements, what works
`blue-800`	Information, neutral	Technical details, explanations
`purple-800`	Advanced, special	Advanced features, unique capabilities
`yellow-800`	Performance, speed	Metrics, benchmarks, optimizations
`cyan-800`	AI/ML, academic	Data, intelligence, research topics
`amber-800`	Caution, time	Deadlines, costs, tradeoffs

Apply via card borders/backgrounds: border="2 solid red-800" bg="red-800/20"

Common Icons (`@iconify-json/carbon`)

Use	Icon class
Warning/Problem	`i-carbon:warning-alt`
Success/Done	`i-carbon:checkmark`
Error/Close	`i-carbon:close`
Info	`i-carbon:information`
Performance	`i-carbon:lightning`
Time	`i-carbon:time`
Code	`i-carbon:code`
Security	`i-carbon:security`
Rocket/Launch	`i-carbon:rocket`
Data	`i-carbon:data-volume`
Architecture	`i-carbon:network-3`
User/Person	`i-carbon:user-avatar`
GitHub	`i-carbon:logo-github`

Brand icons (@iconify-json/logos): i-logos:kubernetes, i-logos:docker-icon, i-logos:python, i-logos:vue, i-logos:typescript-icon, i-logos:go, etc.

Debugging: Glow Not Showing

Check in order:

Is theme: neko-style set in first slide frontmatter?
Is there global CSS overriding background? Run: rg "\.slidev-layout|background:\s*black" .
Does the current slide have background: set? (overrides glow — expected)
Does the current slide have glow: false? (disables glow — expected)
Is the frontmatter YAML valid? (check --- delimiters and indentation)

Snippets & Examples

Before writing any slide, check if a snippet exists for that page type:

snippets/cover.md             — Title slide
snippets/section-divider.md   — Section break
snippets/statement.md         — Centered impactful claim (uses ::kicker:: and ::subtitle:: slots)
snippets/feature-grid.md      — Icon+title+desc grid
snippets/problem-solution.md  — Problem vs solution split
snippets/tech-stack.md        — Categorized icon list
snippets/architecture.md      — Node-edge diagram
snippets/timeline-roadmap.md  — Horizontal progression
snippets/learning-path.md     — Vertical steps with lists
snippets/closing.md           — Thank you page

Copy the snippet, fill {{placeholders}}, done.

Examples (for learning, not copying):

examples/golden-tech-talk.md — 12-slide realistic architecture talk
examples/bad-vs-good.md — 5 common AI mistakes with corrections

🤖 AI-Native Presentation Design Workflow

When an AI agent (Claude, GPT-4, Cursor, OMP) designs a presentation for this theme, follow this 4-step sequence:

1. Narrative Arc Planning (7-Phase Technical Story)

Map the user's topic to the standard technical presentation curve:

The Hook (layout: cover + SpotlightQuestion or WorksOnMyMachineHero) — Emotional resonance, current pain.
The Tension (layout: page + ProblemSolutionSplit or LifecycleChallengesThreeCol) — What breaks in the status quo.
The Pivot / Core Claim (layout: headline or CenteredStatement) — The single central idea.
The Architecture (layout: split or StackedFlowPipeline / FlowDiagram) — Technical mechanism and topology.
The Paradigm Shift (layout: page + ComparisonMatrix) — Before vs after, concrete trade-offs.
The Empirical Proof (layout: metrics + MetricsGrid) — Hard numbers, benchmarks, latency, SLA.
The Vision & Roadmap (layout: timeline + RouteProgressionLane → layout: end) — Next owner, actionable next steps.

2. Frontmatter Contract

Every generated slide must declare: