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>
2.7 KiB
2.7 KiB
name, description
| name | description |
|---|---|
| components | Ready-to-use components in Slidev |
Built-in Components
Ready-to-use components in Slidev.
Navigation
Link
Navigate to slide:
<Link to="5">Go to slide 5</Link>
<Link to="intro">Go to intro</Link> <!-- with routeAlias -->
SlideCurrentNo / SlidesTotal
Slide <SlideCurrentNo /> of <SlidesTotal />
Toc (Table of Contents)
<Toc />
<Toc maxDepth="2" />
<Toc columns="2" />
Props:
columns- Number of columnsmaxDepth/minDepth- Heading depth filtermode- 'all' | 'onlyCurrentTree' | 'onlySiblings'
TitleRenderer
Render slide title:
<TitleRenderer no="3" />
Animations
VClick / VClicks
<VClick>Shows on click</VClick>
<VClicks>
- Item 1
- Item 2
</VClicks>
VAfter
<VClick>First</VClick>
<VAfter>Shows with first</VAfter>
VSwitch
<VSwitch>
<template #1>State 1</template>
<template #2>State 2</template>
</VSwitch>
Drawing
Arrow
<Arrow x1="10" y1="10" x2="100" y2="100" />
<Arrow x1="10" y1="10" x2="100" y2="100" two-way />
Props: x1, y1, x2, y2, width, color, two-way
VDragArrow
Draggable arrow:
<VDragArrow />
Layout
Transform
Scale elements:
<Transform :scale="0.5">
<LargeContent />
</Transform>
Props: scale, origin
AutoFitText
Auto-sizing text:
<AutoFitText :max="200" :min="50" modelValue="Hello" />
Media
SlidevVideo
<SlidevVideo v-click autoplay controls>
<source src="/video.mp4" type="video/mp4" />
</SlidevVideo>
Props: controls, autoplay, autoreset, poster, timestamp
Youtube
<Youtube id="dQw4w9WgXcQ" />
<Youtube id="dQw4w9WgXcQ" width="600" height="400" />
Tweet
<Tweet id="1423789844234231808" />
<Tweet id="1423789844234231808" :scale="0.8" />
Conditional
LightOrDark
<LightOrDark>
<template #dark>Dark mode content</template>
<template #light>Light mode content</template>
</LightOrDark>
RenderWhen
<RenderWhen context="presenter">
Only in presenter mode
</RenderWhen>
Context values:
main- Main presentation viewvisible- Visible slidesprint- Print/export modeslide- Normal slide viewoverview- Overview modepresenter- Presenter modepreviewNext- Next slide preview
Branding
PoweredBySlidev
<PoweredBySlidev />
Draggable
VDrag
<VDrag pos="myElement">
Draggable content
</VDrag>
See draggable for details.
Component Auto-Import
Components from these sources are auto-imported:
- Built-in components
- Theme components
- Addon components
./components/directory
No import statements needed.