---
name: frontend-slides
description: Full-control slideshow content management system with granular design control, brand guidelines engine, and multi-source content pipeline. Use when building presentations that require: (1) granular typography/spacing/layout control beyond preset limitations, (2) applying brand guidelines (CE, PHAT liquid gold, client brands), (3) content from multiple sources (chat + images from different locations), (4) modular architecture separating content, assets, and styling. This is a CMS for presentations, not preset enhancement.
---

# Frontend Slides - Full Control CMS

A modular content management system for presentations with granular design control and multi-source content integration.

## Architecture

### Core Components

1. **Content API** - Structured input from any source (chat, files, APIs)
2. **Asset API** - Image integration from any source  
3. **Style Guide Engine** - Parse brand guidelines → CSS variables
4. **Layout Engine** - Granular slide layout control
5. **Generation Engine** - content + assets + styling = HTML

### Workflow

```
Content Sources → Content API → \
                                  → Generation Engine → HTML Slideshow
Asset Sources → Asset API → /
Brand Guidelines → Style Guide Engine → /
```

## Quick Start

### 1. Initialize Slideshow Project

```bash
scripts/init_slideshow.py <project-name> [--brand ce|phat|custom]
```

Creates project structure with APIs and engines.

### 2. Define Content Structure

Use the Content API to structure your presentation data:

```javascript
// content.json
{
  "metadata": {
    "title": "PHAT Foods Strategy",
    "brand": "phat",
    "theme": "liquid-gold"
  },
  "slides": [
    {
      "id": "slide-1",
      "type": "title",
      "content": {
        "headline": "PHAT Foods",
        "subline": "Premium Healthy Asian Takeout"
      }
    }
  ]
}
```

### 3. Apply Brand Guidelines

The Style Guide Engine automatically parses brand guidelines and generates CSS variables:

For CE brand:
```bash
scripts/apply_brand.py --brand ce --output styles/ce-variables.css
```

For PHAT liquid gold:
```bash
scripts/apply_brand.py --brand phat --theme liquid-gold --output styles/phat-variables.css
```

### 4. Integrate Assets

Asset API handles images from any source:

```bash
scripts/integrate_assets.py --source chat-images/ --slides content.json
scripts/integrate_assets.py --source external-api --api-key xxx --slides content.json
```

### 5. Generate Slideshow

```bash
scripts/generate_slideshow.py --content content.json --styles styles/ --output dist/
```

## Advanced Usage

### Custom Brand Guidelines

Create custom style guides by defining brand tokens:

```javascript
// brand-guidelines.json
{
  "name": "Custom Brand",
  "typography": {
    "primary": "Inter",
    "secondary": "JetBrains Mono",
    "weights": [300, 400, 500]
  },
  "colors": {
    "primary": "#cc0000",
    "secondary": "#1a1a1a"
  },
  "layout": {
    "spacing": "8px grid",
    "max-width": "1200px"
  }
}
```

### Granular Layout Control

Control every aspect of slide layout:

```css
/* Custom slide layouts */
.slide-title {
  --heading-size: 3.5rem;
  --heading-spacing: 0.8em;
  --content-max-width: 800px;
  --content-alignment: center;
}

.slide-content {
  --text-size: 1.2rem;
  --line-height: 1.6;
  --paragraph-spacing: 1.5em;
}
```

### Multi-Source Content Pipeline

Combine content from different sources:

```bash
# From chat conversation
scripts/extract_content.py --source chat --conversation-id 12345

# From existing presentations  
scripts/extract_content.py --source pptx --file presentation.pptx

# From API endpoints
scripts/extract_content.py --source api --endpoint https://api.example.com/slides
```

## File Structure

```
project-name/
├── content/
│   ├── content.json          # Structured slide data
│   ├── extracted/            # Content from sources
│   └── templates/            # Content templates
├── assets/
│   ├── images/              # Slide images
│   ├── icons/               # Brand icons
│   └── media/               # Video/audio assets
├── styles/
│   ├── brand-variables.css  # Generated brand tokens
│   ├── layout-engine.css    # Layout utilities
│   └── custom.css           # Project-specific styles
├── scripts/
│   ├── apis/                # Content & Asset APIs
│   ├── engines/             # Style & Layout engines
│   └── generators/          # HTML generation
└── dist/
    ├── index.html           # Generated slideshow
    ├── styles.css           # Compiled styles
    └── assets/              # Optimized assets
```

## Brand Presets

### CE Brand
- Typography: Inter (headings), JetBrains Mono (code)
- Colors: Red (#cc0000), Black (#1a1a1a), Grey scale
- Layout: Clean, minimal, precise spacing
- No: gradients, shadows, rounded corners > 4px

### PHAT Liquid Gold
- Typography: Custom display fonts, readable sans-serif
- Colors: Gold (#D4AF37), Rich blacks, Warm whites  
- Layout: Premium feel, generous spacing, elegant hierarchy
- Style: Luxury food brand aesthetics

### Custom Brands
Define your own brand guidelines using the brand-guidelines.json format.

## APIs Reference

For detailed API usage and advanced configuration:
- **Content API**: See [references/content-api.md](references/content-api.md)
- **Asset API**: See [references/asset-api.md](references/asset-api.md)  
- **Style Guide Engine**: See [references/style-guide-engine.md](references/style-guide-engine.md)
- **Layout Engine**: See [references/layout-engine.md](references/layout-engine.md)

## Scripts Reference

For complete script documentation and options:
- **Initialization**: See [references/scripts-init.md](references/scripts-init.md)
- **Content Processing**: See [references/scripts-content.md](references/scripts-content.md)
- **Asset Processing**: See [references/scripts-assets.md](references/scripts-assets.md)
- **Generation**: See [references/scripts-generation.md](references/scripts-generation.md)