FFHS Lecture Slides

Create lecture presentations for FFHS (Fernfachhochschule Schweiz) in two formats:

reveal.js (Default) - Web-based HTML presentations
PowerPoint - Traditional PPTX files with FFHS branding

When to Use

Use this skill when:

User requests a presentation for PVA (Präsenzveranstaltung) sessions
Creating lecture slides for the Java Fundamentals (JaF) course
User asks for teaching materials in FFHS style
User mentions "reveal.js", "slides", or "presentation"

Output Formats

| Format | File Type | Output Directory | Advantages | |--------|-----------|------------------|------------| | reveal.js | HTML/Markdown | docs/slides/ | Web-based, Mermaid support, code highlighting | | PowerPoint | PPTX | docs/slides/ | Offline, FFHS template, easy sharing |

Format 1: reveal.js (Default)

File Structure

docs/slides/
├── pva-01/
│   ├── index.html      # Main presentation
│   └── slides.md       # Markdown content (optional)
├── pva-02/
│   └── index.html
└── assets/
    ├── ffhs-theme.css  # FFHS styling
    └── ffhs-logo.svg   # Logo

HTML Template

Create a reveal.js presentation using this template:

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PVA 1 - Grundlagen und Strukturen</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reset.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/white.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/github.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
    <style>
        /* FFHS Corporate Design - Red/Violet */
        :root {
            --ffhs-red: #d50006;
            --ffhs-red-light: #e63946;
            --ffhs-violet: #51247a;
            --ffhs-violet-light: #9b59b6;
            --ffhs-violet-transparent: rgba(81, 36, 122, 0.1);
            --ffhs-text: #181716;
            --ffhs-gray: #666666;
            --ffhs-light-gray: #f5f5f5;
        }
        .reveal h1, .reveal h2 { color: var(--ffhs-red); font-weight: 600; }
        .reveal h3 { color: var(--ffhs-violet); font-weight: 600; }
        .reveal { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; color: var(--ffhs-text); }
        .reveal .slides section { text-align: left; }
        .reveal pre { border-left: 3px solid var(--ffhs-red); background: var(--ffhs-light-gray); border-radius: 4px; }
        .reveal pre code { font-family: 'JetBrains Mono', monospace; font-size: 0.8em; background: var(--ffhs-light-gray) !important; }
        .reveal pre code tr, .reveal pre code .hljs-ln-line { background: transparent !important; }
        .reveal ul { margin-left: 1em; }
        .reveal a { color: var(--ffhs-violet); }
        .reveal a:hover { color: var(--ffhs-red); }
        .reveal blockquote { background: var(--ffhs-violet-transparent); border-left: 4px solid var(--ffhs-violet); }
        .reveal table th { background: linear-gradient(90deg, var(--ffhs-red) 0%, var(--ffhs-violet) 100%); color: white; }
        .reveal .title-slide h1 { font-size: 2.5em; text-align: center; }
        .reveal .title-slide h2 { color: var(--ffhs-violet); text-align: center; }
        .reveal .title-slide p { text-align: center; color: var(--ffhs-gray); }
        .ffhs-footer {
            position: absolute; bottom: 1em; left: 1em;
            font-size: 0.5em; color: var(--ffhs-gray);
        }
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <!-- Title slide -->
            <section class="title-slide">
                <h1>PVA 1</h1>
                <h2>Grundlagen und Strukturen</h2>
                <p>Java Fundamentals (JaF) - FFHS</p>
            </section>

            <!-- Learning objectives -->
            <section>
                <h2>Lernziele</h2>
                <ul>
                    <li>Von-Neumann-Architektur erklären</li>
                    <li>Java-Entwicklungsumgebung aufsetzen</li>
                    <li>Erstes Java-Programm schreiben</li>
                    <li>Klassen und Objekte verstehen</li>
                </ul>
            </section>

            <!-- Code example -->
            <section>
                <h2>Erstes Java-Programm</h2>
                <pre><code class="language-java" data-trim>
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, FFHS!");
    }
}
                </code></pre>
            </section>

            <!-- Mermaid diagram -->
            <section>
                <h2>UML-Klassendiagramm</h2>
                <div class="mermaid">
classDiagram
    class Hund {
        int groesse
        String name
        bellen()
    }
                </div>
            </section>
        </div>
        <div class="ffhs-footer">FFHS - Java Fundamentals</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/highlight/highlight.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/markdown/markdown.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true, theme: 'default' });
        Reveal.initialize({
            hash: true,
            slideNumber: true,
            plugins: [ RevealHighlight, RevealMarkdown ]
        });
    </script>
