BuilderIO/slide-editing
templates/slides/.agents/skills/slide-editing/SKILL.md
How to edit individual slides -- content formatting, HTML styling rules, updating slide content in the database.
$ install --global
skillsauthnpx skillsauth add BuilderIO/agent-native slide-editingInstall 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 PM16.5s1 file scanned
SKILL.md
- name:
- slide-editing
- description:
- How to edit individual slides -- content formatting, HTML styling rules, updating slide content in the database.
Slide Editing
Slides are HTML content stored inside the deck JSON. Each slide's content field is a self-contained HTML string that renders at 1920x1080 resolution.
Slide HTML Structure
Every slide uses this wrapper:
<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: flex-start;">
<!-- Slide content here -->
</div>
Styling Rules
All generated slides follow these conventions:
| Element | Style |
|---------|-------|
| Background | bg-[#000000] (pure black) |
| Font | font-family: 'Poppins', sans-serif on all text |
| Section labels | font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00E5FF |
| Headings | font-size: 40px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -1px |
| Title slides | font-size: 54px; font-weight: 900 with justify-content: center |
| Bullet points | ● character (8px, white), gap: 20px, font-size: 22px, color: rgba(255,255,255,0.85) |
| Sub-bullets | ○ (open circle), padding-left: 36px |
| Bold terms | <strong style="font-weight: 800; color: #fff;">Term</strong> + description in rgba(255,255,255,0.55) |
| Accent color | #00E5FF (cyan) for section labels, emphasis, highlights |
Updating a Slide
To edit a slide's content:
- Get the deck:
pnpm action get-deck --id=<deckId> - Parse the JSON, find the slide by ID
- Modify the content HTML string
- Update the deck via
PUT /api/decks/:idwith the full updated deck JSON
Image Placeholders
For visual elements (diagrams, charts, photos), use placeholder divs:
<div class="fmd-img-placeholder" style="width: 100%; height: 300px; border-radius: 12px;">
Description of the image
</div>
Never try to recreate complex visuals with raw HTML/CSS. Use placeholders and generate proper images via the image generation flow.
Slide Layouts
Common layout patterns:
- Title slide: Single centered heading,
justify-content: center - Section divider: Large single word, centered
- Content: Section label + heading + bullet list
- Two-column: Flex row with
gap: 40px, text left, image right - Table: CSS grid with alternating row backgrounds
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