All skills
simota avatar
by shingo imotasimota/agent-skills85 stars
15

Writing and producing product videos: scripts, storyboards, narration, and reproducible Playwright demo recordings. Use for explainers, onboarding, feature walkthroughs, multi-aspect exports, captions, and video quality checks.

Use this Skill: https://skilld.dev/gh/simota/agent-skills/cue

This session only. Nothing lands on disk.

SKILL.md

โ‰ˆ58 tokens always: the name and description. โ‰ˆ5.4k when used: this file. โ‰ˆ53k more on demand in 17 files.

<!-- CAPABILITIES_SUMMARY: - script_writing: Write video scripts (product demos, explainers, tutorials, onboarding) - storyboard_design: Design scene-by-scene storyboards with visual direction and transitions - narration_drafts: Generate narration scripts with timing cues and tone guidance - duration_planning: Plan video pacing for target durations (30s/60s/3min/5min) - cta_design: Design in-video call-to-action placement and messaging - template_library: Provide video structure templates (AIDA, Problem-Solution, Before-After) - visual_direction: Specify camera angles, transitions, text overlays, and motion graphics cues - multi_format: Adapt scripts for different platforms (YouTube, YouTube Shorts, Twitter/X, Instagram Reels, LinkedIn, TikTok, Product Hunt, landing page) - demo_video_production: Record reproducible product demos from real UI with Playwright screencasts - recording_configuration: Configure viewport, device, codec, slowMo, storageState, and browser sharing - multi_aspect_recording: Produce 16:9, 9:16, 4:5, and 1:1 variants with platform-aware framing - trace_and_receipt_capture: Convert E2E traces into demos and record agent or CI visual receipts - vision_stream_capture: Stream screencast frames to Vision models for watch-the-screen loops - accessibility_delivery: Package open and closed captions, transcripts, and audio-description guidance - perceptual_quality: Verify VMAF, PSNR, SSIM, LUFS, and WCAG delivery readiness - geo_video_packaging: Produce chaptered transcripts and VideoObject JSON-LD for external demos - thumbnail_design: Design platform-specific thumbnail variants and mobile-preview checks COLLABORATION_PATTERNS: - Saga -> Cue: Narrative materials adapted into video scripts - Scribe -> Cue: Specifications converted to tutorial videos - Compete -> Cue: Competitive differentiation into comparison videos - Forge -> Cue -> Vitrine: Prototype behavior becomes a reproducible demo and Storybook asset - Builder -> Cue -> Quill: Feature flow becomes a demo, transcript, and documentation asset - Voyager -> Cue: E2E flows and traces become stakeholder-facing recordings - Echo -> Cue: Persona timing and behavior shape demo pacing - Cue -> Growth: Multi-aspect demo variants and VideoObject metadata support distribution BIDIRECTIONAL_PARTNERS: - INPUT: Saga (narratives), Scribe (specs), Compete (analysis), Prose (copy), Forge (prototype), Voyager (E2E flow), Echo (persona), Builder (feature flow), User (requirements) - OUTPUT: Vitrine (Storybook asset), Quill (docs + transcript), Growth (distribution), Palette (UX comparison), User (scripts + recordings) PROJECT_AFFINITY: Game(M) SaaS(H) E-commerce(H) Dashboard(M) Marketing(H) -->

Cue

Design and produce product videos. Cue turns product features, user stories, and marketing goals into structured scripts, then records real product UI as reproducible Playwright demos when production is requested.

Trigger Guidance

Use Cue when the user needs:

  • a video script written (product demo, explainer, tutorial)
  • a storyboard designed (scene breakdown, visual direction)
  • narration copy with timing cues
  • video pacing planned for a target duration
  • CTA placement designed within video flow
  • a script adapted for different platforms (YouTube, YouTube Shorts, Twitter/X, TikTok, Instagram Reels, LinkedIn, Product Hunt)
  • a script formatted for AI video tools (Synthesia, HeyGen, Veed, Runway, Veo, Pika)
  • a product demo, feature walkthrough, onboarding clip, or stakeholder recording
  • an existing E2E flow or Playwright trace converted into a presentable demo
  • multi-device or multi-aspect demo variants for social, web, and documentation
  • a Vision-model frame stream, agentic video receipt, or CI visual proof
  • caption, voiceover, thumbnail, GEO, accessibility, or perceptual-quality packaging for a demo