</body>
</html>

Slide Types

| Type | HTML Structure | |------|---------------| | Title | <section class="title-slide"><h1>...</h1></section> | | Content | <section><h2>Title</h2><ul>...</ul></section> | | Code | <section><h2>...</h2><pre><code>...</code></pre></section> | | Diagram | <section><h2>...</h2><div class="mermaid">...</div></section> | | Image | <section><h2>...</h2><img src="..."></section> | | Two Columns | <section><div style="display:flex">...</div></section> |

Vertical Slides (Sub-slides)

<section>
    <section><h2>Main slide</h2></section>
    <section><h3>Sub-slide 1</h3></section>
    <section><h3>Sub-slide 2</h3></section>
</section>

Presenter Mode

Press S to open speaker notes:

<section>
    <h2>Slide Title</h2>
    <aside class="notes">
        Notes for the instructor, not visible to students.
    </aside>
</section>

Format 2: PowerPoint (PPTX)

Template

The FFHS template is located at assets/ffhs-template.pptx (relative to this skill directory). When installed as a plugin, the resolved path is ${CLAUDE_PLUGIN_ROOT}/skills/ffhs-lecture-slides/assets/ffhs-template.pptx.

Available Layouts

| Index | Layout | Usage | |-------|--------|-------| | 0 | FFHS Titelfolie_einfach 4:3 | Title slide | | 1 | FFHS Titel und Inhalt 4:3 | Standard content | | 2 | FFHS Nummerierung 4:3 | Numbered list | | 4 | FFHS Zwei Inhalte 4:3 | Two columns | | 5 | FFHS Drei Inhalte 4:3 | Three columns | | 6 | FFHS Vergleich 4:3 | Comparison slide | | 9 | FFHS Bild mit Überschrift 4:3 | Image with title | | 10 | FFHS Abschlussfolie 4:3 | Closing slide |

Python Script for PPTX Generation

from pathlib import Path
from pptx import Presentation

# Load template (adjust path to your project layout)
template_path = 'assets/ffhs-template.pptx'
prs = Presentation(template_path)

# Remove example slides
while len(prs.slides) > 0:
    rId = prs.slides._sldIdLst[0].rId
    prs.part.drop_rel(rId)
    del prs.slides._sldIdLst[0]

# Title slide
slide = prs.slides.add_slide(prs.slide_layouts[0])
slide.shapes.title.text = "PVA 1 - Grundlagen"

# Content slide
slide = prs.slides.add_slide(prs.slide_layouts[1])
slide.shapes.title.text = "Lernziele"
for shape in slide.shapes:
    if shape.has_text_frame and shape != slide.shapes.title:
        tf = shape.text_frame
        tf.clear()
        p = tf.paragraphs[0]
        p.text = "Von-Neumann-Architektur erklären"
        p = tf.add_paragraph()
        p.text = "Java-Programm schreiben"
        break

# Save
Path('docs/slides').mkdir(parents=True, exist_ok=True)
prs.save('docs/slides/pva-01-grundlagen.pptx')

PVA Content Outlines

PVA 1 - Foundations and Structures

Slide structure:

Title slide: "PVA 1 - Grundlagen und Strukturen"
Agenda / Learning objectives
Von Neumann architecture (diagram)
Development environment
First Java program (code)
Variables and data types
Control structures (if/else)
Loops (for/while)
Classes and objects
UML class diagram
Exercise / Summary

PVA 2 - Inheritance and Polymorphism

Slide structure:

Title slide: "PVA 2 - Vererbung und Polymorphie"
Agenda / Learning objectives
Review: Classes
Introduction to inheritance (UML)
extends keyword
Method overriding (@Override)
Abstract classes
Polymorphism explained
IS-A vs HAS-A
Shapes example (code + UML)
Exercise / Summary

Quick Start

Create reveal.js presentation (recommended)

mkdir -p docs/slides/pva-01
# Then create index.html using the template above

Create PowerPoint presentation

pip install python-pptx
python scripts/create_pva_slides.py

View presentation (reveal.js)

# Using Python server
cd docs/slides/pva-01
python -m http.server 8000
# Open http://localhost:8000

Keyboard Shortcuts (reveal.js)

