Brand Presentation

Overview

Generate brand-aligned PowerPoint presentations using the vibeflow React component library with built-in brand styling. This skill combines brand strategy from /strategy/ files with pre-styled React components to produce on-brand .pptx files.

When to Use This Skill

Invoke when users request:

• "Create a pitch deck about [topic]"
• "Generate a presentation on [pillar/theme]"
• "Make slides for [use case]"
• "Build a PowerPoint about [subject]"
• Any request for presentation files (.pptx) with vibeflow/Alavida branding

Workflow

Step 1: Understand the Request

Identify the presentation requirements:

• Type: Pitch deck, thought leadership, product launch, sales presentation
• Topic: What subject matter or theme
• Duration: How many slides needed (if not specified, use template defaults)
• Audience: Who will view this (if relevant)

Step 2: Read Brand Strategy Files

Read these files in parallel to understand brand positioning and messaging:

Required files:

• /strategy/messaging/pillars.md - Five core brand pillars with messaging themes
• /strategy/core/positioning.md - Brand positioning statement

Optional files (based on context):

• /strategy/core/narrative.md - Brand story
• /strategy/audience/index.md - Target personas

Reference files (consult as needed):

• references/brand-strategy-mapping.md - How pillars map to slide content
• references/presentation-templates.md - Common presentation structures

Step 3: Engage Human-in-Loop (When Needed)

Use AskUserQuestion to clarify presentation direction when:

• Multiple brand pillars could apply
• Presentation type is ambiguous
• Specific points to emphasize aren't clear from request

Example questions:

• "Which brand pillars should this presentation emphasize? (Select 1-2)"
  • Options: Pillar 1 (Own Your Stack), Pillar 2 (Build Competency), Pillar 3 (Verified Outputs), Pillar 4 (Human Judgment), Pillar 5 (Tactician → Architect)
• "What type of presentation should this be?"
  • Options: Pitch deck, Thought leadership, Product launch, Sales presentation
• "How many slides do you want?"
  • Options: 5 slides, 7-8 slides, 10+ slides, Let me decide based on content

Guidance:

• Ask only when genuinely needed for clarity
• Don't ask if the request already specifies (e.g., "create a pitch deck" = pitch deck template)
• Use multiSelect when appropriate (e.g., pillar selection)

Step 4: Select Presentation Template

Based on presentation type, choose appropriate template structure from references/presentation-templates.md:

• Pitch Deck - 8-10 slides, emphasizes Pillar 1 + Pillar 5
• Thought Leadership - 5-7 slides, emphasizes Pillar 1 + Pillar 4
• Product Launch - 6-8 slides, emphasizes Pillar 3 + Pillar 1
• Sales Presentation - 7-9 slides, emphasizes Pillar 1 + Pillar 3

Reference references/presentation-templates.md for detailed slide-by-slide structure.

Step 5: Generate Slide Content

For each slide in the template:

1. Determine slide purpose from template structure
2. Select relevant brand pillar(s) for that slide
3. Extract messaging from /strategy/messaging/pillars.md for selected pillar
4. Generate slide content using:
   • Pillar language and key phrases
   • Customer language from pillars.md (e.g., "working ON vs IN business", "vibe marketing")
   • Proof points when making claims
   • Brand voice (confident but approachable, evidence-based)

Content guidelines:

• Titles: 8 words max, use pillar language
• Body text: 3-5 key points, concise
• Use bullet points for clarity
• Reference specific pillar themes

Reference: references/brand-strategy-mapping.md for pillar-to-content mapping examples.

Step 6: Map Content to Components

Select appropriate React component for each slide based on content structure:

Available components:

• title-slide - Opening/closing slides, section dividers
• content-slide - Standard content with title and body
• two-column-slide - Comparisons, contrasts, before/after
• closing-slide - Final slide with CTA

Component props:

• All components: Brand styling pre-applied (colors, fonts, spacing)
• Content passed as strings or React children
• See references/component-guide.md for complete component documentation

Selection criteria:

• Use two-column-slide for comparisons (SaaS vs. ownership, before/after)
• Use content-slide for single topics with bullets
• Use title-slide for opening and section dividers
• Use closing-slide for final CTA

Step 7: Create Presentation Config JSON

Generate JSON configuration file with this structure:

