rich-slides

Files (1)

• SKILL.md

SKILL.md (first lines)

# Rich Slides — MD to Browser-Ready 16:9 HTML Slides

> **IMPORTANT**: This is the ONLY correct slide generation method.
> `openSlideViewer()` in `src/slide-viewer.js` is DEPRECATED legacy code
> (kept solely as a network-error fallback). All new slide work MUST use
> this rich-slides pipeline: `generate-rich-slides.py` → self-contained HTML
> → `openRichSlideViewer()` (iframe display). Do NOT use or extend the old
> Markdown direct-rendering approach.

## What This Skill Does

Transforms Markdown content into a self-contained, visually polished HTML file that
displays as a 16:9 slide deck in the browser. The output is a single `.html` file with
all CSS and JS inlined — no external dependencies, ready to deploy to any static site.

## Design Philosophy

The visual language is a dark glassmorphism theme inspired by creation-space's existing
design system. Think: deep navy/charcoal backgrounds, frosted glass cards, subtle gradient
accents (blue → violet → green), and generous typography. The goal is a slide deck that
looks like it was designed by a professional, not like markdown rendered in a box.

## Workflow

### Step 1: Understand the Input

The user provides content in one of these forms:

1. **Markdown with `---` slide separators** — Each `---` on its own line starts a new slide
2. **Plain text or bullet points** — You structure it into slides
3. **A file path to an existing .md** — Read and convert
4. **A topic** — You write the content AND create the slides

If the input is a topic, draft the slide content first and confirm with the user before
generating the HTML.

### Step 2: Plan the Slide Structure

Before generating HTML, classify each slide into a layout type:

| Layout | When to Use | Visual Treatment |
|--------|------------|-----------------|
| `title` | First slide, section dividers | Centered, large heading, gradient accent line, subtitle in muted color |
| `section` | Major topic transition | Large heading with animated gradient underline |
| `content` | Text + bullet points | Left-aligned body, glassmorphism card for key points |
| `visual` | Image/SVG-heavy | Full-bleed media with minimal text overlay |
| `split` | Comparison, before/after | Two-column layout with glass divider |
| `data` | Charts, tables, metrics | Card grid or highlighted metric boxes |
| `quote` | Key insight, citation | Large centered quote with accent border, attribution |
| `conclusion` | Final slide | Gradient accent, summary points with green checkmarks |

### Step 3: Generate the HTML

Run the generation script:

```bash
python transform/scripts/generate-rich-slides.py \
  --input input.md \
  --output output.html \
  --title "Presentation Title" \
  --lang ja
```

If the script is not available or you need custom layouts, generate the HTML directly
following the design reference in `transform/domains/reader-rules/rich-slides-design-spec.md`.

### Key HTML Requirements

1. **Self-contained**: All CSS and JS must be inlined in the single HTML file
2. **16:9 aspect ratio**: Use `aspect-ratio: 16/9` with responsive scaling
3. **Keyboard navigation**: Arrow keys, Space, Escape (to exit fullscreen)
4. **Slide transitions**: Smooth opacity + subtle transform animation (200-300ms)
5. **Progress indicator**: Thin gradient bar at bottom + slide counter
6. **Print-friendly**: `@media print` styles that output one slide per page
7. **Touch support**: Swipe gestures for mobile/tablet viewing
8. **Fullscreen**: F key or button to enter native fullscreen

### Design Tokens (from creation-space)

```css
/* Backgrounds */
--bg-deep: #0a0e17;
--bg-elevated: #1e293b;
--bg-card: rgba(17, 24, 39, 0.74);

/* Text */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;

/* Accents */
--accent-blue: #60a5fa;
--accent-violet: #a78bfa;
--accent-green: #34d399;
--accent-amber: #fbbf24;

/* 5-Stage palette (for creation-space specific content) */
--stage-field: #8B8682;    /* 場 */
--stage-wave: #5B8DB8;     /* 波 */
--stage-edge: #D4A857;     /* 縁 */
--stage-vortex: #C45B4D;   /* 渦 */
--stage-bundle: #5B8B6A;   /* 束 */

/* Glass effect */
--glass-bg: rgba(17, 24, 39, 0.74);
--glass-border: rgba(148, 163, 184, 0.14);
--glass-blur: 16px;

/* Typography */
--font-heading: "Inter", "Noto Sans JP", system-ui, sans-serif;
--font-body: "Inter", "Noto Sans JP", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;

/* Spacing & Radius */
--radius: 16px;
--radius-sm: 8px;
```

### Visual Effects That Make Slides Rich

From uminomae/creation-space, MIT.

More from uminomae/creation-space