tutorial-video-expert

name	tutorial-video-expert
description	Specialized in creating high-converting instructional videos and software tutorials using structured scripts and automated production.
allowed-tools	Read, RunCommand, Write

Tutorial Video Expert - Mastering Instructional Design

Build videos that don't just "show," but teach. This skill focuses on the educational psychology and technical automation required for world-class tutorials.

---

1. Instructional Frameworks (The "How-to" Science)

Follow the PAS-T (Problem-Agitation-Solution-Tutorial) framework for maximum retention:

Phase	Purpose	Remotion Tip
1. Hook/Problem	Identify the specific pain point.	Fast-paced, high-contrast text.
2. Solution	Briefly show the intended result.	Final result montage (30fps+).
3. Steps	Break the process into 3-5 logical chunks.	Use <Series> for sequential steps.
4. Deep Dive	Specific details/pitfalls.	Zoom-in on UI elements (interpolate).
5. CTA	Next steps (Download, Subscribe, Try).	Glossy brand-colored buttons.

---

2. Visual Visual Vocabulary (The Look)

Tutorials require specific visual cues to guide the viewer's eye:

Element	Best Practice	Technical Detail
Focus Highlight	Dim everything except the target area.	Overlay black with 50% opacity + clipPath.
Callouts	Rounded boxes with brand neon borders.	Glassmorphism (backdropFilter).
Progress Bar	Show stage progress at the bottom.	Map frame to width % in a full-width div.
Keystroke Overlays	Show shortcuts as they are mentioned.	Neon keys in the bottom-left corner.

---

3. Remotion Implementation (The Code)

Use these specialized tutorial components:

Screen Recording Wrapper

const TutorialFrame = ({ children, title }) => (
  <div style={{ padding: 40, background: '#0a0a0c' }}>
    <div style={{ borderRadius: 20, overflow: 'hidden', border: '2px solid #48B69A' }}>
       {children}
    </div>
    <div className="label">{title}</div>
  </div>
);

Dynamic Zoom Component

const ZoomArea = ({ frame, start, duration, factor }) => {
  const scale = interpolate(frame, [start, start + duration], [1, factor], {
    extrapolateRight: 'clamp',
  });
  return <div style={{ transform: `scale(${scale})` }}>...</div>;
};

---

4. Voiceover & Scripting (The Voice)

• Clarity > Speed: Maintain a pace of 130-150 words per minute.
• Micro-Pauses: Insert 0.5s silence after a complex instruction.
• Action Verbs: Use "Click," "Navigate," "Select," "Type" - avoid "Maybe go here."

---

5. Usage Command

To generate a tutorial structure:

ag-marketing-kit tutorial "Set up a Stripe Payment Link" --platform="reels"

---

Credits

• Instructional Design: Gagne's Nine Events of Instruction
• Code Engine: Official Remotion Best Practices
• Aesthetics: Antigravity Marketing Kit (Teal-Coral palette)