visual-storytelling-director

Plans narrative pacing, scene structure, and interaction grammar for web experiences.

3|Updated Jul 28, 2026
One-click install
npx skills add https://github.com/marcmarti9/agentit --skill visual-storytelling-director-marcmarti9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-storytelling-director
Source: https://github.com/marcmarti9/agentit/tree/main/skills/visual-storytelling-director
Command: npx skills add https://github.com/marcmarti9/agentit --skill visual-storytelling-director-marcmarti9

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web experiences often become collections of impressive but disconnected sections. This Skill structures websites, campaigns, and product launches as deliberate narratives with defined pacing, reveals, and emotional beats before any implementation begins. ## Core Features & Use Cases - Beat Sheet Construction: Defines opening state, promise, progression, reveals, breathing room, climax, and resolution for the experience. - Story Grammar Selection: Chooses from editorial sequences, spatial journeys, guided product reveals, timelines, and other narrative structures that fit the content. - Continuity and Interaction Design: Maintains camera direction, typography, motion language, and interaction rules across scenes, including mobile and reduced-motion adaptations. - Use Case: When designing a product launch page, use this Skill to produce a visual thesis, scene/state map, and transition language before handing off to frontend implementation specialists. ## Quick Start Use the visual-storytelling-director skill to create a beat sheet and narrative structure for my product launch website before we start building it.

Frequently Asked Questions about visual-storytelling-director

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan the narrative structure of a website before building it?▼

Start with a beat sheet defining the opening state, promise, progression, reveals, breathing room, climax, and resolution. Then choose a story grammar such as an editorial sequence or spatial journey that fits the content rather than defaulting to scroll effects.

What is a beat sheet in web experience design?▼

A beat sheet maps what the user should feel, understand, and discover at each moment of the experience. It covers the opening image, implied promise, section progression, withheld reveals, climax, and how the story resolves into a call to action.

How do I choose between scrollytelling and other story grammars?▼

Choose a grammar that fits the content: editorial sequences, guided product reveals, chaptered timelines, before/after transformations, or explorable maps. Scrollytelling and spatial specialists should only be brought in after the narrative actually demands them.

How do I maintain visual continuity across website scenes?▼

Maintain continuity across camera direction, typography hierarchy, object persistence between scenes, motion vectors and easing language, color transitions, and interaction rules. Each transition should explain a relationship or create a deliberate emotional beat.

When should I not use heavy scroll-based interaction?▼

Avoid excessive dragging or scrolling when users just need basic information. Interaction should reinforce meaning, whether the user is observing, revealing, steering, exploring, or comparing, rather than gating content behind effort.

How do I adapt an immersive web narrative for mobile and reduced motion?▼

The output contract includes a mobile and reduced-motion adaptation alongside the desktop narrative. Ensure narrative equivalence across devices so the story lands even when motion and density are reduced.