BAC Presentation Generator

A Claude skill for converting markdown files into professional, brand-compliant BAC HTML presentations.

Overview

This skill transforms markdown content into beautifully styled HTML slide presentations that follow BAC Brand Guidelines V2.0, complete with proper typography, color palette, logo placement, and professional layout. The generated HTML can be manually exported to PDF for client-facing deliverables.

Features

✅ Brand Compliance: Automatic application of BAC colors, typography, and logo
✅ 16:9 Aspect Ratio: Standard presentation format (1920×1080px)
✅ Four Slide Types: Title, section divider, content, and closing slides
✅ Custom Slide Framework: No opinionated libraries - full brand control
✅ Markdown Support: Full markdown syntax including tables, lists, code blocks, links
✅ Metadata Handling: Frontmatter extraction for presentation properties
✅ Slide Footers: Company name and slide numbers on content slides
✅ Simple Output: Generates clean HTML ready for browser-based PDF export
✅ Minimal Dependencies: Lightweight marked.js for robust parsing (~1.5MB total)
✅ Consistent Output: Script-based conversion ensures uniformity across presentations

Quick Start

0. Install Dependencies (First Time Only)

The BAC Presentation Generator uses marked.js for robust markdown parsing.

cd .claude/skills/bac-presentation-generator/scripts
npm install

This installs the required dependencies (~1.5MB including marked.js). Only needed once.

1. Prepare Your Markdown

Create a markdown file with frontmatter metadata and slide delimiters:

---
title: Cloud Migration Strategy
title_main: Cloud Migration Strategy
title_sub: AWS Infrastructure Modernisation
client: Acme Corp
prepared_by: Business Cloud Holdings Pty Ltd
date: 2025-01-25
version: 1.0
---

# Cloud Migration Strategy
## AWS Infrastructure Modernisation

---

## Agenda

- Current State Assessment
- Cloud Strategy & Benefits
- Migration Approach
- Timeline & Milestones

---

## Current State Assessment

**Legacy Environment:**

- 150+ physical servers
- End-of-life hardware (8-12 years old)
- Annual costs: $2.4M

---

2. Run the Conversion

cd .claude/skills/bac-presentation-generator/scripts
node convert_md_to_html.js input.md output.html

3. Generate PDF (Manual Step)

IMPORTANT: PDF generation is now a manual process.

Open the generated HTML file in your browser
Press Cmd+P (Mac) or Ctrl+P (Windows)
Select "Save as PDF"
CRITICAL: Enable "Background graphics" in print settings
Set paper size to landscape (preferably custom 1920×1080px)
Turn off "Headers and footers"
Save the PDF

See INSTALLATION.md for detailed browser-specific PDF creation instructions.

Why Manual PDF Generation?

Version 2.0 uses manual PDF generation to:

✅ Eliminate heavy dependencies (Puppeteer, Chromium)
✅ Keep package size minimal (~1.5MB with marked.js)
✅ Simplify installation (one-time npm install)
✅ Give users full control over PDF settings
✅ Work seamlessly as a Claude.ai skill

File Structure

bac-presentation-generator/
├── SKILL.md                    # Main skill definition and workflow
├── README.md                   # This file
├── CHANGELOG.md                # Version history and release notes
├── INSTALLATION.md             # Setup and PDF generation guide
├── assets/
│   ├── HOR_Fullcolour_Positive_RGB.png  # BAC logo (title & content slides)
│   ├── HOR_Fullcolour_Negative_RGB.png  # BAC logo (white, for dark backgrounds)
│   └── HOR_Mono_Negative_RGB.png        # BAC mono logo (closing slide)
├── reference/
│   ├── BRAND_GUIDELINES.md           # Extracted brand specifications
│   ├── VALIDATION_CHECKLIST.md       # Quality assurance checklist
│   └── CONTENT_DENSITY_GUIDELINES.md # Best practices for slide content
├── templates/
│   └── bac-presentation-template.html   # HTML/CSS slide template
├── scripts/
│   ├── convert_md_to_html.js   # Conversion script
│   └── package.json            # Node.js package info
└── examples/
    ├── sample-presentation.md              # Example markdown input
    ├── sample-presentation-output.html     # Generated HTML output
    └── sample-presentation-output.pdf      # Reference PDF export (V8 - production-ready)

Slide Types

The presentation generator supports four slide types:

1. Title Slide

Detection: First slide with H1 + H2
Layout: Logo, main title, subtitle, metadata table
Background: Light gradient
Footer: None

Example:

# Cloud Migration Strategy
## AWS Infrastructure Modernisation

2. Section Slide

Detection: Slide with only H1 (and optionally H2)
Layout: Right-aligned heading with left accent bar, blue gradient background
Background: Navy to blue gradient (135deg)
Footer: © 2025 + Company name + slide number

