brand-presentation
Create brand-aligned PowerPoint presentations using vibeflow component library and brand strategy. Use when users request presentations, pitch decks, slides, or PowerPoint files for vibeflow/Alavida brand content.
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- Updated: 2025-11-22
Download the latest version (v1.0.0) from this page.
SKILL.md
---
name: brand-presentation
description: Create brand-aligned PowerPoint presentations using vibeflow component library and brand strategy. Use when users request presentations, pitch decks, slides, or PowerPoint files for vibeflow/Alavida brand content.
---
# 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:
```json
{
"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:
```bash
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)