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

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-gradients 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 aurora, dot-grid, top label row and the bottom signature bar all span the FULL viewport width (they live on .slide, which is the whole window). Inner padding uses the clamp() values above so content breathes on any size.
• One screen, no scroll — content MUST fit the viewport height. With overflow:hidden + justify-content:center, a slide taller than the window is clipped at BOTH top and bottom and is unreachable. Stay within the bullet/word caps (§Failure modes), lean on the vh terms in the type scale so text shrinks on short viewports, and if a slide would overflow, CUT content — never let it clip.
• Visual signature: a glowing 3px bar along the bottom edge, gradient teal → sky → magenta, with box-shadow:0 0 14px of --teal. This is the deck's signature — present on every slide.
• Top label row (mono, --muted): left = chapter id ("CHAPTER 03"), right = source mark. Cover/closing use "OPENKB" on the left instead.
• Bottom folio row (mono): left = N / Total, right = source short label.

Glow & glass rules (read this — it is the #1 failure mode)

• Glow only the protagonist of a slide: the display title, the one big number, graph nodes. Body copy, labels, tables NEVER glow. A slide where everything glows reads as blurry mush.
• Glass (--glass fill + backdrop-filter:blur(8px) + 1px --line border + subtle inset highlight) is for compare columns and data cards only.
• Gradient text (teal→sky→magenta via background-clip:text) is reserved for cover / chapter / closing big titles and data numbers — not for body.

Composition rules

Use the WHOLE canvas — never a left sliver with a big empty right half. This is the #1 layout failure under fill-viewport. Every slide must span the width via ONE of these (vary them across the deck):

• Split — default for thesis / chapter / closing (and cover when it has a visual). A 2-column grid that fills the slide: .inner{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,96px); align-items:center; width:100%; max-width:min(1600px,92vw); margin:0 auto}. Text in one column; a first-class VISUAL in the other — a big labeled stat, a schema/spec table, stacked labeled cards, or a simple diagram — sized width:100% to fill its column, NEVER a thumbnail in a corner. Build the visual with HTML + CSS (flex/grid); put every label in its own HTML box so boxes auto-wrap and auto-space and never collide. Do NOT put text in <svg><text> — SVG text does not wrap or reflow, so multiple labels in a narrow column overlap into an unreadable smear. Use SVG ONLY for lines / arrows / shapes between the HTML boxes (or skip SVG). Keep it to ≤4 nodes/cards with SHORT labels (node ≤2 words, caption ≤4 words); if labels run long or there are many, use a VERTICAL stack of full-width rows, never a cramped horizontal graph.
• Full-bleed headline — cover, big thesis. The gradient display title spans ~70vw across the upper canvas; subtitle + a thin full-width detail row (kicker / stat strip / row of chips) beneath. The title fills the width, so there is no right-hand void.
• Centered focus — data, quote. .inner{max-width:min(900px,72vw); margin:0 auto; text-align:center} with SYMMETRIC breathing room on both sides (never one-sided dead space).
• compare — .inner{max-width:min(1180px,90vw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,56px)}, with the glowing teal rule between columns.

Per-slide self-test: is there a large empty right half? Then the layout is wrong — widen the headline, add the visual column, or center it. The closing diagram, compare columns, and any flow/graph MUST fill their region, never shrink to a corner. Never size a content box to min-content/fit-content (collapses to a sliver).

• data big number: give it its OWN width — display:inline-block; width:max-content; max-width:92vw; white-space:nowrap; margin:0 auto — so it is NOT clipped by the .inner text column, and (with background-clip:text) the gradient covers the WHOLE string instead of stopping at the column edge and leaving the last char unpainted/smeared under the glow. Size a SINGLE number with clamp(3.5rem,11vh,9rem); a COMPARISON number (A → B, A vs B) is far wider — drop it to clamp(2.4rem,7vh,5.5rem) and keep the whole string (incl. the trailing %) inside 92vw, never overflowing. Body beneath stays centered in the .inner as a readable ~3-line paragraph.
• Cover/chapter titles never wrap an article ("the"/"an"/"to") onto its own line.
• Contrast: body is --ink on --bg; never body copy in --muted/--soft (exception: quote pull-quotes and cover/closing subtitles may be --soft).