Files

Jason Woltje f5792c40be feat: Complete fleet — 94 skills across 10+ domains

Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-16 16:27:42 -06:00

2.8 KiB

Raw Permalink Blame History

name, description

name	description
global-context	Access navigation, slide info, and configuration programmatically

Global Context & API

Access navigation, slide info, and configuration programmatically.

Template Variables

Available in slides and components:

Page {{ $page }} of {{ $nav.total }}
Title: {{ $slidev.configs.title }}

$nav

Navigation state and controls:

Property	Type	Description
`$nav.currentPage`	number	Current page (1-indexed)
`$nav.currentLayout`	string	Current layout name
`$nav.total`	number	Total slides
`$nav.isPresenter`	boolean	In presenter mode
`$nav.next()`	function	Next click/slide
`$nav.prev()`	function	Previous click/slide
`$nav.nextSlide()`	function	Next slide
`$nav.prevSlide()`	function	Previous slide
`$nav.go(n)`	function	Go to slide n

$slidev

Global context:

Property	Description
`$slidev.configs`	Project config (title, etc.)
`$slidev.themeConfigs`	Theme config

$frontmatter

Current slide frontmatter:

Layout: {{ $frontmatter.layout }}

$clicks

Current click count on slide.

$page

Current page number (1-indexed).

$renderContext

Current render context:

'slide' - Normal slide view
'overview' - Overview mode
'presenter' - Presenter mode
'previewNext' - Next slide preview

Composables

Import from @slidev/client:

import {
  useNav,
  useDarkMode,
  useIsSlideActive,
  useSlideContext,
  onSlideEnter,
  onSlideLeave,
} from '@slidev/client'

useNav

const nav = useNav()
nav.next()
nav.go(5)
console.log(nav.currentPage)

useDarkMode

const { isDark, toggle } = useDarkMode()

useIsSlideActive

const isActive = useIsSlideActive()
// Returns ref<boolean>

useSlideContext

const { $page, $clicks, $frontmatter } = useSlideContext()

Lifecycle Hooks

import { onSlideEnter, onSlideLeave } from '@slidev/client'

onSlideEnter(() => {
  // Slide became active
  startAnimation()
})

onSlideLeave(() => {
  // Slide became inactive
  cleanup()
})

Important: Don't use onMounted/onUnmounted in slides - component instance persists. Use onSlideEnter/onSlideLeave instead.

Conditional Rendering Examples

<!-- Show only in presenter mode -->
<div v-if="$nav.isPresenter">
  Presenter notes
</div>

<!-- Hide on cover slide -->
<footer v-if="$nav.currentLayout !== 'cover'">
  Page {{ $nav.currentPage }}
</footer>

<!-- Different content by context -->
<template v-if="$renderContext === 'slide'">
  Normal view
</template>
<template v-else-if="$renderContext === 'presenter'">
  Presenter view
</template>

Type Imports

import type { TocItem } from '@slidev/types'

2.8 KiB Raw Permalink Blame History