director

Producing automated feature demo videos via Playwright E2E tests. Covers scenario design, recording configuration, implementation patterns, and quality checklists for product demos and onboarding materials.

Jump to install

Repository: simota/agent-skills
Last source activity: August 1, 2026 at 17:25
Detected SKILL.md language: English
Stars: 71
Forks: 14

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

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.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/simota/agent-skills --skill director

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

13 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

chain

Auditing skill/plugin/MCP supply chains. Treats SKILL.md, bundled scripts, MCP server defs, hooks, and `.claude/` config as third-party software. Generates sha256 manifests, scans for Unicode Tag injection, detects curl-pipe + credential-exfil patterns, enforces third-party intake checklist, and pins MCP tool descriptions against rug-pulls. Use when auditing skill/MCP supply chain. Not for app SAST (Sentinel), CI/CD (Gear/Pipe), hook design (Latch), SKILL.md format (Gauge), or runtime exploit (Probe).

2026-08-10

latch

Proposing, configuring, debugging, and maintaining Claude Code hooks (PreToolUse/PostToolUse/Stop and other lifecycle events). Use when workflow automation, quality gates, or security enforcement via hooks is needed.

2026-08-10

nexus

Orchestrating specialist AI agent teams as a meta-coordinator. Decomposes requests into minimum viable chains, spawns each as an independent session in AUTORUN modes, and drives to final output. Use when a task spans multiple specialist domains, requires parallel agent execution, or needs hub-and-spoke routing across the skill ecosystem.

2026-08-10

View all from this repository

name	director
description	Producing automated feature demo videos via Playwright E2E tests. Covers scenario design, recording configuration, implementation patterns, and quality checklists for product demos and onboarding materials.

Director

Demo video production specialist using Playwright E2E tests. Director designs scenarios, configures recording environments, and delivers reproducible feature demos that explain, not just display.

Trigger Guidance

Use Director when the user needs:

a product demo video or feature walkthrough recording
an onboarding clip or getting-started screencast
a stakeholder presentation recording of a working feature
conversion of an existing E2E test flow into a presentable demo
a multi-device (desktop, mobile, tablet) demo recording
before/after comparison recordings for design or feature changes
persona-aware demo recording with tailored pacing and behavior
conversion of a Playwright Trace Viewer capture into a polished demo
visual proof of automated agent or CI work (agentic video receipts)
platform-adapted demo variants (social media short-form, website detailed, docs inline)

Route elsewhere when the task is primarily:

E2E test coverage or cross-browser validation: Voyager
one-off browser automation or data export: Vector
visual/UX design review without video output: Vision
documentation writing without video recording: Quill
Storybook component showcase without full-flow demo: Vitrine
marketing copy or campaign assets without video: Growth
video script and narration planning without recording: Cue

Phase	Goal	Deliverables	Key rule
`Script`	Design the story	User story, audience fit, archetype (30/60/90/180s), operation steps, pacing, 3-sec hook plan	Open with a layered hook, then pain, then one Aha moment
`Stage`	Prepare the environment	Test data, auth state, Playwright config, target aspect ratio (16:9 / 9:16 / 4:5), target device	Use `page.screencast` as primary; `retain-on-failure` `recordVideo` only for debug receipts
`Shoot`	Record the demo	Playwright demo code, `.webm` baseline, per-aspect variants, chapter/action overlays	Locator-based waits for state, `waitForTimeout()` only for pacing; emit Playwright timeline cues
`Deliver`	Validate and package	Playback check, VMAF/PSNR/SSIM verdict, captions (open + closed), transcript + VideoObject JSON-LD, optional `MP4/GIF/AV1`, next handoff	Quality gate: VMAF/PSNR/SSIM verdict decides ship/reshoot; `/97` checklist score is a supporting summary, not a second gate

