Skill: Viewer Editorial Intelligence

What

How the viewer-builder agent thinks about editorial design. Content analysis → design decisions. This is the intelligence layer that makes each investigation feel like a unique editorial product.

Content Analysis Framework

Before choosing anything, analyze:

1. Text Density

Count avg words per moment
< 80 words: visual-first (use immersive, minimal text overlay)
80-200 words: balanced (magazine works well)
200 words: text-heavy (consider article for scrollable, or magazine with slower typewriter)

2. Entity Richness (from knowledge.json)

Count total entities, causal links, chains
100 entities: complex systems investigation → dossier/magazine feel, show entities in review
< 30 entities: narrative-focused → immersive or comic feel

3. Speaker Distribution

100% NARRATOR: pure editorial → magazine, no speaker badges
60-99% NARRATOR: narrator-led with occasional voices → magazine with occasional badge
< 60% NARRATOR: dialogue-driven → immersive or comic

4. Art Style Signal

The default_style field tells you the visual world:

dark-cinematic-military → green/amber on near-black, military monospace accents
maritime-cartographic → ocean blue/teal, navigational chart feel
ink-wash-intelligence-dossier → crimson on sepia-black, redacted stamps, field report
archival-documentary → warm sepia/gold, historical archive
sepia-documentary → similar to archival, muted browns
noir-gritty → pure contrast, minimal color
warm-painterly → brass/cream, cozy, inviting

5. Moment Count

< 20: short explainer → faster transitions, no scene nav needed
20-30: standard investigation → full magazine with all features
30: long-form → consider article layout or add chapter breaks

Intro Design Patterns

The intro screen sets the emotional context. Match it to the investigation's identity:

Investigation Type	Badge Text	Badge Style	Start Button
Military/intelligence	"CLASSIFIED BRIEFING" or operation name	Crimson border, uppercase	"Begin Investigation"
Systems analysis	"SYSTEMS INVESTIGATION"	Amber, thin border	"Begin Reading"
Historical	"HISTORICAL ANALYSIS"	Sepia, aged feel	"Enter Archive"
Technical/academic	"PRACTITIONER'S GUIDE" or "RESEARCH PAPER"	Blue, clean	"Begin Reading"
Narrative/story	No badge (clean)	—	"Begin"

Typography Decisions

Content Type	Heading Font	Body Font	Code Font
Investigation/editorial	Crimson Pro 300	Crimson Pro 400	—
Technical/academic	Inter 600	Crimson Pro 400	JetBrains Mono
Military/intelligence	Special Elite / JetBrains Mono	Crimson Pro 400	JetBrains Mono
Narrative/story	Crimson Pro 300 italic	Crimson Pro 400	—

Transition Design

Content Feel	Transition	Speed	Why
Editorial/measured	Page-flip (translateX slide)	280ms out + 350ms in	Feels like turning magazine pages
Cinematic/atmospheric	Crossfade	700ms	Smooth, dreamy, immersive
Punchy/data-driven	Cut (instant)	0ms	No filler between facts
Revelatory	Slow crossfade	1200ms	Build anticipation

Typewriter Speed by Content Type

Content	Speed (ms/char)	Why
Dense analytical text	12-14ms	Reader wants information fast
Narrative/storytelling	18-22ms	Build mood, let words land
Poetic/contemplative	25-30ms	Each word matters
Data captions	8-10ms	Quick context, not the main event

What Makes It Feel Like a PPT with Animation

The best viewers feel like premium presentations:

Loading screen — shows the investigation is loading, not broken
Intro screen — sets the mood before content starts
Transitions — smooth, not jarring
Ken Burns on images — subtle drift keeps static images alive
Typewriter on text — text appears, not dumps
Progress bar — reader knows where they are
Stage markers — act structure visible in progress
Ghost panel numbers — spatial orientation without clutter
End screen — closure, not abrupt stop
Cross-links — where to go next

Common Mistakes

Making all investigations feel the same (same palette, same intro, same speed)
Typewriter too slow on long text (400 words at 20ms = 8 seconds — painful)
No intro screen (reader thrown into content without context)
Ignoring the art style when choosing palette (warm-painterly with cold blue accents)
Review panel that doesn't show useful production data
End screen that just says "The End" with no next steps

Skill: Viewer Editorial Intelligence

What

How the viewer-builder agent thinks about editorial design. Content analysis → design decisions. This is the intelligence layer that makes each investigation feel like a unique editorial product.

Content Analysis Framework

Before choosing anything, analyze:

1. Text Density

Count avg words per moment
< 80 words: visual-first (use immersive, minimal text overlay)
80-200 words: balanced (magazine works well)
200 words: text-heavy (consider article for scrollable, or magazine with slower typewriter)

