Build cinematic, narrative-driven presentation decks in Yuval Avidani's signature style using @open-slide/core. The user describes a topic and audience; this skill scaffolds an open-slide project, drafts the 4-act narrative arc (Boarding β Ascent β Cruise β Descent), writes
Installs just this skill. Get the whole plugin for auto-invocation.
β‘ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/yuv-decks
ποΈ Context preview
The summary Claude sees to decide when to auto-load this skill.
Build cinematic, narrative-driven presentation decks in Yuval Avidani's signature style using @open-slide/core. The user describes a topic and audience; this skill scaffolds an open-slide project, drafts the 4-act narrative arc (Boarding β Ascent β Cruise β Descent), writes
This skill is the distillation of building "Build Agents That Ship" for the NICE pre-hackathon (May 2026). Read it end-to-end before drafting any slides.
## Where this skill sits in the YUV.AI pyramid
`yuv-decks` is in the **middle tier** of the YUV.AI skills pyramid. The top-tier orchestrator `yuv-pilot` routes here when the user wants a slide deck. You can also be invoked directly when the user says "make me a deck" without going through yuv-pilot first.
When this skill calls `yuv-design-system`, it **MUST lock the mode to "Decks"** β never let it fall through to Neon (web/app palette) or Warm Editorial. Decks mode is the only palette mode for slides.
See `yuv-pilot/SKILL.md` for the full pyramid map and routing table.
**Reference implementation**: <https://github.com/hoodini/build-agents-that-ship> (private β clone if you have access; the entire pattern this skill describes is implemented there).
---
## What this skill builds on
`yuv-decks` is the **opinionated layer**. It explicitly delegates to:
| Skill | Owns | When to consult |
|---|---|---|
| **`yuv-design-system`** | Palette, typography, animation library, brand assets, signature components (`PurpleBar`, `YellowUnderline`, `FlightHUD`, `CompassDial`, `CounterUp`, `HeroBg`), canonical social links, Hyperframes patterns | Always. Step 5, Step 6, and any time you touch palette/type/components. |
| **`slide-authoring`** | Open-slide file contract, 1920Γ1080 canvas, type scale defaults, vertical budget math, asset paths, hard framework rules | When writing the JSX for each page (Step 6 onward). |
| **`create-slide`** | Generic open-slide author (asks scoping questions and picks a theme) | For non-Yuval-voice decks (other people, generic content). `yuv-decks` supersedes it for Yuval's signature talk style. |
The yuv-decks rules **add on top** of yuv-design-system and slide-authoring; they never override them.
---
## When to invoke this skill
The user wants a *talk* or *presentation* deck. Triggers:
- "Make me a deck about X"
- "Create slides for a talk on Y"
- "Build a presentation for the [company] hackathon"
- "I'm presenting about Z β help me build the deck"
Do NOT invoke for: a single landing page, a video, a document, a Google Slide PowerPoint export. This skill is for **open-slide React decks** rendered at 1920Γ1080 with cinematic motion.
---
## Step 0 β Bootstrap the project
**Default save location:** `~/Documents/yuv-projects/decks/<deck-slug>/` β always save decks here so you can find them again later. The skill creates the parent directory if it doesn't exist. Override only if the user explicitly asks for a different location.
```bash
# Pick a slug. Lowercase, hyphenated, descriptive.
mkdir -p ~/Documents/yuv-projects/decks
cd ~/Documents/yuv-projects/decks
npx @open-slide/cli init <deck-slug>
cd <deck-slug>
npm install
npm run dev # starts the preview at http://localhost:5173
```
Final path: `~/Documents/yuv-projects/decks/<deck-slug>/`. Tell the user where the deck lives at the end of every session.
The scaffold creates `slides/getting-started/` (a demo). You will create your own slide under `slides/<deck-id>/index.tsx` and delete or ignore the demo.
---
## Step 1 β Scope the deck (ASK BEFORE WRITING)
Before drafting, lock in these four decisions via a single `AskUserQuestion` (multi-question form):
1. **Topic & audience** β what is the deck *for*, and *who* will be in the room? Get the customer's actual agenda if possible (literal bullets they expect to hear) β match 1:1.
2. **Page count** β Short (5β6), Standard (8β10), Deep dive (12β24).
3. **Language** β English / Hebrew / Bilingual. Yuval is bilingual; pick based on audience.
4. **Speaker context** β Is Yuval the presenter? Is this for a specific company (NICE, etc.)? Knowing the host lets you craft callback moments ("β¦yes, the company you're sitting inβ¦").
5. **Visual mode** β Fly High (default purple) or cinematic-flight (sky-blue + hot pink, only when the talk's central metaphor IS literal flight). When in doubt: Fly High.
Do NOT skip this step. Every redirect later in the build traces back to a wrong assumption here.
---
## Step 2 β The Yuval Voice (non-negotiable rules)
If a *name* must stay (LiteLLM, Bedrock, Anthropic, Cognigy) β keep it, but **define it in 3 words on first mention** ("LiteLLM β an AI gateway library").
### Rule 2 β Short sentences. Punchy fragments. Like this.
Maximum **8β12 words per bullet**. Cut all "thus / therefore / however." If a sentence wraps to 3 lines, split or shorten.
**Calibration test** β transform this BEFORE writing any draft:
> β "When Watson got a recommendation wrong, nothing learned from it. Same mistakes, repeated for years. The system never improved with use."
>
> β "Watson made a mistake. Watson kept making it. For years."
### Rule 3 β Define every name on first mention
"Watson is IBM's AI. Won Jeopardy in 2011. Then aimed at hospitals."
"Klarna is Sweden's biggest fintech β Buy Now Pay Later, 150M customers."
Never assume the audience knows who/what.
---
## Step 3 β The Narrative Arc (4 acts)
The structure that survives audiences:
```
ACT I Β· BOARDING β The Stakes (slides 1β4)
Cover Β· Hook stat Β· Sources agree Β· Failure patterns
ACT II Β· ASCENT β The Stories (slides 5β9)
Failure case story Β· Why it failed (4 bullets) Β·
Success case story Β· Why it worked (4 bullets) Β·
Reference example (real product the audience knows)
ACT III Β· CRUISE β The Build (slides 10β22)
Anatomy Β· Agent types Β· MCP Β· Multi-agent Β· Where to apply Β·
Client stack Β· Server infra Β· Gateway Β· Routing Β· Tracking Β·
Optimization Β· Evals Β· MVP β Production
ACT IV Β· DESCENT β The Action (slides 23β24)
How to start tomorrow Β· Closing
```
**Structural laws:**
- Case studies CLUSTER together (slides 5β9). Don't interleave with considerations.
- Each case study is **TWO slides**: the *story* + the *lessons* (4 specific failure points or success moves). The lessons slide is where "aha tokens drop."
- Stories BEFORE considerations. The audience needs *why it matters* before *how to do it*.
- Cut anything not in the customer's agenda β even if you love it. (Examples cut in the NICE deck: ROI math, Mgmt Pitch, Skill-vs-Agent-vs-Feature-vs-Product, Obsolescence Check.)
---
## Step 4 β Case Study Triplet (failure + success + reference)
Always anchor with three **real, public, verifiable** stories:
| Role | What it is | Example used in the NICE deck |
|---|---|---|
| **Failure** | The most-funded, most-public AI/enterprise project that crashed. Name the *specific* failure points. | IBM Watson Health ($4B over 11 years, 0 patients helped) |
| **Success-with-caveat** | A real success that had to course-correct. Shows wins need humility. | Klarna AI Assistant (replaced 700 FTEs, then partly rehired) |
| **Reference** | A current production example the audience *already knows or owns*. **Bonus**: the company hosting the talk. | NICE Cognigy (NICE acquired it 2024) |
**Verifiable stats for the stakes act** (memorize these β they're real and citable):
- **MIT NANDA** "State of AI in Business 2025" (Aug 2025): **95% of GenAI pilots fail** to deliver measurable P&L impact.
- **Gartner** (mid-2024 forecast): **30%** of GenAI projects abandoned after PoC by end of 2025.
- **BCG** "Build for the Future 2024": **26%** of companies actually generate value from AI.
- **McKinsey** State of AI 2024β2025: **1 in 4** organizations see real profit from generative AI.
- **STAT News** + **University of Texas System Audit** (2017) for IBM Watson Health.
**Never fabricate a stat.** If you don't have a citation, use a *rule of thumb*, not a number with a fake source.
---
## Step 5 β Visual Language
The deck inherits **all** of its palette, typography, signature components, and animation defaults from **`yuv-design-system`**. Read those sections first:
- `yuv-design-system` **Β§1** β Palette modes (Fly High default; Warm Editorial for the brand family)
- `yuv-design-system` **Β§2** β Typography (Anton + Inter for English, Rubik + Assistant for Hebrew, letter-spacing 0 default)
- `yuv-design-system` **Β§3** β Brand assets (logo wordmark for watermarks, profile photo for about slides)
This skill is **opinionated only about what's unique to talk decks** β the narrative arc, the journey indicator, the cinematic-flight optional mode, the deck-specific entrance animation. Everything else: read the design system.
### Default mode: Fly High (purple)
Fly High is the default for all decks. Pulled from `yuv-design-system` Β§1:
No third background colour. Ever. Yellow is an accent, never a background.
The `<PurpleBar>`, `<YellowUnderline>`, `<FlightHUD>` components from `yuv-design-system` Β§6 ARE the deck's signature visual elements β use them.
### Optional mode: cinematic-flight (sky-blue + hot pink)
Only use when the talk's central metaphor IS literal flight (i.e., the "Build Agents That Ship" NICE deck where every slide leans into the flight arc). Most talks should stay on Fly High.
```ts
const cinematicFlight = {
bg: '#dceaf6', // sky-blue base
text: '#1a1814', // charcoal
accent: '#ff3b8a', // hot pink β the trail color
yellow: '#ffd76e', // soft sun
cloudWhite: '#ffffff',
skyDeep: '#7ab0d4',
warmGray: '#6b7a8a',
red: '#c8403d', // failure indicators
green: '#2f7d4f', // success indicators
shadow: 'rgba(80, 120, 180, 0.20)',
hairline: 'rgba(26, 60, 100, 0.18)',
};
```
In cinematic-flight mode, swap the JourneyBar trail to `--accent` (hot pink) and use sky-blue as the act-slide background instead of purple. Everything else (Anton + Inter typography, JourneyBar structure, narrative arc, voice rules, reusable templates) is identical.
### The JourneyBar β the signature unifying element
This is **yuv-decks' single most powerful unifying element**, on every slide at the top edge.
Thin dashed flight-route line from `DEPART Β· [host company]` to `ARRIVE Β· [outcome]`. Solid trail fills as you progress through the deck (uses active palette's accent: purple in Fly High, hot pink in cinematic-flight). A small β airplane icon sits at the current position with **dynamic pitch**:
- Act I Boarding β 90Β° (level, taxiing)
- Act II Ascent β 58Β° (nose up, climbing)
- Act III Cruise β 90Β° (level, cruise)
- Act IV Descent β 115Β° (nose down, descending)
Three terminal-dots mark the act boundaries. Phase label below the bar: `II Β· ASCENT 2/4`.
Every slide enters with a 0.65s scale-and-defocus. Feels like a film cut.
---
## Step 6 β Companion skills (when to invoke which)
This skill orchestrates others. Invoke them at the right moment:
| Skill | When to invoke | What it does |
|---|---|---|
| **`yuv-design-system`** | Always β Step 5 and any palette/type/component decision | Visual brand source of truth. Pull palette tokens, type rules, signature components, brand assets, social link footer from here. |
| **`nano-banana-pro`** (or `anthropic-skills:nano-banana-2`) | After Step 5 β to generate cinematic hero/atmospheric images for every major slide. **Requires `GEMINI_API_KEY`.** | Image generation. Use the prompt template below. |
| **`hyperframes`** | For 4β5 high-impact video moments (cover intro, big-number reveal, case-study timelines, closing flourish). | HTML/CSS/GSAP video composition β renders to MP4 embedded as `<video>` in the slide. |
| **`mermaid-diagrams`** | For technical architecture diagrams when SVG is heavier than needed. | Clean flowcharts/sequence diagrams. |
| **Excalidraw MCP** (`create_view`) | For live-in-chat hand-drawn workflow diagrams you can show the user during design discussion. | Interactive Excalidraw rendering. |
| **`video-edit`** / **`yuv-viral-video`** | If the talk includes pre-recorded selfie footage that needs to be embedded. | Video editing pipeline. |
Used for the Act III consideration slides (10β22). Two-column grid: text left, offset-shadow metric card right. Supports optional `bgImage` + `cinematicBg` for the cinematic look.
### `CaseStudy` β story-arc slide for failure/success/reference
Used for the three case studies. Top: status pill + period. Big company name. Tagline below ("Klarna is Sweden's biggest fintechβ¦"). 4 fact-rows on left, image/video on right, pivotal moment box, lesson card, citation strip.
### `LessonsGrid` β 4-card "Why it failed/worked" pattern
Used right after each case study. Headline + 4 numbered cards in a 2Γ2 grid + colored takeaway strip ("Take this with you Β· β¦").
### `JourneyBar` β flight-path indicator at the top of every slide
The unifying element. Renders the dashed full route, the solid trail filled to current % (purple in Fly High, hot pink in cinematic-flight), three terminal dots, and the airplane icon with phase-dependent angle.
### `AtmosphericBg` β backdrop with `cinematic` mode
(one per major slide, using the mode-appropriate prompt template).
Save to slides/<deck-id>/assets/.
8. Invoke hyperframes for 4β5 video moments (cover intro, hook reveal,
case-study timelines, closing). Render to MP4, drop into assets/.
9. Wire images and videos into slides. Use AtmosphericBg cinematic for
images, full <video> for the dramatic moments.
10. Verify in browser: walk every slide. Check vertical budget. Check
that no bullet wraps. Check that fonts loaded.
11. Iterate with the customer. EXPECT 5+ redirects. Don't fight them β
each one improves the deck.
12. Push to a private GitHub repo BEFORE the talk so it survives a
laptop failure. Include a README with clone-and-run instructions.
```
---
## Step 10 β Anti-patterns (things that look good but fail)
- β **ROI math with division formulas** β use plain English ("Did it pay for itself? = What you got back Γ· What you spent.")
- β **"Should you build it?" as 4 bullet points** β use a 2Γ2 quadrant matrix (high/low volume Γ repetitive/creative). Visual matrix is 10Γ clearer than prose.
- β **Mgmt-pitch slides** in a hackathon deck β cut. Wrong audience.
- β **Using cinematic-flight for a non-flight-metaphor talk** β default to Fly High purple. cinematic-flight is reserved for talks where literal flight IS the arc.
- β **Same template for every slide** β looks uniform but boring. Add cinematic backgrounds per slide for unity-with-variety.
- β **Citing fabricated stats** to a developer audience β use rules of thumb instead, or cut the number entirely.
- β **EBIT, PoC, RAG, BYOC** dumped without definition β audience tunes out within 30 seconds.
- β **"Watson failed because of misalignment"** β too abstract. Be specific: "Trained on textbook cases. Real patients aren't in the textbook."
- β **Layouts that wrap text on bullets** β shorten or split.
- β **`overflow: auto`** to hide overflowing content β the canvas doesn't scroll. Cropped content is gone.
- β **Stacking multiple Anton elements on one slide** β see yuv-design-system Β§6 "One Anton element per slide / section."
---
## Step 11 β The DECK-PLAYBOOK.md file
After scaffolding, drop a `DECK-PLAYBOOK.md` at the project root for the speaker to add their personal notes. Section 10 of the playbook is intentionally a `TODO` checklist for the speaker to fill in after the talk:
> - [ ] _What worked in the room?_
> - [ ] _What would I do differently next time?_
> - [ ] _What surprised me?_
Each deck becomes feedback for the next deck. After 10 sessions, the playbook will be more accurate than the speaker's conscious memory.
---
## Step 12 β Repository structure (the deliverable)
When unsure how to implement a pattern described in this skill, **read the corresponding file in that repo**.
---
## Closing principle
**The deck is for the audience, not for the speaker.**
Every layer of polish β voice, story, visual, motion β exists to make the audience feel they're on a journey, that the lessons are theirs to take, and that the speaker respects their time and intelligence.
If a slide doesn't pass the "would this drop an aha-token in the audience's mind" test, cut or rewrite it. Hollywood, not corporate. Story, not summary. Flight, not boxes.