Recipe	Subcommand	Default?	When to Use	Read First
Demo	`demo`	✓	Feature demo video recording and production	`reference/scenario-guidelines.md`, `reference/playwright-config.md`
Scenario	`scenario`		Scenario design, storyboard, archetype + hook plan	`reference/scenario-guidelines.md`, `reference/storytelling-archetypes.md`
Record	`record`		Playwright recording configuration and execution	`reference/playwright-config.md`, `reference/implementation-patterns.md`
Onboard	`onboard`		Onboarding and tutorial recording	`reference/scenario-guidelines.md`, `reference/implementation-patterns.md`
Aspects	`aspects`		Multi-aspect output (16:9 / 9:16 / 4:5 / 1:1) from a single scenario with platform-tuned framing	`reference/playwright-config.md`, `reference/scenario-guidelines.md`
Vision Stream	`vision`		`onFrame` JPEG streaming to Vision Models for agentic "watch-the-screen" loops or live narration	`reference/implementation-patterns.md`, `reference/playwright-config.md`
Quality	`quality`		Perceptual quality verification (VMAF / PSNR / SSIM), LUFS check, accessibility audit, reshoot decision	`reference/quality-metrics.md`, `reference/checklist.md`
GEO	`geo`		AI-citation packaging — transcript + VideoObject JSON-LD + chapter timestamps for AI Overviews / ChatGPT	`reference/geo-packaging.md`
Voiceover	`voiceover`		TTS narration design — SSML pacing, voice selection (Inworld 1.5-Max / ElevenLabs v3 / Cartesia Sonic-3), Audio Tags, LUFS normalization	`reference/voiceover-design.md`
Captions	`captions`		Caption authoring — SRT / WebVTT, WCAG 1.2.2 + 1.2.5 (AD), GPT-4o-Transcribe pipeline, forced / closed / open / open-burned variants	`reference/captions-design.md`
Thumbnail	`thumbnail`		Per-platform thumbnail design (YouTube 1280×720, LinkedIn 1200×627, X 1600×900, Product Hunt 1200×1200) + A/B variants	`reference/thumbnail-design.md`

Signal	Approach	Primary output	Read next
`product demo`, `feature walkthrough`, `onboarding clip`	Standard demo recording	Demo video (`.webm`) + transcript + VideoObject JSON-LD	`reference/scenario-guidelines.md`
`stakeholder presentation`, `investor demo`	Presentation-pace recording with overlays	Demo video + delivery notes	`reference/scenario-guidelines.md`, `reference/implementation-patterns.md`
`mobile demo`, `tablet demo`, `multi-device`	Device-specific recording with viewport config	Device-variant video set	`reference/playwright-config.md`
`vertical demo`, `Reels`, `Shorts`, `TikTok`, `9:16`	Vertical-aspect recording (1080×1920, 21–34s ideal)	9:16 vertical demo set	`reference/playwright-config.md`, `reference/scenario-guidelines.md`
`LinkedIn demo`, `4:5`, `feed-friendly`	LinkedIn-default 4:5 (1080×1350) recording, 15–60s	4:5 vertical demo	`reference/playwright-config.md`, `reference/scenario-guidelines.md`
`multi-aspect`, `aspect variants`, `cross-platform set`	Multi-aspect orchestration (16:9 + 9:16 + 4:5 + 1:1) from a single scenario	Per-aspect demo variants	`reference/playwright-config.md`, `reference/scenario-guidelines.md`
`before/after`, `design comparison`, `visual diff`	Side-by-side or sequential comparison recording	Comparison demo video	`reference/implementation-patterns.md`
`persona demo`, `user journey recording`	Persona-aware recording with Echo integration	Persona-tuned demo video	`reference/implementation-patterns.md`
`E2E to demo`, `test flow demo`	Convert existing test to presentation recording	Repackaged demo video	`reference/playwright-config.md`, `reference/scenario-guidelines.md`
`trace to demo`, `trace viewer demo`	Convert Playwright Trace capture to polished recording	Narrative demo from trace	`reference/playwright-config.md`
`agentic receipt`, `visual proof`, `agent recording`	Record automated agent/CI work as visual evidence	Screencast receipt video	`reference/playwright-config.md`, `reference/implementation-patterns.md`
`vision stream`, `live narration`, `onFrame`, `agent watches screen`	`onFrame` JPEG streaming to Vision Model for live agentic feedback	Vision-streamed demo + frame log	`reference/implementation-patterns.md`, `reference/playwright-config.md`
`GIF`, `inline demo`, `README embed`	Short-form recording with format conversion	GIF or short MP4	`reference/playwright-config.md`
`social media demo`, `platform-specific`	Platform-adapted recording (pacing, captions, aspect ratio)	Platform-variant video set	`reference/scenario-guidelines.md`
`quality check`, `demo review`, `VMAF`, `perceptual quality`	Post-recording validation with numeric metrics	Checklist `/97` + VMAF/PSNR/SSIM + reshoot verdict	`reference/quality-metrics.md`, `reference/checklist.md`
`GEO`, `AI citation`, `VideoObject`, `transcript schema`	AI-citation packaging	Transcript (`.vtt` + text) + VideoObject JSON-LD + chapters	`reference/geo-packaging.md`
`accessibility`, `WCAG`, `audio description`, `AD track`	WCAG 2.2 audit + AD authoring	Caption + AD + AAA verdict	`reference/captions-design.md`, `reference/voiceover-design.md`
unclear demo request	Standard demo recording	Demo video (`.webm`) + transcript + VideoObject JSON-LD	`reference/scenario-guidelines.md`

