tutorial

Record narrated Playwright walkthroughs and render them as captioned MP4 videos or HTML players.

2|1|Updated Jun 23, 2026
One-click install
npx skills add https://github.com/Kaidanov/grekai-skills-4all --skill tutorial-kaidanov
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tutorial
Source: https://github.com/Kaidanov/grekai-skills-4all/tree/main/skills/tutorial
Command: npx skills add https://github.com/Kaidanov/grekai-skills-4all --skill tutorial-kaidanov

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, edge-tts, ffmpeg, and includes scripts (resource) components.

What problem does it solve? Product walkthrough videos go stale the moment the UI changes, and re-recording plus re-narrating them by hand is tedious. This Skill turns a plain-English goal into a reproducible, narrated tutorial: Playwright drives your app, a neural TTS voice narrates each step, and the output regenerates on command. ## Core Features & Use Cases - Gated record-and-render pipeline: Draft a scenario, approve it, record with Playwright, then render a real motion MP4, a screenshot slideshow MP4, or a no-ffmpeg HTML player — all with WebVTT captions. - Drift-free narration sync: Per-step audio is muxed over the recorded session video, freezing a frame only when narration runs long, so voice and picture never desync. - Themeable branded index: Generates a light/dark, logo-branded index.html that switches between all published tutorials, driven by tutorial.config.json. - Use Case: After shipping a new onboarding flow, run /tutorial-create "show a new user how to create their first record", approve the scenario, and publish a narrated video tour of your app. ## Quick Start Ask the assistant to run /tutorial-init to configure your project, then use /tutorial-create with a one-line goal to record and publish your first narrated tutorial.

Frequently Asked Questions about tutorial

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

FAQPage Schema
How do I record a narrated video walkthrough of my web app?

Use the /tutorial-create command with a plain-English goal. The skill drafts a scenario for your approval, drives your app with Playwright while recording the session, synthesizes narration with edge-tts, and renders a captioned MP4 or HTML player.

How to add voiceover narration to Playwright screen recordings?

Run synthesize-audio.mjs to generate per-step mp3 narration with edge-tts, then render-motion-video.mjs to mux the audio over the recorded session video. Each step's clip is cut by its timeline offset so narration stays in sync.

Can I build a narrated tutorial without ffmpeg installed?

Yes. The build-tutorial-page.mjs script produces a self-contained HTML audio-slideshow player using only Node and edge-tts. It plays step screenshots in sync with the narration audio, with captions and a light/dark toggle.

Why does the motion video render fail with an ffmpeg error?

Playwright bundles a webm-only ffmpeg that cannot encode H.264/AAC, so MP4 rendering fails. Install a full ffmpeg build or point the script at one with FFMPEG_BIN, such as node_modules/ffmpeg-static.

What are the limitations of the screenshot slideshow output?

The slideshow MP4 holds static screenshots under narration, so viewers do not see the app actually moving. It is intended as a fallback when no recorded session video exists; the motion MP4 is the primary output when ffmpeg is available.