/sunum-html — Single-File HTML Presentation STYLE KIT (token-themed, 3 themes)

Outputs the given content as a presentation/pitch deck in a single self-contained .html file with a fixed visual language. It opens in the browser, you navigate with arrow keys, switch themes with T, go full screen with F, and toggle pen/drawing mode with D (draw over the slide with the mouse in any color during the presentation). The stage is fixed at 1280×720 and auto-scales to the viewport (16:9).

This skill provides ONLY the VISUAL STYLE — token/theme + primitive CSS class palette + nav/drawing/scale engine. Content and slide structure do NOT belong to this skill: the "core layers" of the presentation (how many slides, what narrative, which layout) are designed from scratch for each presentation by a separate content-architect agent; this skill dresses that structure in style. There is NO fixed slide menu / one-size-fits-all deck.

• reference/sablon.html = empty, content-independent shell (all CSS + engine + empty #stage). The content agent fills the slides in here.
• reference/ornekler.html = live gallery where the primitives are used (reference, not a menu).

The sibling skill sunum-remotion is the animated version of the same language; for AI line-art use sunum-gorsel-uretici.

When to use

Trigger phrases:

• "make a presentation", "generate slides", "create a pitch deck", "turn this into a presentation"
• "a presentation in this style / in agent style / in the huge if true theme"
• "make a deck of these points", "HTML presentation", "single-file presentation"
• when you want to package an agent/council output as a showable deck for the user

NOT suitable for:

• If animated/video output is wanted → sunum-remotion (scene elements appear one by one, orbiting around a sphere).
• A long plain-text report → report-writer (this skill is for low-text / high-visual decks).

Three themes (token swap — single source)

Theme = a swap of the :root (Agent Dark) + [data-theme="hit"] + [data-theme="tech"] token blocks. The T key cycles through the three (THEME_CYCLE); the markup never changes. A new theme = a new token set.

Token	Agent Dark (default)	Huge If True (hit)	Tech Blue (tech)
--bg-0/--bg-1	#0a0a0b/#141416	#2d5bff/#2a54ee	#060912/#0b1322
--ink	#ffffff	#ffffff	#ffffff
--accent	#e8743b amber	#c2f03a lime	#5aa9ff cyan
--accent-2	#e8743b	#ffffff	#ffffff
signature	calm glow	chunky offset shadow + 900	white text + strong cyan glow + monospace

HIT validation: brand identity = electric blue + neon lime + dark teal offset shadow (the user's banner = ground truth). Avoids Cleo's sterile gray/black + single-neon.

Tech Blue (2026-06-23): dark navy background + white text + strong cyan glow (text-shadow:0 0 42px rgba(90,169,255,.5)) + monospace for terminal/prompt. An "Apple-keynote × terminal" language; the natural home of the checklist + prompt archetypes.

Primitive / block class palette (free composition)

The blocks below are a palette (not a menu). The content agent builds original slides by freely combining these — or smaller atoms (glow heading .headline+.hl, .eyebrow, .orb, .tag, .card-like, dotted grid). Live examples: ornekler.html.

Archetype	CSS root	What for	Content shape
Statement	.stmt + .eyebrow/.headline/.body/.spectrum	A single strong proposition, manifesto, "single metric"	eyebrow + 2-color giant heading + body (+ opt. spectrum axis)
Hub-spoke	.hub + .orb + .hex	One central concept + 4-6 satellite components	center name + surrounding labels
Flow-grid	.flow + .fcard + .arrow	A 2-4 step process / "flow"	number + title + 1 sentence + mono tag
Timeline	.tl + .tstep.up/.down + .cat	End-to-end pipeline, swimlane, stages	nodes alternating above/below a center line + category labels
Spectrum	.spectrum	Tension between two extremes (little↔much)	left label — bar — right label
2-way comparison	.cmp + .ccard.bad/.good	Before/after, wrong/right, without X / with X	two cards: negative (red top) ↔ positive (accent top)
Closing	.closing + .big	Outro, restatement of the main message	eyebrow + the largest 2-color heading + a single closing sentence
Horizontal node-link	.s1-row + .node/.link/.orb-mid + .s1-cap	2 ends + center, "either A or B"	two icon-nodes + center sphere + bottom caption
Checklist	.checklist + .cl-eyebrow/.cl-item	"No need for X ✓" bullet list (Tech Blue signature)	eyebrow + glow heading lines + ✓
Prompt	.prompt + .pr-box/.pr-pill	Terminal/natural-language input display	monospace text + blinking cursor + pill
illustratedSteps	.illust + .il-cols/.il-col	AI line-art ill. on top + 2-4 steps with timeline nodes	title + subtitle + per step an <img> + num + title + caption

The illustration images (illustratedSteps) → produced by the sunum-gorsel-uretici skill (Wiro gpt-image, theme-locked prompt, transparent PNG). The visuals are placed next to the deck in ornek-gorseller/ (or the given folder); because they are transparent they fuse into any theme (no blend-mode needed).

Helper primitives (in every scene): --accent highlight (.hl/.hl2), .tag (mono uppercase label), .orb (glow sphere), dotted grid (automatic, #stage::before). Mono font (--font-mono = JetBrains Mono) on prompts/labels.

Production protocol

1. Gather input:

   • Content (title + bullets/sections). Focus on the topic; map each section to a scene.
   • Theme: agent-dark (default) or hit? — if the user doesn't say, default to agent-dark, but the data-theme toggle always works.
   • Output path: where the user gives one; otherwise ~/Desktop/Projeler/<topic-slug>-sunum.html.

2. Build the scene plan: for each content section pick an archetype from the table above. Typical flow: Statement (opening) → 2-4 content scenes (hub-spoke / flow-grid / timeline / comparison) → Closing. 5-9 slides is ideal.

3. Copy the template + fill it in:

   • Copy reference/sablon.html to the output path (CSS token system + HUD + JS engine = FIXED shell; don't touch it).