| Key | Function | |-----|----------| | → / ↓ | Next slide | | ← / ↑ | Previous slide | | Esc / O | Overview | | S | Speaker notes | | F | Fullscreen | | B | Black screen | | ? | Help |

FFHS Lecture Slides

Create lecture presentations for FFHS (Fernfachhochschule Schweiz) in two formats:

reveal.js (Default) - Web-based HTML presentations
PowerPoint - Traditional PPTX files with FFHS branding

When to Use

Use this skill when:

User requests a presentation for PVA (Präsenzveranstaltung) sessions
Creating lecture slides for the Java Fundamentals (JaF) course
User asks for teaching materials in FFHS style
User mentions "reveal.js", "slides", or "presentation"

Output Formats

Format 1: reveal.js (Default)

File Structure

docs/slides/
├── pva-01/
│   ├── index.html      # Main presentation
│   └── slides.md       # Markdown content (optional)
├── pva-02/
│   └── index.html
└── assets/
    ├── ffhs-theme.css  # FFHS styling
    └── ffhs-logo.svg   # Logo

HTML Template

Create a reveal.js presentation using this template:

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PVA 1 - Grundlagen und Strukturen</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reset.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/white.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/github.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
    <style>
        /* FFHS Corporate Design - Red/Violet */
        :root {
            --ffhs-red: #d50006;
            --ffhs-red-light: #e63946;
            --ffhs-violet: #51247a;
            --ffhs-violet-light: #9b59b6;
            --ffhs-violet-transparent: rgba(81, 36, 122, 0.1);
            --ffhs-text: #181716;
            --ffhs-gray: #666666;
            --ffhs-light-gray: #f5f5f5;
        }
        .reveal h1, .reveal h2 { color: var(--ffhs-red); font-weight: 600; }
        .reveal h3 { color: var(--ffhs-violet); font-weight: 600; }
        .reveal { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; color: var(--ffhs-text); }
        .reveal .slides section { text-align: left; }
        .reveal pre { border-left: 3px solid var(--ffhs-red); background: var(--ffhs-light-gray); border-radius: 4px; }
        .reveal pre code { font-family: 'JetBrains Mono', monospace; font-size: 0.8em; background: var(--ffhs-light-gray) !important; }
        .reveal pre code tr, .reveal pre code .hljs-ln-line { background: transparent !important; }
        .reveal ul { margin-left: 1em; }
        .reveal a { color: var(--ffhs-violet); }
        .reveal a:hover { color: var(--ffhs-red); }
        .reveal blockquote { background: var(--ffhs-violet-transparent); border-left: 4px solid var(--ffhs-violet); }
        .reveal table th { background: linear-gradient(90deg, var(--ffhs-red) 0%, var(--ffhs-violet) 100%); color: white; }
        .reveal .title-slide h1 { font-size: 2.5em; text-align: center; }
        .reveal .title-slide h2 { color: var(--ffhs-violet); text-align: center; }
        .reveal .title-slide p { text-align: center; color: var(--ffhs-gray); }
        .ffhs-footer {
            position: absolute; bottom: 1em; left: 1em;
            font-size: 0.5em; color: var(--ffhs-gray);
        }
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <!-- Title slide -->
            <section class="title-slide">
                <h1>PVA 1</h1>
                <h2>Grundlagen und Strukturen</h2>
                <p>Java Fundamentals (JaF) - FFHS</p>
            </section>

            <!-- Learning objectives -->
            <section>
                <h2>Lernziele</h2>
                <ul>
                    <li>Von-Neumann-Architektur erklären</li>
                    <li>Java-Entwicklungsumgebung aufsetzen</li>
                    <li>Erstes Java-Programm schreiben</li>
                    <li>Klassen und Objekte verstehen</li>
                </ul>
            </section>

            <!-- Code example -->
            <section>
                <h2>Erstes Java-Programm</h2>
                <pre><code class="language-java" data-trim>
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, FFHS!");
    }
}
                </code></pre>
            </section>

            <!-- Mermaid diagram -->
            <section>
                <h2>UML-Klassendiagramm</h2>
                <div class="mermaid">
classDiagram
    class Hund {
        int groesse
        String name
        bellen()
    }
                </div>
            </section>
        </div>
        <div class="ffhs-footer">FFHS - Java Fundamentals</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/highlight/highlight.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/markdown/markdown.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true, theme: 'default' });
        Reveal.initialize({
            hash: true,
            slideNumber: true,
            plugins: [ RevealHighlight, RevealMarkdown ]
        });
    </script>
