# Tutorial Video Expert

> Specialized in creating high-converting instructional videos and software tutorials using structured scripts and automated production.

- Skill: `nguyenphp/tutorial-video-expert` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nguyenphp/tutorial-video-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nguyenphp/tutorial-video-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: nguyenphp (https://skillmd.com/u/nguyenphp)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nguyenphp/tutorial-video-expert

---


# 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
```tsx
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
```tsx
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:
```bash
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)