stream-deck

Create single-page slide-deck web presentations with inline SVG diagrams.

2|Updated Jul 29, 2025
One-click install
npx skills add https://github.com/kurojs/EnderDots --skill stream-deck
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stream-deck
Source: https://github.com/kurojs/EnderDots/tree/main/.config/opencode/skills/stream-deck
Command: npx skills add https://github.com/kurojs/EnderDots --skill stream-deck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

It solves the problem of quickly creating high-contrast, visually consistent slide-deck web pages without setting up a framework or build pipeline.

Core Features & Use Cases

  • Single-file presentation: Create a slide deck you can open by directly serving index.html, ideal for fast iteration during talks and workshops.
  • Inline SVG diagram system: Produce diagrams as native SVG elements (no external images), keeping everything self-contained and themeable.
  • Gentleman Kanagawa Blur styling: Apply the exact Kanagawa Blur palette and contrast rules for dark-mode readability across text, borders, and accents.
  • Module + rail navigation: Organize slides into modules with a sidebar rail and dot indicators for quick section jumping.

Quick Start

Use the stream-deck skill to scaffold a new deck by editing index.html, then add your first <article class="slide"> with an inline SVG diagram matching the Gentleman Kanagawa Blur palette.

Frequently Asked Questions about stream-deck

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a dark-themed web presentation without a framework build step?▼

You can create a dark-themed web presentation by generating a self-contained index.html file using vanilla HTML, CSS, and JS. This approach scaffolds a single-page slide deck with the Gentleman Kanagawa Blur palette, requiring no framework build pipeline.

How do I add inline SVG diagrams to a slide deck website?▼

To add inline SVG diagrams to a slide deck website, you insert native SVG elements directly within an article class slide in your index.html. This keeps the presentation self-contained and allows the diagrams to match the Kanagawa Blur theme.

Can I use keyboard navigation for a single-page slide deck website?▼

Yes, you can use keyboard navigation for a single-page slide deck website. The generated presentation includes keyboard-friendly traversal and a sidebar rail with dot indicators, allowing quick jumping between modules and slides.

What is the best way to build streaming overlays with strict palette and contrast compliance?▼

The best way to build streaming overlays with strict palette compliance is to use a tool that applies the Gentleman Kanagawa Blur theme automatically. This ensures high-contrast readability across text, borders, and accents without manual color tweaking.

Do I need any external image files for SVG diagrams in a dark-themed slide deck?▼

No, you do not need external image files for SVG diagrams in a dark-themed slide deck. The system produces diagrams as native inline SVG elements, keeping everything self-contained and themeable within the single index.html file.

What kind of presentations are suitable for a vanilla HTML CSS JS slide deck with sidebar navigation?▼

A vanilla HTML CSS JS slide deck with sidebar navigation is suitable for streaming overlays, course materials, talk slide websites, and dark-themed diagram-heavy decks. It is ideal for fast iteration during workshops and talks.