f5792c40be
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 |
|---|---|
| layouts | Available layouts for slides |
Built-in Layouts
Available layouts for slides.
Basic Layouts
default
Standard slide layout.
---
layout: default
---
center
Content centered horizontally and vertically.
---
layout: center
---
cover
Title/cover slide with centered content.
---
layout: cover
---
end
End slide.
---
layout: end
---
full
Full-screen content, no padding.
---
layout: full
---
none
No layout styling.
---
layout: none
---
Text Layouts
intro
Introduction slide.
---
layout: intro
---
quote
Large quotation display.
---
layout: quote
---
section
Section divider.
---
layout: section
---
statement
Statement/affirmation display.
---
layout: statement
---
fact
Fact/data display.
---
layout: fact
---
Multi-Column Layouts
two-cols
Two columns side by side:
---
layout: two-cols
---
# Left Column
Left content
::right::
# Right Column
Right content
two-cols-header
Header with two columns below:
---
layout: two-cols-header
---
# Header
::left::
Left content
::right::
Right content
Image Layouts
image
Full-screen image:
---
layout: image
image: /photo.jpg
backgroundSize: cover
---
image-left
Image on left, content on right:
---
layout: image-left
image: /photo.jpg
class: my-class
---
# Content on Right
image-right
Image on right, content on left:
---
layout: image-right
image: /photo.jpg
---
# Content on Left
Props: image, class, backgroundSize
Iframe Layouts
iframe
Full-screen iframe:
---
layout: iframe
url: https://example.com
---
iframe-left
Iframe on left, content on right:
---
layout: iframe-left
url: https://example.com
---
# Content
iframe-right
Iframe on right, content on left:
---
layout: iframe-right
url: https://example.com
---
# Content
Layout Loading Order
- Slidev default layouts
- Theme layouts
- Addon layouts
- Custom layouts (
./layouts/)
Later sources override earlier ones.
Custom Layouts
Create layouts/my-layout.vue:
<template>
<div class="slidev-layout my-layout">
<slot />
</div>
</template>
<style scoped>
.my-layout {
display: flex;
align-items: center;
justify-content: center;
}
</style>
With named slots:
<template>
<div class="slidev-layout two-areas">
<div class="top">
<slot name="top" />
</div>
<div class="bottom">
<slot />
</div>
</div>
</template>
Usage:
---
layout: two-areas
---
::top::
Top content
::default::
Bottom content