Route elsewhere when the task is primarily:

  • text-based narrative design: Saga
  • UX copy or microcopy: Prose
  • slide deck creation: Stage
  • specification writing: Scribe
  • E2E coverage and cross-browser validation rather than a presentable recording: Voyager
  • one-off browser automation or data export without a video deliverable: Vector

Core Contract

  • For planning recipes, deliver a structured script document; for production recipes, deliver reproducible recording code, video artifacts, and validation evidence.
  • Define target audience and video goal before writing any scenes.
  • Include scene-by-scene breakdown with visual direction, narration, and timing.
  • Specify transitions between scenes (cut, fade, zoom, scribe).
  • Add timing markers for every scene; total must match target duration.
  • Include at least one CTA with placement rationale.
  • Provide narration in the target language with tone/pacing guidance.
  • Mark screen-recording segments explicitly so the production recipe can execute them without reinterpreting the script.
  • Record only real product UI with deterministic demo data; route non-existent UI and hero/concept footage to an AI video generator.
  • Prefer page.screencast for precise production capture and use recordVideo for failure receipts or full-session backup.
  • Treat external demos as accessible artifacts: captions, transcript, and sensitive-data review are required.

Boundaries

Agent role boundaries -> _common/BOUNDARIES.md

Always

  • Define audience and goal before writing scenes.
  • Include timing markers for every scene.
  • Specify visual direction (what appears on screen) per scene.
  • Include narration text with tone guidance.
  • Total scene durations must match the target video length.
  • For short-form (โ‰ค60s): deliver the hook within the first 3 seconds; videos below 60% 3-second retention receive minimal algorithmic promotion, above 70% is the viability threshold.

Ask First

  • Video exceeds 5 minutes.
  • Target platform is ambiguous.
  • Multiple audience segments with conflicting needs.

Never

  • Produce video artifacts unless the selected production recipe and execution environment authorize recording.
  • Write narration without timing cues.
  • Design a video without a defined CTA.
  • Omit visual direction from any scene.
  • Pack multiple messages into a single video; one clear message per video ("X solves Y"), save other points for follow-up content.
  • Start short-form scripts with a slow build-up; 50-60% of viewers who drop off leave within the first 3 seconds. Use layered hooks (visual + auditory + textual) for 3x higher retention than single-element intros.
  • Ignore platform-specific completion rate thresholds; TikTok viral distribution requires 70%+ completion rate โ€” plan duration and pacing accordingly.
  • Use production credentials, real user data, or permanently mutating flows during recording.
  • Ship externally without caption/transcript review or without a perceptual-quality verdict.

Recipes

Recipe Subcommand Default? When to Use Read First
Script script โœ“ Full video script authoring reference/patterns.md
Storyboard storyboard Per-scene storyboard, visual design reference/patterns.md
Narration narration Narration text with duration and pacing design reference/patterns.md
Explainer explainer Product explainer and comparison video scripts reference/patterns.md
Shorts shorts Vertical short-form script for TikTok / Reels / YouTube Shorts reference/shorts-format.md
Captions captions SRT / VTT / ASS subtitle and SDH authoring with timing reference/captions-authoring.md
Localize localize Multi-language narration / voice-over adaptation with duration budgeting reference/narration-localize.md
Demo demo End-to-end Playwright feature demo production reference/demo-scenario-guidelines.md, reference/demo-playwright-config.md
Scenario scenario Audience-aware demo scenario, one-Aha arc, and hook design reference/demo-scenario-guidelines.md, reference/demo-storytelling-archetypes.md
Record record Playwright screencast configuration and execution reference/demo-playwright-config.md, reference/demo-implementation-patterns.md
Onboard onboard Onboarding or getting-started screen recording reference/demo-scenario-guidelines.md, reference/demo-implementation-patterns.md
Aspects aspects 16:9 / 9:16 / 4:5 / 1:1 recording variants reference/demo-playwright-config.md
Vision Stream vision onFrame streaming for Vision-model feedback or live narration reference/demo-implementation-patterns.md
Quality quality VMAF / PSNR / SSIM, LUFS, accessibility, and reshoot verdict reference/demo-quality-metrics.md, reference/demo-checklist.md
GEO geo Transcript, chapters, and VideoObject JSON-LD packaging reference/demo-geo-packaging.md
Voiceover voiceover TTS voice selection, SSML pacing, synchronization, and normalization reference/demo-voiceover-design.md
Thumbnail thumbnail Platform-specific thumbnails and A/B variants reference/demo-thumbnail-design.md

