presentation

Presentation

Generate self-contained HTML slideshows using a consistent dark-theme design system, then deploy to GitLab Pages.

Design System

Fonts: Inter (body) + JetBrains Mono (code/tags) Theme: Dark (#0f1117 bg), purple accent (#6c63ff), with green/orange/pink/cyan/yellow semantic colors

See @template-reference.md for the full CSS, JS navigation engine, and HTML boilerplate. Use it as the starting point for every presentation.

Available Slide Types

Type	Class/Pattern	Use For
Title	h1 + .subtitle + author line	Opening slide
Bullet list	ul.bullet-list in .stagger	Problem statements, key points
Code/tree	.tree with .dir, .comment, .highlight spans	File structures, code snippets
Card grid	.grid-2 or .grid-3 with .card children	Comparisons, feature overviews
Flow	.flow with .flow-step + .flow-arrow	Sequences, pipelines, workflows
Diagram	.diagram with .diagram-col + .connector	Two-column architecture views
Numbered steps	Numbered circle + .card in flex layout	Step-by-step walkthroughs
Big numbers	.big-number in .card within .grid-3.center	Statistics, impact metrics
Table	table in .table-wrap	Data comparisons
Closing	Centered h1 + .subtitle	Final slide

Animations

• Stagger: Wrap children in .stagger div — items animate in sequentially on slide entry
• Glow: Add .glow to a card for a pulsing accent border (use sparingly for emphasis)
• Slide transitions: Built into the JS engine (translateX with opacity)

Color Semantics

Use color classes to create visual grouping and meaning:

Class	Semantic	Tag variant
.accent	Primary, branding	.tag-purple
.green	Positive, success, new	.tag-green
.orange	Warning, contrast, old	.tag-orange
.pink	Attention, cleanup	.tag-pink
.cyan	Info, tooling	.tag-cyan
.yellow	Highlight, review	.tag-yellow

Slide Structure Rules

1. Every slide is a <div class="slide" id="sN"> — the JS engine handles navigation
2. First slide should always be a title slide with author and date
3. Last slide should be a closing slide with a takeaway message
4. Aim for 8-15 slides — enough to tell the story, short enough to hold attention
5. One idea per slide — if you need two grids, use two slides
6. Use h2 as the slide title for all non-title/closing slides

Deployment

Before deploying, read the presentation config from workspace.json:

• Locate workspace.json by walking up from the current directory until found
• Read presentation.repoPath — this is the presentations repository path
• Read presentation.remote — this is the git remote URL

If either value is missing, tell the user to run /kraft-init to configure the presentation section.

Steps

1. Generate the HTML file in <presentation.repoPath>/public/<slug>.html
2. Update public/index.html — add a link entry for the new presentation
3. Commit and push to main — the .gitlab-ci.yml pages job handles deployment
4. SSL cert is already provisioned; new presentations are live within ~2 minutes of push