tutorial-video-expert
starsforks
How to install tutorial-video-expert?
nguyenphp/antigravity-marketing/tutorial-video-expert
$npx -y skills add nguyenphp/antigravity-marketing --skill tutorial-video-expertSpecialized in creating high-converting instructional videos and software tutorials using structured scripts and automated production.
SKILL.md
| 1 | # Tutorial Video Expert - Mastering Instructional Design |
| 2 | |
| 3 | > Build videos that don't just "show," but **teach**. This skill focuses on the educational psychology and technical automation required for world-class tutorials. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Instructional Frameworks (The "How-to" Science) |
| 8 | |
| 9 | Follow the **PAS-T (Problem-Agitation-Solution-Tutorial)** framework for maximum retention: |
| 10 | |
| 11 | | Phase | Purpose | Remotion Tip | |
| 12 | |-------|---------|--------------| |
| 13 | | **1. Hook/Problem** | Identify the specific pain point. | Fast-paced, high-contrast text. | |
| 14 | | **2. Solution** | Briefly show the intended result. | Final result montage (30fps+). | |
| 15 | | **3. Steps** | Break the process into 3-5 logical chunks. | Use `<Series>` for sequential steps. | |
| 16 | | **4. Deep Dive** | Specific details/pitfalls. | Zoom-in on UI elements (`interpolate`). | |
| 17 | | **5. CTA** | Next steps (Download, Subscribe, Try). | Glossy brand-colored buttons. | |
| 18 | |
| 19 | --- |
| 20 | |
| 21 | ## 2. Visual Visual Vocabulary (The Look) |
| 22 | |
| 23 | Tutorials require specific visual cues to guide the viewer's eye: |
| 24 | |
| 25 | | Element | Best Practice | Technical Detail | |
| 26 | |---------|---------------|------------------| |
| 27 | | **Focus Highlight** | Dim everything except the target area. | Overlay black with 50% opacity + `clipPath`. | |
| 28 | | **Callouts** | Rounded boxes with brand neon borders. | Glassmorphism (`backdropFilter`). | |
| 29 | | **Progress Bar** | Show stage progress at the bottom. | Map `frame` to width % in a full-width div. | |
| 30 | | **Keystroke Overlays** | Show shortcuts as they are mentioned. | Neon keys in the bottom-left corner. | |
| 31 | |
| 32 | --- |
| 33 | |
| 34 | ## 3. Remotion Implementation (The Code) |
| 35 | |
| 36 | Use these specialized tutorial components: |
| 37 | |
| 38 | ### Screen Recording Wrapper |
| 39 | ```tsx |
| 40 | const TutorialFrame = ({ children, title }) => ( |
| 41 | <div style={{ padding: 40, background: '#0a0a0c' }}> |
| 42 | <div style={{ borderRadius: 20, overflow: 'hidden', border: '2px solid #48B69A' }}> |
| 43 | {children} |
| 44 | </div> |
| 45 | <div className="label">{title}</div> |
| 46 | </div> |
| 47 | ); |
| 48 | ``` |
| 49 | |
| 50 | ### Dynamic Zoom Component |
| 51 | ```tsx |
| 52 | const ZoomArea = ({ frame, start, duration, factor }) => { |
| 53 | const scale = interpolate(frame, [start, start + duration], [1, factor], { |
| 54 | extrapolateRight: 'clamp', |
| 55 | }); |
| 56 | return <div style={{ transform: `scale(${scale})` }}>...</div>; |
| 57 | }; |
| 58 | ``` |
| 59 | |
| 60 | --- |
| 61 | |
| 62 | ## 4. Voiceover & Scripting (The Voice) |
| 63 | |
| 64 | - **Clarity > Speed**: Maintain a pace of 130-150 words per minute. |
| 65 | - **Micro-Pauses**: Insert 0.5s silence after a complex instruction. |
| 66 | - **Action Verbs**: Use "Click," "Navigate," "Select," "Type" - avoid "Maybe go here." |
| 67 | |
| 68 | --- |
| 69 | |
| 70 | ## 5. Usage Command |
| 71 | |
| 72 | To generate a tutorial structure: |
| 73 | ```bash |
| 74 | ag-marketing-kit tutorial "Set up a Stripe Payment Link" --platform="reels" |
| 75 | ``` |
| 76 | |
| 77 | --- |
| 78 | |
| 79 | ## Credits |
| 80 | - **Instructional Design**: Gagne's Nine Events of Instruction |
| 81 | - **Code Engine**: Official Remotion Best Practices |
| 82 | - **Aesthetics**: Antigravity Marketing Kit (Teal-Coral palette) |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