Example:

# Current State Assessment

# Cloud Strategy
## Benefits & Advantages

3. Content Slide

Detection: Slide with H2 + content
Layout: Top-aligned heading, content below, clear logo (full opacity)
Background: White
Footer: © 2025 + Company name + slide number
Logo: Fully visible brand mark at 120px, top-right (opacity 1.0)

Example:

## Infrastructure Overview

**Legacy Environment:**

- 150+ physical servers
- End-of-life hardware
- Annual costs: $2.4M

4. Closing Slide

Detection: Last slide with "Thank You" or "Questions?" text
Layout: Large centered white logo (400px) on dark background
Background: Navy to blue gradient (matches section slides)
Logo: Negative (white) logo for visibility on dark background
Footer: © 2025 + Company name + slide number (white text)
Auto-conversion: Automatically converts "Thank You" slides to logo-only format

Example:

# Thank You

Questions?

The above markdown will automatically render as a closing slide with just the BAC logo.

Markdown Syntax

Slide Delimiter

Use --- on its own line to separate slides:

## Slide One

Content here

---

## Slide Two

More content

Supported Markdown Elements

Element	Syntax	Result
Headers	`## H2` through `#### H4`	Styled headings with BAC typography
Bold	`text` or `__text__`	`<strong>` with proper weight
Italic	`text` or `_text_`	`<em>` styling
Links	`[text](url)`	Hyperlinks in BAC blue
Lists	`- item` or `1. item`	Bulleted/numbered lists
Tables	GitHub-flavored tables	Blue headers, alternating rows
Code	`code` or ```code```	Inline/block code with grey background
Blockquotes	`> text`	Blue left border, light blue background
Horizontal Rules	`---` (slide delimiter) or `***`	Grey divider line

Frontmatter Metadata

The following frontmatter fields are recognized:

title - Presentation title (browser tab and metadata table)
title_main - Main title on title slide (large heading)
title_sub - Subtitle on title slide (below main title)
All other fields - Displayed in metadata table on title slide

Example:

---
title: Business Proposal
title_main: Cloud Transformation
title_sub: AWS Migration Strategy
client: Acme Corporation
prepared_by: Business Cloud Holdings Pty Ltd
date: 2025-01-25
version: 1.0
service_area: Cloud & Infrastructure
---

Brand Compliance Checklist

Generated presentations automatically meet these requirements:

