vela-slides

name	vela-slides
version	2.3.0
updated	"2026-03-20T00:00:00.000Z"
description	Generate high-quality Vela-compatible slide deck JSON from topics, outlines, documents, or existing slide content. Produces structured slide objects with 22+ block types including SVG diagrams and loop flows, theming, and presentation-ready layouts. Assembles final .jsx artifact with embedded deck data, ready for immediate use. Use when users want to create, populate, or restyle slide decks for Vela — the React-based presentation engine.

Vela Slides Skill

v2.3.0 · CLI with 12 subcommands, full JSON format only

Generate presentation-ready slide decks and assemble them into runnable Vela .jsx artifacts.

When to Use

• User wants to create a slide deck / presentation
• User provides a topic, agenda, outline, or document to turn into slides
• User wants to restyle or improve existing Vela slide JSON

Before You Start

Read the references — they contain the complete block schema, design patterns, and theming system:

Read references/block-schema.md    # All 20+ block types with properties
Read references/design-patterns.md # Layout rules, slide archetypes, composition
Read references/themes.md          # Color palettes, theming system

Architecture

For app editing (part-files, concat, template), read references/app-editing.md.

Vela CLI Setup

The vela CLI is a single entry point for all deck operations. Install once per session:

export PATH="/home/claude/.local/bin:$PATH"
ln -sf /mnt/skills/user/vela-slides/scripts/vela.py /home/claude/.local/bin/vela

Discovery (zero turns wasted):

vela --capabilities   # JSON index of all commands, flags, exit codes
vela --help           # Human-readable overview

Workflow A: Generate a Deck (most common)

Step 1: Generate Full Deck JSON

Create a deck JSON file in full format. Save to /home/claude/<deck-name>-slides.json.

{
  "deckTitle": "My Presentation",
  "lanes": [
    {
      "title": "Main",
      "items": [
        {
          "title": "Section Name",
          "status": "done",
          "importance": "must",
          "slides": [
            {
              "title": "Slide Title",
              "bg": "#0A0F1C",
              "color": "#E6F1FF",
              "accent": "#3B82F6",
              "padding": "36px 48px",
              "duration": 60,
              "blocks": [
                {"type": "badge", "text": "LABEL", "icon": "Star", "bg": "#3B82F620", "color": "#3B82F6"},
                {"type": "spacer", "h": 8},
                {"type": "heading", "text": "Title", "size": "2xl"},
                {"type": "text", "text": "Body text here", "size": "lg", "color": "#8892B0"}
              ]
            }
          ]
        }
      ]
    }
  ]
}

Step 2: Ship (validate + assemble + deliver)

vela deck ship /home/claude/<deck-name>-slides.json

Step 3: Present

present_files(["/mnt/user-data/outputs/<deck>.jsx", "/mnt/user-data/outputs/<deck>-slides.json"])

Workflow A½: Edit an Existing Deck

Use the vela CLI instead of view + str_replace — saves 80-97% tokens on typical edits.

Inspect

vela deck list deck.json                  # TOC: slide#, title, blocks, theme, duration
vela slide view deck.json 3               # Compact block summary
vela slide view deck.json 3 --raw         # Full JSON for one slide

Edit

vela deck replace-text deck.json "old text" "new text"
vela slide edit deck.json 3 duration 90
vela slide edit deck.json 3 block.2.text "New heading"
vela slide remove deck.json 4
vela slide move deck.json 5 2
vela slide duplicate deck.json 2
vela slide insert deck.json 3 new-slide.json

Safety

vela slide remove deck.json 3 --dry-run

Then ship

vela deck ship deck.json

Critical Rules

Canvas

• Virtual canvas: 960x540px (16:9)
• Base padding: "36px 48px" — never less
• Max 5-7 blocks per slide
• Left-aligned = full width. Center-aligned = shrink-wrap.

Duration

• Every slide MUST have duration (integer, seconds)
• Title: 15-30s | Content: 60-90s | Dense: 90-180s

Visual Design

• Every slide MUST have bg or bgGradient
• Size hierarchy: 3xl-4xl titles > 2xl headings > lg body > md supporting > sm captions
• Use icons generously. Use spacer blocks for breathing room.
• First slide = title (centered, gradient, 4xl). Last slide = closing (gradient, strong visual).

Block Selection

• Don't default to heading+bullets — vary layouts
• icon-row > plain bullets for feature lists
• flow for processes | grid for comparisons | table for data
• steps for numbered sequences | callout for key insights

Theming

See references/themes.md for palettes.

Icons

PascalCase Lucide names. 1000+ available. Common: Zap, Brain, Rocket, Shield, Target, Clock, Users, Heart, Globe, Code, Database, Lightbulb, TrendingUp, BarChart, Lock, Eye, Cpu, Layers, Bot, Sparkles