BuilderIO/create-deck
templates/slides/.agents/skills/create-deck/SKILL.md
How to create a new deck with slides from scratch. Read this before creating any deck. Contains exact HTML templates for every slide layout — no codebase exploration needed.
$ install --global
skillsauthnpx skillsauth add BuilderIO/agent-native create-deckInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 7:48 PM14.3s1 file scanned
SKILL.md
- name:
- create-deck
- description:
- How to create a new deck with slides from scratch. Read this before creating any deck. Contains exact HTML templates for every slide layout — no codebase exploration needed.
Creating a Deck
Do not explore the codebase. Everything you need is here.
Workflow
- Plan the slides (title, section dividers, content slides)
- Call
create-deckaction with all slides in one shot - Navigate to the new deck
pnpm action create-deck --title "My Deck" --slides '[
{ "id": "slide-1", "layout": "title", "content": "..." },
{ "id": "slide-2", "layout": "content", "content": "..." }
]'
Then navigate:
pnpm action navigate --deckId=<id from create-deck output>
Slide Wrapper
Every slide's content must use this exact outer div:
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: 'Poppins', sans-serif;">
<!-- slide content here -->
</div>
Background is pure black (bg-[#000000]) — set by the renderer, not the slide HTML.
Ready-to-Use Templates
Copy and fill in the bracketed values. Use \ to escape quotes inside the JSON string.
Title Slide
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: 'Poppins', sans-serif;">
<div style="font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 24px;">[LABEL OR DATE]</div>
<h1 style="font-size: 64px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -2px; margin: 0 0 24px 0;">[TITLE]</h1>
<p style="font-size: 22px; color: rgba(255,255,255,0.55); margin: 0;">[SUBTITLE OR PRESENTER]</p>
</div>
Section Divider
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: 'Poppins', sans-serif;">
<div style="font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 20px;">[SECTION NUMBER, e.g. 01]</div>
<h2 style="font-size: 72px; font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -2px; margin: 0;">[SECTION TITLE]</h2>
</div>
Content Slide (bullets)
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: 'Poppins', sans-serif;">
<div style="font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 16px;">[SECTION LABEL]</div>
<h2 style="font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 48px 0;">[SLIDE HEADING]</h2>
<div style="display: flex; flex-direction: column; gap: 20px;">
<div style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;">●</span>
<span style="font-size: 22px; color: rgba(255,255,255,0.85); line-height: 1.5;">[BULLET TEXT]</span>
</div>
<div style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;">●</span>
<span style="font-size: 22px; color: rgba(255,255,255,0.85); line-height: 1.5;">[BULLET TEXT]</span>
</div>
<div style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;">●</span>
<span style="font-size: 22px; color: rgba(255,255,255,0.85); line-height: 1.5;">[BULLET TEXT]</span>
</div>
</div>
</div>
Two-Column Slide (text left, image/visual right)
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: 'Poppins', sans-serif;">
<div style="font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 16px;">[SECTION LABEL]</div>
<h2 style="font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 40px 0;">[HEADING]</h2>
<div style="display: flex; gap: 60px; flex: 1;">
<div style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
<div style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;">●</span>
<span style="font-size: 20px; color: rgba(255,255,255,0.85); line-height: 1.5;">[BULLET]</span>
</div>
<div style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;">●</span>
<span style="font-size: 20px; color: rgba(255,255,255,0.85); line-height: 1.5;">[BULLET]</span>
</div>
</div>
<div class="fmd-img-placeholder" style="flex: 1; border-radius: 12px; min-height: 300px;">[IMAGE DESCRIPTION]</div>
</div>
</div>
Statement / Quote Slide
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: 'Poppins', sans-serif;">
<div style="width: 60px; height: 4px; background: #00E5FF; margin-bottom: 40px;"></div>
<p style="font-size: 48px; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -1px; margin: 0 0 32px 0;">“[STATEMENT OR QUOTE]”</p>
<p style="font-size: 18px; color: rgba(255,255,255,0.45); margin: 0;">[SOURCE OR ATTRIBUTION]</p>
</div>
Metrics / Stats Slide
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: 'Poppins', sans-serif;">
<div style="font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 16px;">[SECTION LABEL]</div>
<h2 style="font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 60px 0;">[HEADING]</h2>
<div style="display: flex; gap: 60px;">
<div style="flex: 1;">
<div style="font-size: 72px; font-weight: 900; color: #00E5FF; letter-spacing: -2px; line-height: 1;">[METRIC]</div>
<div style="font-size: 18px; color: rgba(255,255,255,0.55); margin-top: 12px;">[LABEL]</div>
</div>
<div style="flex: 1;">
<div style="font-size: 72px; font-weight: 900; color: #00E5FF; letter-spacing: -2px; line-height: 1;">[METRIC]</div>
<div style="font-size: 18px; color: rgba(255,255,255,0.55); margin-top: 12px;">[LABEL]</div>
</div>
<div style="flex: 1;">
<div style="font-size: 72px; font-weight: 900; color: #00E5FF; letter-spacing: -2px; line-height: 1;">[METRIC]</div>
<div style="font-size: 18px; color: rgba(255,255,255,0.55); margin-top: 12px;">[LABEL]</div>
</div>
</div>
</div>
Closing / CTA Slide
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: 'Poppins', sans-serif;">
<div style="font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 24px;">[LABEL, e.g. GET STARTED]</div>
<h2 style="font-size: 64px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -2px; margin: 0 0 32px 0;">[CLOSING STATEMENT]</h2>
<p style="font-size: 22px; color: rgba(255,255,255,0.55); margin: 0;">[CONTACT OR NEXT STEP]</p>
</div>
Image Placeholders
When a slide needs a visual, use this div — it renders as a styled placeholder and can later be replaced with a generated image:
<div class="fmd-img-placeholder" style="width: 100%; height: 300px; border-radius: 12px;">[Description of what image should show]</div>
Bold Terms with Description
For definition-style bullets:
<div style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;">●</span>
<span style="font-size: 22px; line-height: 1.5;">
<strong style="font-weight: 800; color: #fff;">[Term]</strong>
<span style="color: rgba(255,255,255,0.55);"> — [description]</span>
</span>
</div>
Complete Example
A 4-slide deck, ready to run:
pnpm action create-deck --title "Product Vision 2025" --slides '[
{
"id": "slide-1",
"layout": "title",
"content": "<div class=\"fmd-slide\" style=\"padding: 80px 110px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: '\''Poppins'\'', sans-serif;\"><div style=\"font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 24px;\">ANNUAL STRATEGY</div><h1 style=\"font-size: 64px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -2px; margin: 0 0 24px 0;\">Product Vision 2025</h1><p style=\"font-size: 22px; color: rgba(255,255,255,0.55); margin: 0;\">Engineering Leadership — Q1 2025</p></div>"
},
{
"id": "slide-2",
"layout": "content",
"content": "<div class=\"fmd-slide\" style=\"padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start; font-family: '\''Poppins'\'', sans-serif;\"><div style=\"font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF; margin-bottom: 16px;\">OVERVIEW</div><h2 style=\"font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0 0 48px 0;\">Three Core Priorities</h2><div style=\"display: flex; flex-direction: column; gap: 20px;\"><div style=\"display: flex; align-items: flex-start; gap: 16px;\"><span style=\"font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;\">●</span><span style=\"font-size: 22px; color: rgba(255,255,255,0.85); line-height: 1.5;\">Ship the agent platform by March</span></div><div style=\"display: flex; align-items: flex-start; gap: 16px;\"><span style=\"font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;\">●</span><span style=\"font-size: 22px; color: rgba(255,255,255,0.85); line-height: 1.5;\">Grow to 10k active teams</span></div><div style=\"display: flex; align-items: flex-start; gap: 16px;\"><span style=\"font-size: 8px; color: #fff; margin-top: 8px; flex-shrink: 0;\">●</span><span style=\"font-size: 22px; color: rgba(255,255,255,0.85); line-height: 1.5;\">Reduce time-to-value to under 5 minutes</span></div></div></div>"
}
]'
After creating, navigate to the deck:
pnpm action navigate --deckId=<id>
Related Skills
BuilderIO/booker
tools
VerifiedTrustedCommunity
Public booking flow — the state machine, animations, and URL/app-state sync.
108SKILL.mdUpdated Apr 19, 2026
BuilderIO/workflows
tools
VerifiedTrustedCommunity
Trigger-based automations — reminders, follow-ups, webhooks — across the booking lifecycle.
46SKILL.mdUpdated Apr 19, 2026
BuilderIO/team-scheduling
tools
VerifiedTrustedCommunity
Team event types, round-robin assignment, collective bookings, host weights, and no-show calibration.
46SKILL.mdUpdated Apr 19, 2026
BuilderIO/slot-engine
development
VerifiedTrustedCommunity
The pure `computeAvailableSlots` function — inputs, outputs, invariants, and debugging guide.
46SKILL.mdUpdated Apr 19, 2026