Skill: Viewer Adaptation
What
How to customize a template viewer for a specific investigation. The agent reads the project data and derives palette, intro, typography, and personality.
Palette Derivation
The default_style and presentation block in investigation.json tell you the visual world. Derive CSS variables from them:
| Art Style | --accent | --accent-bright | --bg-primary | Feel |
|---|
| dark-cinematic-military | #4ADE80 (green) | #6EE7A0 | #060608 | Military HUD, night ops |
| maritime-cartographic | #7BB8D4 (ocean) | #9DD0E8 | #080E14 | Naval intelligence, deep water |
| ink-wash-intelligence-dossier | #C44B4B (crimson) | #D46B6B | #0D0D0D | Field dossier, redacted |
| archival-documentary | #C9A96E (sepia) | #DBC48E | #0A0908 | Historical archive |
| sepia-documentary | #B8956A (warm sepia) | #D4B08C | #0A0906 | War photography |
| noir-gritty | #E0E0E0 (silver) | #FFFFFF | #050505 | High contrast, minimal |
| warm-painterly | #C89B3C (brass) | #E8B84B | #0F0F1A | Cozy, inviting |
| retro-propaganda | #CC3333 (bold red) | #FF4444 | #1A0A0A | Soviet poster, political |
| cyberpunk-neon | #00FFCC (cyan) | #33FFD4 | #0A0A14 | Neon, digital |
If presentation.accent_color exists in investigation.json, use that directly — it's the creator's explicit choice.
If presentation.background_color exists, use that for --bg-primary.
Intro Badge Design
The intro badge sets the emotional context. Rules:
- Read the investigation title and subtitle — the badge should categorize the content
- Match the tone — military investigations get "CLASSIFIED" or operation names, academic gets "RESEARCH PAPER", narrative gets minimal or no badge
- Badge color matches accent —
border: 1px solid var(--accent-dim)
- Always uppercase, letterspaced —
letter-spacing: 0.5em; text-transform: uppercase
- Subtle opacity —
opacity: 0.8 so it doesn't dominate
Badge Text Examples:
- Operation Epic Fury → "OPERATION EPIC FURY — CLASSIFIED"
- Strait of Hormuz → "STRATEGIC CHOKEPOINT ANALYSIS"
- IRGC Proxies → "INTELLIGENCE DOSSIER"
- US Military 1990-2026 → "HISTORICAL SYSTEMS ANALYSIS — 1990 TO 2026"
- Insurance Architecture → "CLASSIFIED BRIEFING"
- Coffee Supply Chain → "COMMODITY SYSTEMS INVESTIGATION"
- GDP Illusion → "ECONOMIC SYSTEMS ANALYSIS"
Panel Title Insertion
Each moment can have a title from moment.metadata.stage or a generated section name from the act_structure in knowledge.json.
If moments have stage/act metadata, display as small-caps amber header above the narration.
If they don't, derive from act_structure by matching panel ranges to act boundaries.
Cross-Link Generation
From metadata.json cross_references[]:
METADATA.cross_references.forEach(ref => {
// ref.project_id, ref.connection, ref.type
// Display as clickable pill in end screen
// Format: project_id → human-readable title (replace hyphens with spaces, title case)
});
How to Generate a Per-Project Viewer
Step by step:
- Read
investigation.json — get title, subtitle, default_style, presentation, moments count
- Read
knowledge.json — get entity count (for review panel richness)
- Read
metadata.json — get cross_references, geographic_focus, investigation_type
- Choose template (use viewer-templates.md decision tree)
- Copy template HTML to
projects/{id}/index.html
- Override
:root CSS variables based on palette derivation above
- Set intro badge text based on content analysis
- Set
<title> to investigation title
- Verify data loading works (investigation.json in same directory)
- Test: open in browser, click through 3-4 panels, check review mode
Common Mistakes
- Using the same accent color for every project
- Intro badge too long (max ~40 characters)
- Forgetting to test the review panel shows entities
- Not setting the page
<title> to the investigation name
- Palette too bright for the content (military investigation with pastel accents)