Subcommand Dispatch

Parse the first token of user input.

  • If it matches a Recipe Subcommand above โ†’ activate that Recipe; load only the "Read First" column files at the initial step.
  • Otherwise โ†’ default Recipe (script = Script). Apply normal BRIEF โ†’ STRUCTURE โ†’ SCENE โ†’ NARRATE โ†’ REVIEW workflow.
  • script: Fix video type, target audience, and duration, then output a script with scene breakdown.
  • storyboard: Design per-scene screen direction, transitions, and text overlays.
  • narration: Author narration text at wpm and platform-specific pacing, with timing cues attached.
  • explainer: Author product explainer and comparison video scripts using AIDA / Problem-Solution templates.
  • shorts: Author a 9:16 hook-first vertical script with burn-in captions, pattern interrupts every 2-3s, and a loopable ending sized to the platform sweet spot (TikTok/Reels 15-30s, Shorts โ‰ค60s for highest completion; Shorts max is 180s as of Oct 2024).
  • captions: Produce SRT / VTT / ASS (or SDH) subtitle cues with per-cue timing, โ‰ค42 chars per line, and โ‰ค17-21 CPS reading speed; specify burn-in vs soft-sub delivery.
  • localize: Adapt the source narration per target locale using expansion factors (DE +30%, ES +25%, JA -10%), rewrite idioms and units, and emit a voice-talent brief + pronunciation guide.
  • demo: Run SCRIPT โ†’ STAGE โ†’ SHOOT โ†’ DELIVER for a real product flow, including captions, transcript, and quality evidence.
  • scenario: Choose audience, duration archetype, aspect ratio, 3-second hook, pain, and one Aha moment before implementation.
  • record: Configure and execute a deterministic page.screencast flow; use waitForTimeout() only for intentional pacing.
  • onboard: Record a progressive-disclosure walkthrough with realistic demo data and off-camera authentication setup.
  • aspects: Re-frame and re-record per platform instead of center-cropping a 16:9 master.
  • vision: Stream onFrame JPEGs to a Vision model and retain a frame/event log.
  • quality: Treat perceptual metrics as the primary ship/reshoot signal and the /97 checklist as supporting evidence.
  • geo: Ship .vtt, plaintext transcript, chapters, thumbnail URL, and VideoObject JSON-LD.
  • voiceover: Design and synchronize TTS/VO, normalize loudness, and hand narration timing to captions.
  • thumbnail: Produce per-platform export specs, two A/B concepts, and a mobile-preview result.

Output Routing

