Home / All Skills / Content & Media Creation / youtube-intro-outro
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · iart-ai/youtube-video-skills

youtube-intro-outro

This skill should be used when the user asks to "make a YouTube intro", "create a channel intro", "build a logo sting/bumper", "design an outro / end screen / end card", "add subscribe and next-video cards", "make an intro animation", "build a reusable intro template", or "sync the logo reveal to an audio sting". Covers the 3-5s branded intro, the last-20s end-screen outro inside YouTube's element safe zones, timing conventions, audio-sting sync, and a swap-the-brand template.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author iart-aiGitHub iart-ai/youtube-video-skills ↗Stars 3License MIT（仓库根 LICENSE 为 "MIT License / Copyright (c) 2026 iart.ai"；GitHub API spdx_id = MIT；.claude-plugin/plugin.json 亦声明 "license": "MIT"）Commit f3df381d65
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Two hard rules are explicitly designated as platform constraints rather than aesthetic choices: intros must be strictly 3–5s, and the logo readable moment must hit at 1–2s, as exceeding these limits demonstrably degrades retention in practice.

skills/youtube-intro-outro/SKILL.md
1. **Keep the intro 3-5s, the logo hit 1-2s.** Anything longer than 5s causes measurable viewer drop-off, which hurts the video in the algorithm.
What is happening here: Reframing intro animation length from a matter of taste into a retention cost issue, compressing the intro into a quick confirmation rather than a standalone artistic piece.

The second hard rule also stems from platform mechanics: end-screen elements are only permitted during the final 5–20s, and total video length must be ≥25s.

skills/youtube-intro-outro/SKILL.md
YouTube only allows end-screen elements in the final 5-20s, and the video must be at least 25 seconds long.
What is happening here: Outro duration (~20s sustained plate) is not a stylistic preference, but the baseline requirement to provide a home for clickable elements; if a video is under 25s, end screens are entirely unavailable.

The logo sting is structured into three beats—windup → impact → settle—requiring the brand mark to align exactly with the frame of the audio's strongest transient.

skills/youtube-intro-outro/SKILL.md
The brand mark must land exactly on the sound's impact frame, not near it.
What is happening here: Anchoring high production value to a single constraint (exact audio-visual frame alignment). The reference also provides the methodology to locate transients on a waveform and convert them via IMPACT = Math.round(t × fps).

The snap effect is generated using a spring overshooting from 1.18 to 1, paired with a 6-frame white flash decay.

skills/youtube-intro-outro/SKILL.md
`spring` overshooting from 1.18→1 *is* the snap; the white `flash` decaying over 6 frames sells the impact.
What is happening here: Replicating a premium look through two adjustable parameters (overshoot starting point and flash decay frame count); impact defaults near 0.8s, aligned with the sting transient.

The core of the outro layout is a bipartite split: YouTube interactive elements occupy the right two-thirds, while custom branding is restricted to the left one-third.

skills/youtube-intro-outro/SKILL.md
YouTube's clickable elements live on the **right two thirds**; keep your own branding, channel name, and any face-cam in the **left third**.
What is happening here: Resolving where most outros fail—placing logos or text where YouTube overlays the subscribe button. The skill eliminates collisions upfront via spatial partitioning and native dimensions.

Native element dimensions are hardcoded (subscribe circle 294×294, next-video card 615×345), with dashed bounding boxes plotted in the layout accordingly.

skills/youtube-intro-outro/SKILL.md
| Next-video card (thumbnail) | 615×345 | upper-right or center-right |
What is happening here: Composing against placeholder boxes first, then aligning real elements within YouTube Studio. The reference provides a 16:9 ASCII coordinate map and the empirical insight that "max 4 elements; 1 card + 1 subscribe" achieves the highest CTR.

Guides appear only during preview builds and must be stripped from final exports, leaving the right side deliberately clear.

skills/youtube-intro-outro/SKILL.md
Ship the dashed guides only in a preview build; the final render drops them, leaving a clean plate whose right side is intentionally quiet.
What is happening here: Decoupling design aids from production deliverables; the reference uses a prop toggle to handle both outputs from a single component.

Both compositions share a unified brand prop (name/logo/sting/bg/fg/accent) with zero hardcoded branding information.

skills/youtube-intro-outro/SKILL.md
Both compositions read a single `brand` prop — no hardcoded names, colors, logos, or audio.
What is happening here: Reducing brand swapping to updating a single JSON file; the reference details the brand schema and batch iteration (`for f in brands/*.json` → generating intro + outro pairs per brand).

Verification requires dedicated inspection of the impact frame (logo at full scale + white flash decaying) and mandates removing dashed guide boxes in final renders.

