Menu
Specialized in creating high-converting instructional videos and software tutorials using structured scripts and automated production.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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 |
Build videos that don't just "show," but teach. This skill focuses on the educational psychology and technical automation required for world-class tutorials.
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. |
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. |
Use these specialized tutorial components:
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>
);
const ZoomArea = ({ frame, start, duration, factor }) => {
const scale = interpolate(frame, [start, start + duration], [1, factor], {
extrapolateRight: 'clamp',
});
return <div style={{ transform: `scale(${scale})` }}>...</div>;
};
To generate a tutorial structure:
ag-marketing-kit tutorial "Set up a Stripe Payment Link" --platform="reels"
Orchestrates a professional reporting workflow by combining design system intelligence with high-fidelity PDF generation.
Use this skill when visual quality and design identity matter for a PDF. CREATE (generate from scratch): "make a PDF", "generate a report", "write a proposal", "create a resume", "beautiful PDF", "professional document", "cover page", "polished PDF", "client-ready document". FILL (complete form fields): "fill in the form", "fill out this PDF", "complete the form fields", "write values into PDF", "what fields does this PDF have". REFORMAT (apply design to an existing doc): "reformat this document", "apply our style", "convert this Markdown/text to PDF", "make this doc look good", "re-style this PDF". This skill uses a token-based design system: color, typography, and spacing are derived from the document type and flow through every page. The output is print-ready. Prefer this skill when appearance matters, not just when any PDF output is needed.
Design intelligence for marketing UI/UX with custom design system generation.
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Marketing analytics, attribution models, KPI tracking, dashboards, and data-driven decision making.
Frontend design principles for marketing websites and landing pages.