deck-visuals — reference

What it does

Three pillars

Impactful visuals

Inline-SVG concept diagrams for relationships and flows. Icon anchors for single ideas. Hero-moment illustrations are deferred, not faked.

Data-viz principles

Chart form and marks come from the built-in dataviz skill. Color comes from a validated brand palette. Every chart ships a reachable table twin.

Levity

Real GIFs by direct media URL, at a deliberate cadence, with alt text and a reduced-motion still on every one.

Division of labor

Layer boundaries

frontend-slides — renders shell, stage, theme

deck-visuals — guides + injects one fragment

iceberg — copy only, never the finished .html

Fragments are renderer-agnostic. Each carries its own scoped <style> and assumes nothing about the host page's classes or globals. Injecting one never edits the shell around it.

How it works

The pipeline

0Onboard (out-of-band). A local swipe picker rebuilds the presenter's pop-culture profile so levity always has options. deck-visuals
1Copy. Draft slide text. Run iceberg on the prose only. iceberg
2Render. Build or open the deck. frontend-slides
3Chart injection. dataviz form/marks + brand palette color, inline-SVG + table twin. deck-visuals
4Concept-visual injection. Diagram, icon, or a deferred placeholder — by the decision rule. deck-visuals
5Levity injection. GIF fragments at a tasteful cadence. deck-visuals

Validated, not eyeballed

Brand palette

Dark mode: PASS

Eight categorical slots, anchored on the deck accent #3ea6ff family, checked with the built-in dataviz skill's colorblind-safety validator — the authority for these numbers — rather than by eye. Worst adjacent color-vision-deficiency ΔE against the dark surface: 8.4, clearing the 8.0 target; worst adjacent normal-vision ΔE: 19.3, clearing the 15.0 floor. This is a dark-only set: the decks this plugin targets are dark-only today, and a light-mode palette is a separate, not-yet-derived selection. See skills/deck-visuals/assets/brand-palette.md for the full validator output.

Slot	Color	Name
1	#2894eb	Signal Blue (anchor)
2	#d95926	Orange
3	#199e70	Aqua
4	#c98500	Yellow
5	#d55181	Magenta
6	#008300	Green
7	#9085e9	Violet
8	#e66767	Red

Getting started

Install

# Install
/plugin marketplace add gagoar/gago-plugins
/plugin install deck-visuals@gago-plugins
/reload-plugins

Ask in natural language once a deck exists — "add visuals to my deck," "chart this," "add a levity slide." The skill reads the deck and returns fragments to inject; it never rewrites the shell.

What ships

Fragments

skills/deck-visuals/assets/fragments/
chart-figure.html      — inline-SVG chart + table-view twin
concept-diagram.html  — on-brand flow/relationship/architecture diagram
levity-slide.html     — GIF block, alt text, reduced-motion fallback

Every fragment is self-contained: its own scoped styles, no dependency on the host page's classes. Icons live alongside them in assets/icons/, a curated Lucide-style set of 16 presentation glyphs.