hoodini/yuv-decks
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 every slide in the Yuval voice (plain-language, no jargon, story-driven), applies the brand visual language from yuv-design-system, and orchestrates companion skills for hero images and video moments. Triggers on "make a deck", "create slides", "build a presentation", "build a deck", "new deck", "presentation about", "talk deck", "hackathon deck", "open-slide deck", "yuv-decks", "yuv deck", "deck like Yuval", "מצגת", "שקפים", "דק", "מצגת על", "להכין מצגת". Use proactively whenever the user asks for ANY slide-based talk; the skill self-selects the right scope.
npx skills add https://github.com/hoodini/ai-agents-skills --skill yuv-decksThe opinionated playbook for talk decks built on open-slide. Defines:
Visual palette is pulled from yuv-design-system in Decks mode — Fly High purple/yellow/grey (the dedicated palette for slide-based output). For talks whose central metaphor IS literal flight, this skill's own cinematic-flight opt-in mode (sky-blue + hot pink) — see Step 5 — overrides the design system's Decks tokens. Never use Neon mode for slides; Decks mode is exclusive to presentations.
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.
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).
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.
The user wants a *talk* or *presentation* deck. Triggers:
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.
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.
# 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.
Before drafting, lock in these four decisions via a single AskUserQuestion (multi-question form):
Do NOT skip this step. Every redirect later in the build traces back to a wrong assumption here.
All copy follows these three rules:
Replace every term that isn't a household word:
| Don't say | Say instead |
|---|---|
| EBIT | real profit |
| PoC | the prototype / the demo phase |
| BYOC | your own cloud |
| service-account-as-god | admin-token-for-everything |
| RAG | lookup before answering |
| fine-tuning | training the model on your data |
| vLLM | local LLM runner |
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").
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."
"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.
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:
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):
Never fabricate a stat. If you don't have a citation, use a *rule of thumb*, not a number with a fake source.
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 §6 — Signature components (PurpleBar, YellowUnderline, FlightHUD, CompassDial, CounterUp, HeroBg)yuv-design-system §7 — Animation defaults + Hyperframes compatibilityyuv-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.
Fly High is the default for all decks. Pulled from yuv-design-system §1:
:root {
--yuv-purple: #5E17EB; /* act-slide backgrounds, vertical accent bars, journey trail */
--yuv-purple-dark: #3D0DA8;
--yuv-yellow: #FFEC00; /* loud accent only — never a background */
--yuv-grey: #F1F2F2; /* content-slide background */
--yuv-white: #FFFFFF;
--yuv-black: #000000;
}
The two-background rule (non-negotiable, from yuv-design-system):
#F1F2F2 background, black headline.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.
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.
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.
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:
Three terminal-dots mark the act boundaries. Phase label below the bar: II · ASCENT 2/4.
Every non-video slide gets a full-bleed nano-banana image at 100% opacity with:
yuv-cinematic-pan, 22s, scale 1.04 → 1.06, translateX ±12px)textZone: 'left' | 'right' | 'bottom') keeping the text readable where it lives@keyframes yuv-page-enter {
0% { opacity: 0; transform: scale(1.06); filter: blur(10px); }
60% { opacity: 1; }
100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
Every slide enters with a 0.65s scale-and-defocus. Feels like a film cut.
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. |
| slide-authoring | Step 6 onward — when writing JSX | Open-slide hard rules: file contract, 1920×1080 canvas, vertical budget math, asset paths. |
| 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. |
Two flavours — match the active visual mode.
For Fly High mode (default):
[Scene description — 1–2 sentences, 16:9 cinematic frame, single focal subject]
STYLE: Cinematic editorial poster, electric-optimism dev-keynote aesthetic.
Vibrant. Luminous. Deep purple (#5E17EB) primary tones, electric yellow (#FFEC00)
warm accent lighting, near-black (#000000) shadows, soft grey (#F1F2F2) negative
space. Sharp lighting contrast. Generous space for typography overlay.
Movie poster, not infographic. NO TEXT. NO LOGOS. NO READABLE LETTERS.
For cinematic-flight mode:
[Scene description — 1–2 sentences, 16:9 cinematic frame, single focal subject]
STYLE: Cinematic editorial poster meets aviation-noir aesthetic. Vibrant. Luminous.
Dark moody background with neon-glow accents. Hot pink (#ff3b8a) as primary luminous
accent, soft sun yellow (#ffe066) as warm glow, sky blue (#7ab0d4) deep tones,
charcoal (#1a1814) shadows. Sharp lighting contrast. Generous space for typography
overlay. Movie poster, not infographic. NO TEXT. NO LOGOS. NO READABLE LETTERS.
Always: single focal subject (not a montage), one third of the frame as quiet sky for typography, explicit NO-TEXT instruction.
All open-slide framework rules live in slide-authoring:
export default [Page, …] satisfies Page[])index.tsx per deck, assets under slides/<id>/assets/react + standard web APIs only)overflow: autoRead slide-authoring end-to-end before writing any page JSX. The yuv-decks rules ADD on top of these framework rules; they never override them.
The build-agents-that-ship deck has 4 reusable component templates. Copy them into your new deck:
UseCase — consideration slide with pill, headline, bullets, metric cardUsed 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/referenceUsed 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" patternUsed 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 slideThe 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<AtmosphericBg src={img} cinematic textZone="left" />
The full source for these templates is in slides/claude-cowork-enterprise/index.tsx in the reference repo. Copy verbatim, then adapt.
1. Get the customer's agenda (literal bullets). Map slides 1:1.
2. Bootstrap: npx @open-slide/cli init <slug> && cd <slug> && npm install && npm run dev
3. Ask the 5 scoping questions (Step 1). Lock in answers — including visual mode.
4. Draft the 4-act outline (Step 3). Confirm with user before writing JSX.
5. Write all slide components in a single index.tsx under slides/<deck-id>/.
Use the reusable templates (UseCase, CaseStudy, LessonsGrid).
Pull palette tokens + signature components from yuv-design-system.
6. Add JourneyBar with PHASES matching your 4 acts.
7. Invoke nano-banana-pro: generate ~10 cinematic atmospheric images
(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.
overflow: auto to hide overflowing content → the canvas doesn't scroll. Cropped content is gone.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.
<deck-slug>/
├── package.json # @open-slide/core ^1.1.0
├── package-lock.json # locks exact versions (commit this)
├── README.md # clone-and-run instructions
├── DECK-PLAYBOOK.md # this skill, distilled for the speaker
├── AGENTS.md / CLAUDE.md # symlinked open-slide rules + playbook link
├── open-slide.config.ts
├── slides/
│ └── <deck-id>/
│ ├── index.tsx # ALL slides in one file (typically 22–24)
│ └── assets/ # *.mp4 (videos) + *.png (nano-banana images)
└── .gitignore # node_modules, .env*, .DS_Store
Push to a private GitHub repo before the talk:
gh repo create <user>/<deck-slug> --private --source=. --remote=origin --push \
--description "..."
The exact pattern this skill describes was implemented at:
<https://github.com/hoodini/build-agents-that-ship> (private — clone if you have access)
That repo includes:
index.tsx (~3000 lines)When unsure how to implement a pattern described in this skill, read the corresponding file in that repo.
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.
Take hoodini/yuv-decks from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm, npx.
Without those the skill loads but fails at the first command.