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.