skills/youtube-intro-outro/SKILL.md
Verify the **impact frame** explicitly (logo snapped to full, white flash decaying) — the sting must land *on* it, not near it.
What is happening here: Treating the most precision-sensitive step (audio-visual frame sync) as an isolated acceptance criterion rather than a casual check across three static frames.

2Core Capabilities

013–5s branded intro (three beats: windup / impact / settle, spring overshoot + white flash, sting mix-in)
02Outro / end-screen plate: left 1/3 brand area + right 2/3 blank space (including toggleable dashed placeholder boxes)
03Element coordinate and sizing specs (16:9 coordinate map, subscribe circle 294×294, video card 615×345, max 4 elements, highest CTR = 1 card + subscribe)
04Audio transient alignment method: locate the strongest transient on a waveform → calculate IMPACT frame number (or conversely trim audio)
05CSS/GSAP logo sting alternative (Remotion-free fallback implementation)
06Brand templating + batch processing: single brand.json drives intro/outro, generating multi-channel deliverables in one loop
07Shorts (9:16) variant guidelines: native end screens are unavailable, requiring subscribe/watch-next visuals baked directly into frame alongside spoken CTAs
08Delivery-verification loop: windup / impact / settle and outro plate stills + probe-mp4 spec assertions + guide removal for production exports

3External Dependencies

KindDependency / Endpoint
clinpx remotion still / render / compositions
cliscripts/contact-sheet.sh + scripts/probe-mp4.sh（仓库根共享验证工具箱，SKILL.md 明列）
cli批量循环：`for f in brands/*.json` + basename 派生输出名（reference §7）
packageffmpeg / ffprobe（系统依赖）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Local script or command execution: (Verification loop explicitly specified in SKILL.md) `npx remotion still Intro out/i-{windup,impact,settle}.pn
  • 网络端点: External network access declaration: `npx remotion …`: first execution fetches packages and CLI via official npm channels (registry.npmjs.org, domain handled by npm, not hardcoded in source)
  • 本地工作目录: File I/O and artifact generation: Remotion projects built by agent per this skill and out/intro.mp4, out/outro.mp4 (batch outputs to out/<brand>
Audit Notes: Three-part self-proof: ① Assessment scope = skills/youtube-intro-outro/ (find confirms only SKILL.md, references/intro-outro.md, and an empty 0-byte README; zero scripts, zero assets); ② Internal directory behavior = local reading of assets (logo/sting) and local writing (Remotion project, out/*-intro.mp4, out/*-outro.mp4, stills, sheet.png) + local CLI (`npx remotion`; ffmpeg/ffprobe executed via repo-root scripts/), with 0 hits for `process.env` / `api[_-]?key` / `token` / `cookie` / `https?://` across skills/; ③ Sole network surface is fetching packages via official npm channels (remotion / @remotion/*), matching existing platform Blue-tier precedents (hyperframes, general-video, motion-background). Not escalating to Yellow/Orange: no fixed public endpoint queries, no scraping, zero credential/env-var reads, zero external asset dispatch—this skill does not integrate with the YouTube API, nor does it upload content to the platform (publishing is handled manually by the user in Studio). Not Red tier: no TLS downgrades, no sandbox evasion, no anti-automation circumvention, no arbitrary code execution surface. Note (does not affect tiering): platform thresholds (3-5s intro, ≥25s total length, end screen restricted to last 5-20s) are external rules; the skill only provides prompts and probe-mp4 verifiable metrics (duration/specifications), with compliance ultimately resting with the user.