2. Entity Richness (from knowledge.json)

Count total entities, causal links, chains
100 entities: complex systems investigation → dossier/magazine feel, show entities in review
< 30 entities: narrative-focused → immersive or comic feel

3. Speaker Distribution

100% NARRATOR: pure editorial → magazine, no speaker badges
60-99% NARRATOR: narrator-led with occasional voices → magazine with occasional badge
< 60% NARRATOR: dialogue-driven → immersive or comic

4. Art Style Signal

The default_style field tells you the visual world:

dark-cinematic-military → green/amber on near-black, military monospace accents
maritime-cartographic → ocean blue/teal, navigational chart feel
ink-wash-intelligence-dossier → crimson on sepia-black, redacted stamps, field report
archival-documentary → warm sepia/gold, historical archive
sepia-documentary → similar to archival, muted browns
noir-gritty → pure contrast, minimal color
warm-painterly → brass/cream, cozy, inviting

5. Moment Count

< 20: short explainer → faster transitions, no scene nav needed
20-30: standard investigation → full magazine with all features
30: long-form → consider article layout or add chapter breaks

Intro Design Patterns

The intro screen sets the emotional context. Match it to the investigation's identity:

Investigation Type	Badge Text	Badge Style	Start Button
Military/intelligence	"CLASSIFIED BRIEFING" or operation name	Crimson border, uppercase	"Begin Investigation"
Systems analysis	"SYSTEMS INVESTIGATION"	Amber, thin border	"Begin Reading"
Historical	"HISTORICAL ANALYSIS"	Sepia, aged feel	"Enter Archive"
Technical/academic	"PRACTITIONER'S GUIDE" or "RESEARCH PAPER"	Blue, clean	"Begin Reading"
Narrative/story	No badge (clean)	—	"Begin"

Typography Decisions

Content Type	Heading Font	Body Font	Code Font
Investigation/editorial	Crimson Pro 300	Crimson Pro 400	—
Technical/academic	Inter 600	Crimson Pro 400	JetBrains Mono
Military/intelligence	Special Elite / JetBrains Mono	Crimson Pro 400	JetBrains Mono
Narrative/story	Crimson Pro 300 italic	Crimson Pro 400	—

Transition Design

Content Feel	Transition	Speed	Why
Editorial/measured	Page-flip (translateX slide)	280ms out + 350ms in	Feels like turning magazine pages
Cinematic/atmospheric	Crossfade	700ms	Smooth, dreamy, immersive
Punchy/data-driven	Cut (instant)	0ms	No filler between facts
Revelatory	Slow crossfade	1200ms	Build anticipation

Typewriter Speed by Content Type

Content	Speed (ms/char)	Why
Dense analytical text	12-14ms	Reader wants information fast
Narrative/storytelling	18-22ms	Build mood, let words land
Poetic/contemplative	25-30ms	Each word matters
Data captions	8-10ms	Quick context, not the main event

What Makes It Feel Like a PPT with Animation

The best viewers feel like premium presentations:

Loading screen — shows the investigation is loading, not broken
Intro screen — sets the mood before content starts
Transitions — smooth, not jarring
Ken Burns on images — subtle drift keeps static images alive
Typewriter on text — text appears, not dumps
Progress bar — reader knows where they are
Stage markers — act structure visible in progress
Ghost panel numbers — spatial orientation without clutter
End screen — closure, not abrupt stop
Cross-links — where to go next

Common Mistakes

Making all investigations feel the same (same palette, same intro, same speed)
Typewriter too slow on long text (400 words at 20ms = 8 seconds — painful)
No intro screen (reader thrown into content without context)
Ignoring the art style when choosing palette (warm-painterly with cold blue accents)
Review panel that doesn't show useful production data
End screen that just says "The End" with no next steps

Skill: Viewer Editorial Intelligence

Additional Files (20)

Skill: Viewer Editorial Intelligence

What

Content Analysis Framework

1. Text Density

2. Entity Richness (from knowledge.json)

3. Speaker Distribution

4. Art Style Signal

5. Moment Count

Intro Design Patterns

Typography Decisions

Transition Design

Typewriter Speed by Content Type

What Makes It Feel Like a PPT with Animation

Common Mistakes

Related Skills

<h1 align="center">

Frontend Typescript Linting.mdc

2. Apply Deepthink Protocol (reason about dependencies

Additional Files (20)

Skill: Viewer Editorial Intelligence

What

Content Analysis Framework

1. Text Density

2. Entity Richness (from knowledge.json)

3. Speaker Distribution

4. Art Style Signal

5. Moment Count

Intro Design Patterns

Typography Decisions

Transition Design

Typewriter Speed by Content Type

What Makes It Feel Like a PPT with Animation

Common Mistakes