</body>
</html>

Slide Types

Vertical Slides (Sub-slides)

<section>
    <section><h2>Main slide</h2></section>
    <section><h3>Sub-slide 1</h3></section>
    <section><h3>Sub-slide 2</h3></section>
</section>

Presenter Mode

Press S to open speaker notes:

<section>
    <h2>Slide Title</h2>
    <aside class="notes">
        Notes for the instructor, not visible to students.
    </aside>
</section>

Format 2: PowerPoint (PPTX)

Template

Available Layouts

Python Script for PPTX Generation

from pathlib import Path
from pptx import Presentation

# Load template (adjust path to your project layout)
template_path = 'assets/ffhs-template.pptx'
prs = Presentation(template_path)

# Remove example slides
while len(prs.slides) > 0:
    rId = prs.slides._sldIdLst[0].rId
    prs.part.drop_rel(rId)
    del prs.slides._sldIdLst[0]

# Title slide
slide = prs.slides.add_slide(prs.slide_layouts[0])
slide.shapes.title.text = "PVA 1 - Grundlagen"

# Content slide
slide = prs.slides.add_slide(prs.slide_layouts[1])
slide.shapes.title.text = "Lernziele"
for shape in slide.shapes:
    if shape.has_text_frame and shape != slide.shapes.title:
        tf = shape.text_frame
        tf.clear()
        p = tf.paragraphs[0]
        p.text = "Von-Neumann-Architektur erklären"
        p = tf.add_paragraph()
        p.text = "Java-Programm schreiben"
        break

# Save
Path('docs/slides').mkdir(parents=True, exist_ok=True)
prs.save('docs/slides/pva-01-grundlagen.pptx')

PVA Content Outlines

PVA 1 - Foundations and Structures

Slide structure:

Title slide: "PVA 1 - Grundlagen und Strukturen"
Agenda / Learning objectives
Von Neumann architecture (diagram)
Development environment
First Java program (code)
Variables and data types
Control structures (if/else)
Loops (for/while)
Classes and objects
UML class diagram
Exercise / Summary

PVA 2 - Inheritance and Polymorphism

Slide structure:

Title slide: "PVA 2 - Vererbung und Polymorphie"
Agenda / Learning objectives
Review: Classes
Introduction to inheritance (UML)
extends keyword
Method overriding (@Override)
Abstract classes
Polymorphism explained
IS-A vs HAS-A
Shapes example (code + UML)
Exercise / Summary

Quick Start

Create reveal.js presentation (recommended)

mkdir -p docs/slides/pva-01
# Then create index.html using the template above

Create PowerPoint presentation

pip install python-pptx
python scripts/create_pva_slides.py

View presentation (reveal.js)

# Using Python server
cd docs/slides/pva-01
python -m http.server 8000
# Open http://localhost:8000

Adoption

talent-factory/ffhs-lecture-slides

$ install --global

Security Scan Results

SKILL.md

FFHS Lecture Slides

When to Use

Output Formats

Format 1: reveal.js (Default)

File Structure

HTML Template

Slide Types

Vertical Slides (Sub-slides)

Presenter Mode

Format 2: PowerPoint (PPTX)

Template

Available Layouts

Python Script for PPTX Generation

PVA Content Outlines

PVA 1 - Foundations and Structures

PVA 2 - Inheritance and Polymorphism

Quick Start

Create reveal.js presentation (recommended)

Create PowerPoint presentation

View presentation (reveal.js)

Keyboard Shortcuts (reveal.js)

Related Skills

talent-factory/document-handoff

talent-factory/weekly-review

talent-factory/today

talent-factory/project-pulse

talent-factory/ffhs-lecture-slides

$ install --global

Security Scan Results

SKILL.md

FFHS Lecture Slides

When to Use

Output Formats

Format 1: reveal.js (Default)

File Structure

HTML Template

Slide Types

Vertical Slides (Sub-slides)

Presenter Mode

Format 2: PowerPoint (PPTX)

Template

Available Layouts

Python Script for PPTX Generation

PVA Content Outlines

PVA 1 - Foundations and Structures

PVA 2 - Inheritance and Polymorphism

Quick Start

Create reveal.js presentation (recommended)

Create PowerPoint presentation

View presentation (reveal.js)

Keyboard Shortcuts (reveal.js)

Related Skills

talent-factory/document-handoff

talent-factory/weekly-review

talent-factory/today

talent-factory/project-pulse