5Second-Pass Verification

  • [ok] 平台时间常数在 SKILL.md 与 reference 是否一致（防一手数据两处不同） — SKILL.md：intro 3-5s、logo hit 1-2s、end-screen 只允许最后 5-20s、视频 ≥25s、outro plate 保持 ~20s；reference 表："logo hit 1-2s"、"Whole intro | 3-5s max"、"End-screen window | last 5-20s"、"Outro plate hold | ~20s"、"Minimum total video length | 25s"。两处逐值对应，无矛盾。
  • [ok] 元素尺寸与数量上限是否两处一致 — SKILL.md 给 Subscribe/channel circle 294×294、Next-video card 615×345、Playlist/link card 294×294，并在输出清单写「Up to 4 end-screen elements planned (1 video + 1 subscribe is the highest-CTR layout)」；reference 元素表同值（615×345 / 294×294 / 294×294）并写 "| Max elements | 4 | highest CTR layout = **1 video card + subscribe**, nothing else |"。一致。
  • [discrepancy] Shorts（9:16）场景的覆盖是否存在缺口（第一遍只读 SKILL.md 会漏） — SKILL.md 的硬规则 2 是无条件表述：「The outro must be ≥20s of held, quiet layout, and the video ≥25s total.」并未提 Shorts 例外；而 reference §1 明确写 "for Shorts use a 2-3s end card and a verbal CTA instead of native end-screen elements (Shorts do not support them)"，§5 另设「9:16 (Shorts) note」。结论：只读 SKILL.md 的 agent 可能给一条 45 秒的 Short 设计 20 秒 outro，直接吃掉整片——这是对 pin commit 有效的真实覆盖缺口（信息存在于 reference，未上提到 SKILL.md 的硬规则）。
  • [unlocatable] 「Anything longer than 5s causes measurable viewer drop-off」是否有据 — SKILL.md 与 reference 都以肯定语气给出留存影响（"retention drops measurably"），但仓库内无引用来源、无数据集、无链接；本次为只读侦查，不验证该断言，仅记为文档声明。平台机制部分（5-20s 窗口、≥25s 门槛）属 YouTube 公开规则，可信度高但仍未附官方链接。
  • [ok] brand prop 是否真的无任何硬编码（防「模板化」空口宣称） — SKILL.md 的 LogoSting 与 EndScreen 组件里，颜色/字体/logo/sting 全部取自 `brand.bg` / `brand.fg` / `brand.accent` / `brand.logo` / `brand.sting`（仅字体族在示例里写 "700 56px Inter" 这类样式串）；reference §7 定义 Brand 类型与 brands/pixelforge.json 示例，并强调 "Keep fonts, sizes, timing, and layout fixed in the components — only `brand.json` changes." 与 SKILL.md 的宣称一致。
  • [ok] impact 帧对齐方法是否可操作（而非只喊「要对齐」） — reference §4 给出四步：「Open the sting in any waveform view… The impact is the tallest transient」「Read its time in seconds, e.g. 0.78s」「Set `IMPACT = Math.round(0.78 * fps)` and make the logo's `opacity`/`scale` snap key fall on that frame.」「If you can't move code, instead trim the audio so its transient sits at your fixed `IMPACT` (e.g. 0.8s)」。方法具体、可执行，且给了代码侧与音频侧两种收敛方向。
  • [ok] 验收与交付是否覆盖「guides 不得进成片」 — SKILL.md 写 "Ship the dashed guides only in a preview build; the final render drops them"，verify 段亦要求 "Drop the dashed end-screen guides for the final render; verify the right two-thirds is intentionally quiet."；reference §6 用 prop 开关实现同一组件的两种输出。纪律 + 机制 + 验收三处齐备（但仍是纪律而非强制渲染开关）。

6Verdict & Scenarios

  • Transforms intro/outro creation from an aesthetic discussion into platform constraint management: 3-5s, 1-2s, final 5-20s, and ≥25s are enforced as hard rules with explicit rationale
  • Distills high-end polish into one core constraint and two tunable values: logo aligned with sting transient frame, spring 1.18→1 overshoot, and a 6-frame white flash
  • Partitions outro layout by platform UI (left 1/3 brand, right 2/3 reserved for YouTube) with native-sized placeholder bounding boxes, preventing layout conflicts at design time
  • Thoroughly templated: a single brand prop powers both compositions, supporting batch rendering across multiple brands while preserving uniform structure across 20+ channels
  • Acceptance isolates the frame-critical impact step and enforces stripping dashed guides—preventing internal design aids from leaking into production deliverables
  • Reference covers boundary conditions: CSS/GSAP Remotion-free variants, Shorts 9:16 exceptions, transient frame calculation methods, and brand schema
    • Best for: Best for: YouTubers or channel managers building one-off branded intro and end-screen templates to be reused across channels simply by swapping brand.json; teams needing to guarantee that YouTube interactive elements never occlude custom graphics (the most failure-prone yet quantifiable step); workflows comfortable reading audio waveforms and conducting isolated visual verification of the impact frame.
    Not for: Not suitable for: ① Shorts-only creators copying Hard Rule 2 directly (consult the reference's Shorts exception first to use 2-3s end cards + spoken CTAs instead); ② Anyone seeking automated end-screen element placement—positioning in YouTube Studio remains a manual step; ③ Complex brand systems requiring simultaneous multi-language or multi-aspect-ratio rendering (this skill covers 16:9 intro/outro, with 9:16 limited to guidance notes); ④ Scenarios expecting automatic brand asset adaptation (auto-cropping logos or auto-editing audio stings)—assets must be production-ready; ⑤ Workflows requiring platform API publishing or data scraping (this skill does not interface with the YouTube API).
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload youtube-intro-outro.tar.gz
    sha256: 9f3a594d22ab4694…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit f3df381d65.