html-presentation
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.
ソース情報
- リポジトリ
- krafton-ai/KIRA
- ソースの最終更新活動
- 2026年3月20日 08:22
- 検出された SKILL.md の言語
- 英語
- スター
- 930
- フォーク
- 105
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
8 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- 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
1. **Always ask for layout** — Never assume slide layout from content. Ask explicitly.
2. **Concise text** — Slide text must be concise. No paragraphs of prose. Use bullet points, short phrases, keywords. If user provides long text, distill it.
3. **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.
4. **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.
5. **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.
6. **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)
7. **Stagger animations** — Use `anim-1` through `anim-6` on slide children for entrance animations. First element is `anim-1`, second is `anim-2`, etc.
8. **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.
9. **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.
10. **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.
GitHubで見る