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.

1. Open the generated HTML file in your browser
2. Press Cmd+P (Mac) or Ctrl+P (Windows)
3. Select "Save as PDF"
4. CRITICAL: Enable "Background graphics" in print settings
5. Set paper size to landscape (preferably custom 1920×1080px)
6. Turn off "Headers and footers"
7. 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

or

# 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:

1. Analyze Presentation Structure - Understand content and slide types
2. Evaluate Brand Compliance - Define quality criteria
3. Generate HTML Presentation - Run conversion script
4. Validate Output - Verify slides render correctly
5. 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:

1. Check the troubleshooting section above
2. Review INSTALLATION.md for PDF generation guide
3. Review reference/BRAND_GUIDELINES.md for brand specifications
4. Review reference/CONTENT_DENSITY_GUIDELINES.md for slide content best practices
5. Examine examples/sample-presentation-output.pdf for reference output quality
6. 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

Copyright © 2025 Business Cloud Holdings Pty Ltd. All rights reserved.

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