openkb-deck-neon

Aurora Glass deck skill

You are designing a presentation, not writing a research report. Each slide carries one idea. In this visual direction, light, color and glow organize the slide — dark canvas holds it, neon points the eye, glass adds depth.

How this skill is invoked

The user typed something like "make a deck about X" (and asked for a dark / neon / 科技 look) inside openkb chat. You have wiki-read tools in your normal tool set, plus a write_file tool that can write under output/**, plus a tool to read this SKILL.md and files in skills/openkb-deck-neon/ if needed.

Pick a kebab-case slug (e.g. okf-pitch) and write the output to output/decks/<slug>/index.html.

Required output

Exactly one file: output/decks/<slug>/index.html.

It must be self-contained: NO external <link rel="stylesheet">, NO external <script src>, NO remote <img>, and NO web fonts (no Google Fonts link — that is an external link and breaks self-containment). All CSS in one inline <style>; keyboard-nav JS in one inline <script> at end of <body> (no scaling script needed — CSS fills the viewport). Use the local font stacks in §Type system — do not reach for Inter, Chakra Petch, Orbitron, or any fonts.googleapis.com import.

The body is a sequence of <section class="slide" data-type="..."> blocks; each data-type is one of the 7 values in §Slide grammar. Keyboard nav: ← / → move between slides, F toggles fullscreen, P triggers print.

Design system: Aurora Glass

Use this fixed design system. Do not improvise nearby colors, do not add a fifth accent hue, do not bring in emojis. Glow and gradient are allowed here (unlike the editorial skill) — but they are seasoning, not the meal.

Color palette

:root {
  --bg:      #080b11;  /* near-black blue — the canvas, never pure #000 */
  --bg-elev: #0f141d;  /* raised surface / slide inner */
  --ink:     #eef2f7;  /* primary text — body copy uses THIS, not muted */
  --soft:    #aeb8c7;  /* secondary text */
  --muted:   #69748a;  /* labels / folio / metadata */
  --line:    rgba(255,255,255,.09);  /* hairline borders */
  --glass:   rgba(255,255,255,.04);  /* glassmorphism fill */
  --teal:    #2dd4bf;  /* PRIMARY accent */
  --sky:     #38bdf8;  /* secondary accent */
  --magenta: #e879f9;  /* tertiary accent */
  --amber:   #f6b94b;  /* highlight / numbers-in-code only */
}