Topic	Threshold / Rule	Reference
Recording API	Primary: `page.screencast` (1.59 Stable) for precise start/stop, chapters, action overlays, and onFrame; `recordVideo` for failure receipts / full-session backup	`reference/playwright-config.md`
Resolution default	`1920×1080` baseline (was 720p); 720p for inline / GIF-only flows; always set `size` explicitly — both APIs scale to `800×800` if omitted	`reference/playwright-config.md`
HiDPI (default for external)	`deviceScaleFactor: 2` for Retina-class fonts/icons at 1080p file size; or `--force-device-scale-factor=2` Chrome flag (don't combine both). Native 4K = raise viewport+video.size to 3840×2160	`reference/playwright-config.md` (High-Fidelity Capture)
Render flags	`--font-render-hinting=none`, `--disable-gpu-vsync`, `--disable-features=PaintHolding` stabilize fonts and motion	`reference/playwright-config.md` (High-Fidelity Capture)
`screencast.quality`	`90–95` for external demos; below `80` shows visible compression	`reference/playwright-config.md`
Aspect presets	`16:9` 1920×1080 (web/YouTube), `9:16` 1080×1920 (TikTok/Reels/Shorts), `4:5` 1080×1350 (LinkedIn 2026 default), `1:1` 1080×1080 (Product Hunt)	`reference/playwright-config.md`
`slowMo` anchors	`300` quick, `500` standard, `600-700` form-heavy, `800-1000` presentation	`reference/playwright-config.md`
Typing	`pressSequentially` for on-camera forms (`50-200ms` delay); reserve `fill()` for off-camera setup	`reference/implementation-patterns.md`
Wait strategy	Locator-based waits for state; `waitForTimeout` only for pacing	`reference/scenario-guidelines.md`
Action annotations	Prefer `screencast.showActions()` / `showChapter()` before custom `showOverlay()`	`reference/implementation-patterns.md`
Output formats	`WebM` (VP9) baseline; `MP4` (H.264) for broad playback; `AV1` for high-compression archival; `GIF` only for inline/README	`reference/playwright-config.md`
3-sec hook	Open with layered (visual + text + optional audio) hook in 0–3s — TikTok/Reels drop ~70% otherwise	`reference/scenario-guidelines.md`, `reference/storytelling-archetypes.md`
Duration	`<30s` social/hook, `30-60s` standard, `60-90s` LinkedIn/YouTube optimal, `90-120s` complex; HARD CAP 120s — split or chapterize past this (engagement -40%)	`reference/scenario-guidelines.md`, `reference/storytelling-archetypes.md`
Archetypes	`30s` social hook, `60s` Product Hunt/LP/X, `90s` LinkedIn/Hero, `180s` walkthrough (chaptered); `3×45s` series for complex products	`reference/storytelling-archetypes.md`
Platform optimal length	TikTok `21–34s` (Explore-friendly), Reels `<90s`, Shorts `<90s`, YouTube long `60–180s`, LinkedIn `15–60s` B2B	`reference/scenario-guidelines.md`
Embed steps	`6-8` for email/social, `8-15` for website/docs	`reference/scenario-guidelines.md`
Captions	Open captions (burned-in) for muted-autoplay social; closed captions (`.vtt`) for accessibility / SEO; ≤17 CPS, ≤42 chars/line, ≤2 lines	`reference/captions-design.md`
Caption pipeline	GPT-4o-Transcribe (WER 4.1%) preferred; Whisper-large-v3 fallback; always human QC for product names / homophones	`reference/captions-design.md`
Multilingual default	EN + JA captions minimum for external demos; auto-translate via DeepL/GPT-4o with human review	`reference/captions-design.md`
Voiceover providers	Inworld Realtime TTS 1.5-Max (ELO 1,236 #1), ElevenLabs v3 (Audio Tags + 70+ languages), Cartesia Sonic-3 (90ms TTFA), OpenAI Realtime TTS	`reference/voiceover-design.md`
LUFS target	`-14 LUFS` (YouTube, LinkedIn), `-16 LUFS` (Web, Vimeo), TP `≤ -1 dBTP`	`reference/voiceover-design.md`
Perceptual quality	`VMAF ~90+` / `PSNR ~40dB+` / `SSIM ~0.95+` at 1080p (via `ffmpeg-quality-metrics`) as a reference line for ship-readiness — the primary reshoot/re-encode signal, judged rather than treated as an absolute cutoff	`reference/quality-metrics.md`
Accessibility	WCAG 2.2 1.2.2 (captions) Level A mandatory; 1.2.4 (live) AA; 1.2.5 (audio description) AA when visual-only content exists	`reference/checklist.md`
GEO / AI citation	Ship `.vtt` transcript + plaintext + `VideoObject` JSON-LD with chapters for every external demo (AI citation +325%, CTR +41%)	`reference/geo-packaging.md`
Quality gate	`/97` checklist score is a supporting readiness summary (rough guide: low → likely reshoot, high → likely ship); the perceptual-quality metrics above are the primary decision signal	`reference/checklist.md`
Browser engine	Chrome for Testing since v1.57; pin `channel: 'chromium'` only if reproducibility / CI memory demands it	`reference/playwright-config.md`
Agentic receipts	Prefer `@playwright/cli` with filesystem access; use MCP for sandboxed / iterative sessions; use `onFrame` JPEG stream for Vision-in-the-loop	`reference/playwright-config.md`, `reference/implementation-patterns.md`
Shared session	`browser.bind()` (v1.59 Stable) shares a browser between demo, CLI, and MCP clients via WebSocket — view dashboard with `playwright-cli show`	`reference/playwright-config.md`
Snapshot mode	v1.59 default `incremental snapshot` cuts long-session token cost vs full snapshot — beneficial for agent-driven recording	`reference/playwright-config.md`
Artifact hygiene	Clean `test-results/` after each session — `.webm` files are `2–5 MB/min` at 720p, `4–8 MB/min` at 1080p	`reference/playwright-config.md`
File naming	`[feature]_[action]_[aspect]_[date].webm` (e.g., `checkout_complete_9x16_20260515.webm`) — always rename after recording	`reference/playwright-config.md`
Demo vs AI-video	Director records real product UI with Playwright. For non-existent UI / hero films, route to AI video generators (Sora 2, Veo 3.1, Runway Gen-4.5) — these are complementary, not competitive	`reference/scenario-guidelines.md`

File	Read this when
`reference/playwright-config.md`	You need recording config, `page.screencast` setup, aspect/device settings, `slowMo`, format conversion, naming conventions, environment variables, CI, Chrome-for-Testing notes, MCP vs CLI decision, or troubleshooting.
`reference/scenario-guidelines.md`	You need story structure, pacing, 3-sec hook design, audience tuning, overlay timing, duration benchmarks, 2-min cliff handling, platform-adapted pacing, anti-patterns, or scenario review guidance.
`reference/storytelling-archetypes.md`	You are picking an archetype (30s social hook / 60s Product Hunt / 90s LinkedIn / 180s walkthrough / 3×45s series) and need duration budget, beat-by-beat blueprint, or hook templates.
`reference/implementation-patterns.md`	You need Playwright scene patterns, `page.screencast` API recipes, `onFrame` Vision streaming, auth setup, overlays, B-roll, before/after comparisons, AI narration, persona-aware demos, ARIA validation, or complete demo examples.
`reference/quality-metrics.md`	You are running the `quality` recipe and need VMAF/PSNR/SSIM thresholds, `ffmpeg-quality-metrics` invocation, LUFS verification, reshoot decision logic, or CI integration.
`reference/geo-packaging.md`	You are running the `geo` recipe and need transcript packaging, VideoObject JSON-LD schema, chapter cue mapping, AI citation rules, or YouTube/web embed metadata.
`reference/handoff-formats.md`	You need point-to-point handoff templates for Forge/Voyager/Vision/Echo → Director or Director → Vitrine/Quill/Growth outside Nexus Hub Mode.
`reference/checklist.md`	You need pre-recording, post-recording, pre-delivery, quick-check, or `/97` quality-score gates.
`reference/voiceover-design.md`	You are running the `voiceover` recipe and need SSML pacing (150-160 WPM), voice selection (Inworld 1.5-Max / ElevenLabs v3 / Cartesia Sonic-3 / OpenAI Realtime), Audio Tags, de-essing, breathing pauses, or -14/-16 LUFS normalization.
`reference/captions-design.md`	You are running the `captions` recipe and need SRT/WebVTT authoring rules, GPT-4o-Transcribe pipeline, WCAG 1.2.2 + 1.2.5 timing, reading speed (≤17 CPS), or forced/closed/open/burned-in variant selection.
`reference/thumbnail-design.md`	You are running the `thumbnail` recipe and need per-platform variants (YouTube/LinkedIn/X/Product Hunt), A/B variant patterns (face-first vs product-first for B2B/dev tools), or contrast/typography rules.
`_common/OPUS_5_AUTHORING.md`	You are sizing the demo package, deciding adaptive thinking depth at scenario/overlay design, or front-loading purpose/audience/duration at PLAN. Critical for Director: P3, P5.
`reference/autorun-schema.md`	You are emitting the AUTORUN `_STEP_COMPLETE` block — Director-specific Output/Next schema.
`_common/CODE_QUALITY.md`	You are about to write or modify code — the 7-axis quality bar (SLD/SEC/RDB/MNT/TST/PRF/SCL), its sourced anti-patterns, and the `CODE_QUALITY_GATE` emitted before done.

director

Install options

Review the source files

Director

Trigger Guidance

Core Principles

Director

Trigger Guidance

Core Principles

Core Contract

Boundaries

Always

Ask First

Never

Workflow

Recipes

Subcommand Dispatch

Output Routing

Critical Constraints

Output Requirements

Collaboration

Reference Map

Operational

AUTORUN Support

Nexus Hub Mode

director

Source facts

Install options

Review the source files

More from this repository

More from this repository

Director

Trigger Guidance

Core Principles

Director

Trigger Guidance

Core Principles

Core Contract

Boundaries

Always

Ask First

Never

Workflow

Recipes

Subcommand Dispatch

Output Routing

Critical Constraints

Output Requirements

Collaboration

Reference Map

Operational

AUTORUN Support

Nexus Hub Mode