| name | html-presentation |
| description | Create polished single-file HTML presentations matching the ARIA design system. Trigger on: "create a presentation", "make slides", "build a slide deck", "HTML presentation", or when the user wants to present information visually as a slide deck.
|
ARIA Presentation Skill
Generate single-file HTML presentations that match the ARIA v1.0 design system — warm earth-tone palette, serif display headings, monospace labels, 1920x1080 canvas with JS viewport scaling, section nav legend, and staggered entrance animations.
Workflow
Always follow this two-step intake before generating:
Step 1 — Ask for Context
Ask the user: "What is this presentation about? Give me the content, topic, or talking points."
Collect all the information they want to convey.
Step 2 — Ask for Slide Layout
Never assume layout from context. After receiving context, present a numbered slide list and ask:
"Here's the slide structure I'd suggest — please confirm or adjust:"
1. Title slide (dark) — "Presentation Title"
2. Section divider (accent) — "Section Name"
3. Content slide — two-col layout with cards
...
For each slide, specify:
- Variant: title / dark / accent / content / image
- Layout: single-col / two-col / three-col / cards-grid / custom diagram
- Key content summary
Only generate HTML after the user confirms.
Design System Quick Reference
CSS Variables
--cream: #faf9f5 (light background)
--cream-dark: #f0eee6 (subtle alt background)
--ink: #141413 (dark text / dark bg)
--ink-light: #3d3d3a (body text)
--terracotta: #d97757 (primary accent)
--terracotta-deep: #c6613f (hover/deep accent)
--muted: #75869680 (muted labels)
--sand: #e3dacc (borders, dividers)
--warm-gray: #b0aea5 (secondary text)
--sage: #bcd1ca (green accent)
--blush: #ebcece (pink accent)
--lavender: #cbcadb (purple accent)
--gold: #d4a27f (gold accent)
Fonts
--font-display: 'Cormorant Garamond', Georgia, serif (h1-h3)
--font-body: 'DM Sans', system-ui, sans-serif (body, UI)
--font-mono: 'JetBrains Mono', monospace (labels, code, pills)
Canvas
- Fixed 1920x1080 canvas, scaled to viewport via JS
- Slide padding: 60px top/bottom, 80px left/right
- Body background: #1a1a18 (dark surround)
Typography Scale
| Element | Size | Weight | Extra |
|---|
| h1 | 4.2rem | 400 | letter-spacing: -.02em |
| h2 | 3rem | 400 | letter-spacing: -.01em, mb: .6em |
| h3 | 1.9rem | 400 | mb: .4em |
| p | 1.25rem | 400 | line-height: 1.7, max-width: 720px |
| .label | .98rem | 500 | mono, uppercase, letter-spacing: .12em, terracotta |
| code | 1.25rem | 400 | mono |
Animation Stagger
Elements get classes anim-1 through anim-6 for staggered fadeUp on slide entry:
- anim-1: 0.1s delay
- anim-2: 0.25s delay
- anim-3: 0.4s delay
- anim-4: 0.55s delay
- anim-5: 0.7s delay
- anim-6: 0.85s delay
- anim-fade: fadeIn at 0.3s delay
Slide Variants
1. Title Slide (.slide--title)
Dark background (--ink), centered content, large serif heading (5.8rem, weight 300).
Use for: Opening slide, presentation title.
2. Section Divider (.slide--accent)
Terracotta background, centered, section number label, h1 at 4rem weight 300.
Use for: Chapter breaks between major sections.
3. Content Slide (default .slide)
Cream background. Supports layouts:
- Single column: Label + h2 + body content
- Two column:
.two-col grid (1fr 1fr, gap 60px)
- Three column:
.three-col grid (1fr 1fr 1fr, gap 40px)
- Cards grid: Cards in columns
4. Dark Slide (.slide--dark)
Dark background (--ink), cream text. Same layouts as content.
Use for: Emphasis, technical deep-dives, code-heavy slides.
5. Image Slide (.slide--image)
Full-bleed background image with gradient overlay. Content at bottom-left.
Use for: Screenshots, visual showcases.
6. End/Thank-You Slide
Light background, centered, minimal. Label + large h1 + divider + attribution.
Output Structure
Every generated presentation must follow this exact HTML skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PRESENTATION_TITLE</title>
<!-- Google Fonts: Cormorant Garamond, DM Sans, JetBrains Mono -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
/* Full CSS from css-template.md */
/* Plus any slide-specific CSS */
</style>
</head>
<body>
<div class="deck" id="deck">
<!-- SLIDES HERE -->
<!-- Section Nav Legend -->
<div class="section-nav hidden" id="sectionNav">
<!-- nav items + separators -->
</div>
<!-- Progress bar -->
<div class="progress" id="progress"></div>
<div class="slide-counter" id="counter">1 / N</div>
</div><!-- /deck -->
<script>
/* Navigation engine from js-template.md */
</script>
<script>
/* Diagram editor from diagram-editor.md (if presentation has diagrams) */
</script>
</body>
</html>
Key Rules
-
Always ask for layout — Never assume slide layout from content. Ask explicitly.
-
Concise text — Slide text must be concise. No paragraphs of prose. Use bullet points, short phrases, keywords. If user provides long text, distill it.
-
Base64 images — All images must be base64 encoded inline. Never use external image URLs. If user provides an image file, read it and encode. If no image is available, use CSS-only visuals.
-
Diagrams get the editor — Any slide with a positioned diagram layout must use class="diagram-editable" on the container and class="diagram-el" on positioned children. Include the diagram editor script (from diagram-editor.md). This lets the user press e to enable drag/resize editing and d to end edit and copy CSS positions to clipboard.
-
Section nav reflects structure — The section nav at the top must list all major sections. Update the slideSection array and sectionFirstSlide map in the JS to match actual slide structure.
-
Decorative layers — Every slide should include:
<div class="noise"></div> — subtle texture overlay<div class="grid-lines"></div> — faint 80px grid (optional, good for content slides)- Corner glyphs on select slides (optional decorative touch)
-
Stagger animations — Use anim-1 through anim-6 on slide children for entrance animations. First element is anim-1, second is anim-2, etc.
-
Multi-step slides — For slides that reveal content progressively, add data-steps="N" to the slide div. Use CSS step-1, step-2 classes to show/hide content. The JS navigation engine handles step progression automatically.
-
Responsive scaling — The 1920x1080 canvas scales to fit any viewport via the JS resizeDeck() function. Never use viewport units inside slides. All sizing is in rem/px relative to the 24px root.
-
Single file — Everything must be in one .html file. No external CSS, JS, or assets.
Reference File Guide
Read these files from references/ in this skill folder when you need more detail:
| File | When to Read |
|---|
design-system.md | When you need exact color values, spacing rules, or typography details beyond the quick ref above |
css-template.md | Always read this when generating a presentation — it contains the complete base CSS to paste into <style> |
js-template.md | Always read this when generating — contains the navigation engine JS |
slide-variants.md | When you need exact HTML templates for each slide type |
component-library.md | When the user wants cards, pills, tables, code blocks, terminals, or other UI components |
diagram-editor.md | When the presentation includes any positioned/diagrammatic layouts that should be editable |
animation-patterns.md | When the user wants advanced animations beyond basic fadeUp (e.g., rail draw, runner dots, swimlanes) |
For Simple Presentations (5-10 slides, no diagrams)
Read: css-template.md + js-template.md. The quick ref in this file covers everything else.
For Complex Presentations (diagrams, animations, many components)
Read: css-template.md + js-template.md + component-library.md + diagram-editor.md + animation-patterns.md.
Noto Sans KR
If the presentation contains Korean text, add Noto Sans KR to the Google Fonts link:
family=Noto+Sans+KR:wght@400;500;700
And use font-family: 'Noto Sans KR', sans-serif for Korean text elements.