Colors: Only BAC-approved colors (#0066FF blue, #042A4C navy, grey scale)
Typography: Moderat and Suisse Int'l with web-safe fallbacks
Logo: Positioned on title slide with proper clearance, prominent on all content slides
Aspect Ratio: 16:9 (1920×1080px) for standard presentations
Tables: Blue headers, alternating grey/white rows
Layout: Professional spacing, optimized margins, two-column support
Print: Background graphics preserved, one slide per page
Footer: © 2025 + Company name and slide numbers on all slides (except title)

Workflow (from SKILL.md)

When using this skill, Claude follows this workflow:

Analyze Presentation Structure - Understand content and slide types
Evaluate Brand Compliance - Define quality criteria
Generate HTML Presentation - Run conversion script
Validate Output - Verify slides render correctly
Guide PDF Export - Provide clear instructions for manual PDF generation

Customization

Modifying Colors

Edit templates/bac-presentation-template.html and update CSS variables:

:root {
    --bac-blue: #0066FF;
    --bac-navy: #042A4C;
    /* ... other colors */
}

Adjusting Typography

Modify heading styles in the template:

.content-slide h2 {
    font-size: 4rem;  /* Adjust as needed */
    font-weight: 500;
    /* ... */
}

Logo Replacement

Replace the logo file in assets/HOR_Fullcolour_Positive_RGB.png with your preferred variant. The script automatically embeds it as base64.

Troubleshooting

Logo doesn't appear

Verify assets/HOR_Fullcolour_Positive_RGB.png exists
Check browser console for errors

Slides don't separate properly

Ensure --- delimiter is on its own line
Check for blank lines before and after ---

Section slide shows as content slide

Section slides need ONLY H1 (or H1+H2)
Remove any bullet points, paragraphs, or tables

PDF export has no colors

You MUST enable "Background graphics" in print settings
This is the most common issue - brand colors and gradients are background styles
See INSTALLATION.md for browser-specific instructions

Tables look wrong

Ensure markdown tables use proper GFM syntax
Check for mismatched column counts
Consider simplifying complex tables

Fonts don't match brand guidelines exactly

The template uses web-safe fallbacks
For perfect font matching, install Moderat and Suisse Int'l system fonts

Requirements

Node.js: Version 14.0.0 or higher
npm: Included with Node.js (for installing marked.js)
Browser: Chrome, Safari, Firefox, or Edge for PDF export

Examples

The examples/ directory contains a complete reference presentation:

sample-presentation.md - Example markdown demonstrating all slide types and features
sample-presentation-output.html - Generated HTML output (v2.0 with marked.js)

Note: PDF files are not included in the repository. Generate PDFs manually via browser print (Cmd+P/Ctrl+P → Save as PDF) with "Background graphics" enabled.

The sample presentation showcases:

19 slides with mixed content
Professional title slide with logo and metadata
Section dividers with blue gradient backgrounds
Content slides with tables, lists, and formatted text
Proper page breaks and print optimization
Brand-compliant colors and typography

Support

For issues or questions:

Check the troubleshooting section above
Review INSTALLATION.md for PDF generation guide
Review reference/BRAND_GUIDELINES.md for brand specifications
Review reference/CONTENT_DENSITY_GUIDELINES.md for slide content best practices
Examine examples/sample-presentation-output.pdf for reference output quality
Review examples/sample-presentation-output.html for HTML structure

Content Best Practices

For professional, audience-focused presentations, follow these guidelines:

6x6 Rule:

Maximum 6 bullet points per slide
Maximum 6 words per bullet point
Total slide text ≤ 30 words

3-Second Rule:

Audience should grasp slide meaning in 3 seconds or less
If it takes longer, split content across multiple slides

One Idea Per Slide:

Each slide communicates one main message
Action-oriented slide titles stating key takeaways

See reference/CONTENT_DENSITY_GUIDELINES.md for comprehensive rules, examples, and validation checklists.

Version

Version: 2.0.0 Release Date: 2025-10-28 Compatibility: Node.js 14+

What's New in 2.0.0

✅ Marked.js integration: Battle-tested markdown parser for reliability
✅ Fixed definition lists: Proper handling of complex formatting in definition lists
✅ Fixed nested lists: Numbered lists with nested bullets now work correctly
✅ Fixed bold text: Orphaned <strong> tags eliminated across all slide types
✅ Architecture upgrade: AST-based parsing replaces regex approach
✅ One-time setup: Simple npm install in scripts directory

BREAKING CHANGE: Requires npm install before first use. See Quick Start Step 0 above.

What's New in 1.3.4

✅ Subtitle consistency fixed: All section labels now uniform 2.4rem across ALL content slides
✅ HTML structure variation handled: Catches both <p><strong> and direct <strong> patterns
✅ No regression: Inline bold text still inherits parent size (1.6-1.7rem)
✅ Examples: "Legacy Environment:", "Key Challenges:", "Infrastructure Constraints:" all consistent
✅ Production-ready: Complete fix for subtitle sizing without side effects

What's New in 1.3.3

✅ Surgical CSS fix: Inline bold vs section labels properly distinguished
✅ Typography hierarchy restored: H2 (4.0rem) > H3 (2.4rem) > H4 (2.0rem) > Body (1.6rem)
✅ Inline emphasis: Bold text in lists/paragraphs now normal size (inherits parent)
✅ Section labels: Standalone **Label:** remain 2.4rem (same as H3)
✅ Content overflow fixed: Reduced sizes prevent bleeding into footer

What's New in 1.3.1

✅ Subtitle consistency: All subtitles unified at 2.4rem (H3, H4, bold labels)
✅ Cleaner titles: Removed blue underline from content slide titles
✅ Improved spacing: Better breathing room prevents "condensed" appearance
✅ Mono logo: Closing slide uses simpler mono white logo on dark background

What's New in 1.3

✅ Logo visibility: Full opacity (1.0) - clear brand presence, not watermark (120px width)
✅ Typography hierarchy: H3 and H4 increased to 2.4rem for better readability
✅ Section slides: Right-aligned asymmetric layout with left accent bar (was centered)
✅ Closing slide: Dark background with white negative logo matching section aesthetics
✅ Content density guidelines: Comprehensive best practices document (6x6 rule, 3-second rule)
✅ Overflow prevention: Optimized spacing throughout
✅ Professional design: Modern asymmetric layouts, cohesive dark gradients for dividers

Key Design Changes:

Logo: Fully opaque brand mark on all content slides
Section slides: Right-aligned with left gradient accent bar
Closing slide: Navy-to-blue gradient with mono white logo
All subtitles consistent at 2.4rem (H3, H4, bold labels)
Clean titles without decorative underlines

See CHANGELOG.md for detailed release notes and reference/CONTENT_DENSITY_GUIDELINES.md for content best practices.

License

Internal use for Business Cloud Holdings Pty Ltd (trading as BAC) projects.