// 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.
| 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. |
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.
Always follow this two-step intake before generating:
Ask the user: "What is this presentation about? Give me the content, topic, or talking points." Collect all the information they want to convey.
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:
Only generate HTML after the user confirms.
--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)
--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)
| 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 |
Elements get classes anim-1 through anim-6 for staggered fadeUp on slide entry:
.slide--title)Dark background (--ink), centered content, large serif heading (5.8rem, weight 300).
Use for: Opening slide, presentation title.
.slide--accent)Terracotta background, centered, section number label, h1 at 4rem weight 300. Use for: Chapter breaks between major sections.
.slide)Cream background. Supports layouts:
.two-col grid (1fr 1fr, gap 60px).three-col grid (1fr 1fr 1fr, gap 40px).slide--dark)Dark background (--ink), cream text. Same layouts as content.
Use for: Emphasis, technical deep-dives, code-heavy slides.
.slide--image)Full-bleed background image with gradient overlay. Content at bottom-left. Use for: Screenshots, visual showcases.
Light background, centered, minimal. Label + large h1 + divider + attribution.
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>
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)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.
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) |
Read: css-template.md + js-template.md. The quick ref in this file covers everything else.
Read: css-template.md + js-template.md + component-library.md + diagram-editor.md + animation-patterns.md.
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.
Make channel-facing speak output sound natural and easy to read. Trigger on: preparing a Slack, Telegram, or Discord reply with speak; rewriting markdown-heavy or AI-sounding prose before delivery; or when a response feels too formal, too structured, or too obviously model-written for a chat conversation.
Practical browser automation guidance for KiraClaw browser MCP tasks. Trigger on: opening a downloaded HTML file, testing a localhost app, validating a web flow in the browser, interacting with a browser game, or when Playwright/browser actions keep timing out or failing.
Create or refine KiraClaw/Codex skills as concise SKILL.md packages. Trigger on: "make a skill", "create a skill", "update this skill", "seed skill", "default skill", or when the user wants reusable agent workflow instructions instead of one-off prompt text.
Use when the user asks how to connect or configure Slack, Telegram, or Discord in KiraClaw, including which token or settings field to fill in, what platform-side setup is required, and when an engine restart is needed.
Read a Confluence page and recursively explore its child pages up to 3 levels deep. Use when users want to comprehensively read a Confluence page tree, understand hierarchical documentation, or analyze content across parent and child pages.
Extract actionable tasks assigned to the user from email text. Filters out informational emails (announcements, newsletters, ads, automated reports) and only processes emails with clear action requests. Handles group emails by identifying user-specific assignments.