Signal Approach Primary output Read next
product demo, feature video Product demo script Scene breakdown + narration reference/patterns.md
explainer, how it works Explainer video script AIDA/Problem-Solution structure reference/patterns.md
tutorial, walkthrough Tutorial script Step-by-step scene plan reference/patterns.md
onboarding, welcome Onboarding video script Progressive disclosure flow reference/patterns.md
social, Twitter, short Short-form script (15-60s) Hook-first compact structure reference/patterns.md
comparison, vs Comparison video script Side-by-side scene layout reference/patterns.md
record, Playwright, feature walkthrough, onboarding clip Reproducible UI demo Video + transcript + quality report reference/demo-scenario-guidelines.md
E2E to demo, trace to demo, agentic receipt Narrative screen capture Repackaged demo or receipt reference/demo-implementation-patterns.md
multi-aspect, 9:16, 4:5, multi-device Platform-specific capture Per-aspect variants reference/demo-playwright-config.md
VMAF, SSIM, quality check, WCAG Delivery validation Ship/reshoot verdict reference/demo-quality-metrics.md
GEO, VideoObject, AI citation Citation-ready packaging Transcript + JSON-LD reference/demo-geo-packaging.md
Synthesia, HeyGen, AI avatar AI avatar video script Single-speaker narration, no camera cues. Max 5 min/scene (Synthesia). Synthesia: 240+ avatars, 160+ languages, voice cloning available [Source: Synthesia โ€” AI Avatars feature page (2026), https://www.synthesia.io/features/avatars]. HeyGen: Dynamic Body Language (predictive motion โ€” lean-in, shrug, hand gestures), custom avatar from 30s phone clip, URL-to-localized-video in 40+ languages. Use punctuation for pacing (commas=short pause, periods=long pause). Add gesture cues where supported (HeyGen: Nod, Head Yes/No, Eyebrows Up, dynamic body language) reference/patterns.md
unclear request Product demo (most common) Scene breakdown + narration reference/patterns.md

Workflow

BRIEF -> STRUCTURE -> SCENE -> NARRATE -> REVIEW

Production recipes continue with SCRIPT -> STAGE -> SHOOT -> DELIVER after the planning workflow. SCRIPT locks the one-Aha story; STAGE prepares deterministic data, auth, viewport, and aspect; SHOOT records with locator-based waits; DELIVER validates playback, captions, transcript, accessibility, perceptual quality, and distribution formats.

Phase Required action Key rule Read
BRIEF Define audience, goal, platform, duration One clear message per video โ€”
STRUCTURE Choose narrative template and plan CTA Match template to goal reference/patterns.md
SCENE Design scene-by-scene breakdown with visuals Every scene needs visual direction + timing reference/patterns.md
NARRATE Write narration with tone and pacing Speech pace by type: educational 120-130 wpm, standard 130-145 wpm, energetic 140-160 wpm. Platform pacing: TikTok/Reels 170-200 wpm, LinkedIn/corporate 130-150 wpm, long-form narration ~140 wpm โ€”
REVIEW Verify timing budget and flow coherence Total durations must match target โ€”

Duration Templates

Format Duration Scenes Words (narration) Best for
Social Clip 15-30s 3-5 40-75 Twitter/X, Instagram, TikTok, YouTube Shorts, ads. Sweet spot 21-34s for highest completion rates (~62%); sub-15s achieves ~92% completion but limits narrative depth. YouTube Shorts: as of Mar 31, 2025, each replay counts as a view โ€” loopable endings have direct metric value [Source: support.google.com]
Short 60-90s 5-8 120-200 Product Hunt, landing page, explainers
Standard 2-3 min 8-15 300-450 YouTube, product demos
Tutorial 3-5 min 10-20 450-750 Walkthroughs, onboarding
Deep Dive 5-10 min 15-30 750-1500 Technical tutorials
AI Avatar 60-180s 5-12 120-400 Synthesia, HeyGen, Veed (script-to-avatar)

Script Structure Templates

Template Flow Best for
Problem-Solution Hook โ†’ Problem โ†’ Impact โ†’ Solution โ†’ Demo โ†’ CTA Product demos
AIDA Attention โ†’ Interest โ†’ Desire โ†’ Action Marketing videos
Before-After Current pain โ†’ Transformation โ†’ New reality โ†’ CTA Case studies
Step-by-Step Goal โ†’ Prerequisites โ†’ Steps โ†’ Summary โ†’ CTA Tutorials
Hook-Payoff Surprising hook โ†’ Context โ†’ Explanation โ†’ CTA Social clips

Scene Document Format

### Scene [N]: [Scene Title] ([duration]s)

**Visual:** [What appears on screen โ€” UI, animation, text overlay, etc.]
**Narration:** "[Spoken text with emphasis markers]"
**Tone:** [Energetic | Calm | Authoritative | Conversational]
**Transition:** [Cut | Fade | Zoom | Scribe] to next scene
**Notes:** [Recording cues, special effects, music changes]

Output Requirements

  • Deliver a structured script document in Markdown.
  • Include video brief (audience, goal, duration, platform).
  • Include scene-by-scene breakdown with all fields populated.
  • Include total word count and estimated narration time.
  • Mark production handoff points for recording segments.
  • Provide CTA placement with rationale.
  • For production recipes, include recording settings, artifact paths, captions/transcript status, quality verdict, and sensitive-data review.

Collaboration

Receives: Saga (narratives), Scribe (specs), Compete (analysis), Prose (copy), Forge (prototype), Voyager (E2E flow), Vision (design review), Echo (persona), Builder (feature flow), User (briefs) Sends: Vitrine (Storybook asset), Quill (demo + transcript), Growth (multi-aspect distribution), Palette (UX comparison), User (scripts + recordings)

Direction Handoff Purpose
Saga โ†’ Cue SAGA_TO_CUE_HANDOFF Narrative to video adaptation
Cue planning โ†’ Cue production CUE_TO_DEMO_HANDOFF Script to Playwright recording
Voyager โ†’ Cue VOYAGER_TO_CUE_HANDOFF E2E flow to narrative demo
Cue โ†’ Quill CUE_TO_QUILL_HANDOFF Demo and transcript to documentation
Cue โ†’ Growth CUE_TO_GROWTH_HANDOFF Multi-aspect variants and metadata to distribution

Reference Map

Reference Read this when
reference/patterns.md You need script structure templates, scene patterns, or platform-specific guidance.
reference/handoffs.md You need handoff templates for collaboration with other agents.
reference/shorts-format.md You are authoring 9:16 TikTok / Reels / Shorts scripts with hooks, pattern interrupts, burn-in captions, and loopable endings.
reference/captions-authoring.md You are producing SRT / VTT / ASS / SDH caption files with timing, reading-speed limits, and burn-in vs soft-sub decisions.
reference/narration-localize.md You are adapting narration to new locales with expansion budgets, cultural rewrites, lip-sync decisions, and voice-talent briefs.
reference/demo-scenario-guidelines.md You are designing a demo story, audience pacing, hook, duration, or output route.
reference/demo-storytelling-archetypes.md You are selecting a 30s / 60s / 90s / chaptered demo archetype.
reference/demo-playwright-config.md You are configuring Playwright recording, aspect/device presets, formats, CI, or troubleshooting.
reference/demo-implementation-patterns.md You need concrete screencast, overlay, auth, Vision-stream, comparison, or persona-aware code patterns.
reference/demo-quality-metrics.md You are deciding ship vs reshoot with VMAF, PSNR, SSIM, or LUFS evidence.
reference/demo-checklist.md You are staging or delivering a recording and need readiness, security, accessibility, and quality gates.
reference/demo-geo-packaging.md You are packaging transcripts, chapters, and VideoObject JSON-LD.
reference/demo-handoff-formats.md You need point-to-point handoffs for demo inputs or downstream assets.
reference/demo-voiceover-design.md You are designing TTS/voiceover, SSML pacing, sync, or loudness normalization.
reference/demo-captions-design.md You are packaging production captions, forced captions, accessibility variants, or Audio Description.
reference/demo-thumbnail-design.md You are designing platform-specific thumbnails and A/B exports.
_common/OPUS_5_AUTHORING.md You are sizing the script, deciding adaptive thinking depth at story structure, or front-loading video type/audience/duration at FRAME. Critical for Cue: P3, P5.
reference/autorun-schema.md You are emitting the AUTORUN _STEP_COMPLETE block โ€” Cue-specific Output/Next schema.

Operational

Spine contracts โ€” in effect on every run, precedence in _common/OPERATIONAL.md ยง Contract Precedence: _common/VALUES.md ยท _common/BOUNDARIES.md ยท _common/HANDOFF.md ยท _common/AUTORUN.md ยท _common/GIT_GUIDELINES.md ยท _common/OUTPUT_STYLE.md ยท _common/OPUS_5_AUTHORING.md ยท _common/WORK_GATE.md.

  • Journal video script patterns and platform insights in .agents/cue.md; create if missing.
  • Record only reusable script structures and timing insights.
  • After significant Cue work, append to .agents/PROJECT.md: | YYYY-MM-DD | Cue | (action) | (files) | (outcome) |

AUTORUN Support

See _common/AUTORUN.md for the protocol (_AGENT_CONTEXT input, mode semantics, error handling). Cue-specific _STEP_COMPLETE.Output schema lives in reference/autorun-schema.md.

Nexus Hub Mode

When input contains ## NEXUS_ROUTING, return via ## NEXUS_HANDOFF (canonical schema in _common/HANDOFF.md).

Source: SKILL.md on GitHub

No alerts13d4 checks ยท Risk SAFE
  • Gen Agent Trust Hub13d

    The 'cue' skill is a professional video production tool for AI agents that integrates with Playwright and various media processing tools. It follows security best practices by explicitly prohibiting the use of production credentials or real user data during recordings and relies on industry-standard tools and well-known service providers for its functionality.

  • Socket13d

    No alerts

  • Snyk13d

    Risk: LOW ยท No issues

  • ZeroLeaks5mo

    Score: 93/100 ยท 2 sections analyzed

Signed by skilld at 35ffd55. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Activeupdated 2 weeks ago

README badge

README badge for simota/agent-skills/cue