{
  "title": "Presentation Title",
  "author": "Alavida",
  "layout": "16:9",
  "slides": [
    {
      "type": "title-slide",
      "props": {
        "title": "Main Title",
        "subtitle": "Subtitle",
        "author": "Alavida",
        "date": "2025-10-17"
      }
    },
    {
      "type": "content-slide",
      "props": {
        "title": "Slide Title",
        "children": "Slide content here"
      }
    }
  ]
}

Naming convention:

• Save to descriptive filename: [topic]-presentation.json
• Example: ownership-pitch-deck.json, ai-slop-thought-leadership.json

Location:

• Save in project root or user-specified location

Reference:

• See assets/example-configs/ for complete example presentations
• Consult references/component-guide.md for component prop specifications

Step 8: Run Export Script

Execute the export using the CLI script:

cd presentation-system && node scripts/export-pptx.js \
  --config ../<config-filename>.json \
  --output ../<output-filename>.pptx \
  --verbose

Parameters:

• --config: Path to JSON config file created in Step 7
• --output: Desired output path for .pptx file
• --verbose: Show detailed progress (recommended)

Working directory:

• Must run from presentation-system/ directory
• Export script located at presentation-system/scripts/export-pptx.js

Step 9: Verify Success

Check that export completed successfully:

• Look for "✓ Export completed" message
• Verify .pptx file exists at output path
• Report success to user with file location

If export fails:

• Check error message for specific issue
• Common issues: Config file path, missing dependencies, malformed JSON
• Debug and re-run export

Example Usage

User request:

"Create a pitch deck about owning your marketing stack"

Workflow execution:

1. Understand: Pitch deck type, topic = ownership/Pillar 1
2. Read brand files: /strategy/messaging/pillars.md, /strategy/core/positioning.md
3. Human-in-loop: Skip (request is clear)
4. Select template: Pitch deck (8-10 slides, Pillar 1 + Pillar 5 emphasis)
5. Generate content: Extract Pillar 1 messaging, use ownership language
6. Map to components: title-slide, content-slide, two-column-slide for comparison
7. Create config: ownership-pitch-deck.json with brand-aligned content
8. Run export: node scripts/export-pptx.js --config ../ownership-pitch-deck.json --output ../ownership-deck.pptx --verbose
9. Verify: Check for success message and file creation

Resources

references/

Documentation loaded into context as needed:

• brand-strategy-mapping.md - How brand pillars map to slide content, pillar-specific messaging examples
• component-guide.md - Complete component documentation with props and usage
• presentation-templates.md - Common presentation structures (pitch deck, thought leadership, etc.)

assets/example-configs/

Example JSON configurations demonstrating complete presentations:

• pitch-deck.json - 8-slide pitch deck emphasizing Pillar 1 (Own Your Stack)
• thought-leadership.json - 7-slide thought leadership deck on tool dependency
• product-launch.json - 7-slide product launch emphasizing Pillar 3 (Verified Outputs)

Usage: Copy and modify as starting points, or reference for structure and content patterns.

Brand Pillars Quick Reference

Pillar 1: Own Your Stack, Starve the SaaS Machine (40% emphasis)

• SaaS critique, ownership messaging, vendor independence

Pillar 2: Build Competency, Reject Tool Dependency (20% emphasis)

• Skills development, capability building, transferable knowledge

Pillar 3: Verified Outputs, Kill AI Slop (20% emphasis)

• Quality, verification, anti-hallucination, professional reputation

Pillar 4: Human Judgment is Your Moat (10% emphasis)

• Augmentation vs. replacement, differentiation, competitive advantage

Pillar 5: From Tactician to Architect (10% emphasis)

• Transformation, identity shift, working ON vs. IN business

Best practice: Emphasize 1-2 pillars per presentation. Reference references/brand-strategy-mapping.md for detailed pillar-to-content mapping.

Technical Requirements

Dependencies:

• Export script: presentation-system/scripts/export-pptx.js
• Component library: presentation-system/components/slides/
• Brand tokens: presentation-system/lib/brand/default-tokens.ts

Prerequisites:

• Node.js installed
• presentation-system dependencies installed (npm install)
• Built lib files (npm run build if needed)

Supported layouts:

• 16:9 (default, recommended)
• 4:3 (optional)
• 16:10 (optional)