/openkb-deck-neon

name: openkb-deck-neon
description: |
  Use when the user asks the openkb chat to make a deck / slide presentation /
  PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a
  dark, high-tech, neon / glow / glassmorphism look (赛博 / 科技风 / 暗色 /
  霓虹 / 炫酷). Generates a polished single-file HTML deck in the Aurora Glass
  visual direction (near-black background, teal/sky/magenta/amber neon accents,
  glassmorphism panels, aurora gradient atmosphere) — opened in a browser,
  full-screened, shared. For the warm, printed, serif look use
  openkb-deck-editorial instead. Does NOT apply to generating skills
  (`openkb skill new`), research reports, or scrolling long-form documents.
od:
  mode: deck
  output_path_template: "output/decks/{slug}/index.html"
  deck_grammar:
    kind_attr: data-type
    required: [cover, closing]
    allowed: [cover, chapter, thesis, quote, compare, data, closing]
    min_distinct: 4
    max_consecutive_same: 2

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 */
}

These 4 neon hues + the neutrals are the **only** colors. No purple-on-white gradients, no rainbow, no per-slide recoloring.

Type system (local fonts only — NO web fonts)

--font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "PingFang SC", "Microsoft YaHei", sans-serif; /* heavy weights */
--font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
                monospace;  /* labels, numbers, code, kickers */

Display titles use `--font-display` at weight 800 with `letter-spacing:-.02em`. The tech character here comes from **mono for every label / number / kicker / code**, not from a fancy downloaded display face.

Type scale — use `clamp()` so type scales with the viewport (fixed px look tiny on a 2560px screen). vw drives the middle value; the rem caps keep it sane:

• `--type-display`: clamp(2.8rem, 5.2vw, 5.5rem) / 1.05 — cover/chapter titles
• `--type-title`: clamp(1.9rem, 3.2vw, 3rem) / 1.12 — normal slide titles
• `--type-body`: clamp(1.05rem, 1.4vw, 1.4rem) / 1.6 — body copy (var(--ink))
• `--type-quote`: clamp(1.6rem, 2.6vw, 2.2rem) / 1.35 — pull quotes
• `--type-label`: size `clamp(.66rem,.8vw,.8rem)`, `letter-spacing:.22em`, uppercase, mono — label tracks

Atmosphere (fixed background layers on every slide)

1. **Aurora**: 3–4 blurred `radial-gradient`s in teal / sky / magenta / amber, low alpha (.10–.16), `filter: blur(14px)`. Positioned off the title. 2. **Grain**: an inline SVG `feTurbulence` noise data-URI at `opacity:.04` (data-URI is inline, NOT an external image — allowed). 3. Optional faint dot-grid via `radial-gradient` background, alpha < .06.

These three layers are what stop the dark background from looking flat/cheap.

Frame (every slide)

• **Every slide fills the entire viewport — edge to edge, no letterbox, no

fixed card.** The slide IS the window; design for a wide canvas and let flexbox + `clamp()` sizing adapt to any window ratio:

  html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
  .slide{position:fixed;inset:0;display:none;flex-direction:column;
    justify-content:center;
    padding:clamp(40px,5vh,72px) clamp(56px,5vw,128px)}
  .slide.active{display:flex}

No scaling/transform tricks — CSS alone fills the viewport. On an ultrawide window the slide is simply wider than 16:9; content reflows and the dark background + aurora bleed to all four edges — never a centered card with dark side-bands. One slide visible at a time; ← / → swap the active slide, `F` fullscreen, `P` print (they do not scroll).

• The