| name | new-slide |
| description | Add a new slide to the Slidev deck (slides.md or pages/*.md) with consistent frontmatter, layout, and speaker notes. Use when the user asks to add a slide, insert a section, create a new page, or extend the deck. Keeps slides concise, uses v-clicks for long lists, and puts long citations into HTML-comment notes. |
new-slide
How to add a new slide to this Slidev deck consistently.
Where slides live
-
slides.md — the entry point. Each ----delimited block is one slide.
-
pages/*.md — section modules included via src: import in slides.md:
---
src: ./pages/section-x.md
---
Slide frontmatter checklist
Every non-trivial slide should have an explicit YAML frontmatter block:
---
layout: default
# layout: image-left | image-left-bg-color | image | center | cover | section | end
# image: /assets-from-public.png
# background: /full-bleed-bg.png
# class: text-center
# zoom: 0.86 # for dense slides; see slidev-pdf-export skill
transition: slide-left
---
# Slide title
Body content...
Available layouts in layouts/:
default.vue — DOU dark background, normal slide.image-left.vue — image: on the left half.image-left-bg-color.vue — image-left with overridable bgColor:.image.vue — full-bleed image, take image: and optional backgroundSize:.center.vue — content vertically/horizontally centered.
Content conventions
-
Language: Ukrainian primarily. Add English term in parentheses on first
mention (e.g., "обмежений контекст (bounded context)").
-
Bullets: max 5–7 bullets per slide. Use <v-clicks> to reveal one-by-one
if more than 4 bullets.
-
Code: prefer Slidev fenced blocks with language tag. Keep snippets ≤ 20
lines per slide.
-
Diagrams: prefer Mermaid (see .cursor/skills/visuals-mermaid) over new
raster images.
-
Speaker notes / citations: put longer text and source URLs into HTML
comments at the end of the slide:
<!--
Speaker note: emphasize the contrast between MVP-style vibe coding
and disciplined agentic SDLC.
Source: https://steipete.me/posts/2025/shipping-at-inference-speed
-->
Skeleton snippets
Section divider
---
layout: section
---
# Назва секції
Image-left bio / about slide
---
layout: image-left
image: /vyacheslav-koldovskyy.png
---
# В'ячеслав Колдовський
- Ph.D., Competence Manager у SoftServe Academy
- Спеціалізація: Agentic Engineering у SDLC
- Автор каналу [Programming Mentor](https://www.youtube.com/c/programmingmentorua)
- Telegram: [t.me/programmingmentor](https://t.me/programmingmentor)
Progressive list with v-clicks
# Етапи agentic-циклу
<v-clicks>
- Зафіксувати ціль продукту і обмеження
- Сформувати вимоги та source-of-truth документи
- Нарізати MVP на capability-зрізи
- Для кожної зміни — proposal / design / tasks
- Реалізація → перевірка → handoff
</v-clicks>
Quote / source slide
# Pattern: Inference-speed shipping
> "Speed comes not from typing, but from the loop."
> — Peter Steinberger
<!-- https://steipete.me/posts/2025/shipping-at-inference-speed -->
After adding a slide
- Run
npm run build (see slidev-build-verify skill) and fix errors.
- If the slide is dense (>30 non-empty lines, has tables or Mermaid), add a
zoom: value (0.7–0.9) — see the slidev-pdf-export user-level skill.
- Update navigation comments / TOC if you have one.
Don'ts
- Don't put
zoom: outside YAML frontmatter (must be between --- markers).
- Don't combine
background: from global headmatter with layout: in a
separate per-slide block — keep them in the same frontmatter.
- Don't add custom
.slidev-layout { overflow } CSS globally — it breaks PDF
export. Scope to html:not(.print) only.
