Files
Panama/user/agents/skills/slidev/references/core-layouts.md
T
Gabriel Brown 89761a7da3 Keep the personal half of the desktop in one place, and ask before installing it
Agent instructions, skills, SSH host aliases and expansion triggers are worth
having identical on every machine one person owns, and belong in none of the
shared configuration. They live in user/ now, with a manifest saying where each
piece goes and a link-user stage that puts it there.

That stage does nothing unless the machine said yes. Somebody who clones Panama
to try the desktop keeps their own ~/.claude/CLAUDE.md exactly where it was;
the question names the destinations and defaults to no. Anything displaced goes
to config/old rather than being deleted.

~/.claude/CLAUDE.md and ~/.codex/AGENTS.md were byte-identical copies of one
file, which is the drift this exists to prevent.

Also adds the vitals toggles for the battery and Claude usage readouts, which
had preferences and no way to reach them.
2026-08-22 08:54:43 -04:00

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

  1. Slidev default layouts
  2. Theme layouts
  3. Addon layouts
  4. 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