skills.rest
Ceeon
CeeonCOMMUNITY
Explore all skills by this author →
GitHub

chengfeng-visual

Overlay cue-bound HTML annotation and animation layers on edited talking-head screen recordings.

3.0k|383|Updated Jan 14, 2026
Search Tags:#video editing#GSAP#Screen Recording#html overlay#SVG animation#Storyboard#subtitle cues
One-click install
npx skills add https://github.com/Ceeon/videocut-skills --skill chengfeng-visual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chengfeng-visual
Source: https://github.com/Ceeon/videocut-skills/tree/main/plugins/chengfeng-videocut/skills/chengfeng-visual
Command: npx skills add https://github.com/Ceeon/videocut-skills --skill chengfeng-visual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, and includes references (resource) and assets (resource) components.

What problem does it solve?

Adding visual emphasis to edited Chinese talking-head videos usually means manual motion graphics work that breaks whenever the edit changes. This Skill places HTML overlay layers (highlight circles, full-screen Xiaohei-style animations, zoom-ins) on top of screen recordings, bound to subtitle cues so layers automatically follow re-edits instead of drifting out of sync.

Core Features & Use Cases

  • Cue-bound overlay layers: Layers attach to subtitle cues via the videocut CLI (visual add --cues), never to raw timestamps, so edits to the cut automatically reposition every layer.
  • Four-step evidence-driven workflow: Segment by transcript semantics, extract 8-12 frames per segment, measure motion windows via pixel diffs, then build and place modules — preventing annotations from covering real evidence or floating over scrolling content.
  • Measured, not eyeballed geometry: Circle coordinates come from grayscale pixel scans, interaction moments from frame-to-frame pixel deltas, and zoom is capped at 1.6x to avoid blurry upscaling.
  • Registered animation styles: Full-screen animations use the Xiaohei hand-drawn SVG/GSAP style registry with official brand glyphs, driven frame-by-frame by the player through videocut:seek messages.
  • Use Case: After cutting a tutorial video where the host demos a dashboard, use this Skill to circle the exact UI element being named at each moment, insert a Xiaohei animation over a blank conceptual segment, and preview every layer frame-by-frame before export.

Quick Start

Ask the agent to storyboard visuals for the current project so it reads the subtitles, extracts frames, measures motion windows, and adds annotation layers for your review.

Frequently Asked Questions about chengfeng-visual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add highlight circles to a screen recording video?▼

Extract 8-12 frames per segment with the visual frame command, locate the target element via grayscale pixel scanning rather than eyeballing, then add an HTML overlay module bound to the relevant subtitle cues. The layer follows the words, so later edits reposition it automatically.

How do I keep video annotations in sync after re-editing?▼

Bind annotation layers to subtitle cues instead of timestamps. The product converts cues to word IDs internally, so when the cut changes, every layer shifts with the spoken words and never attaches to deleted or moved content.

When should I use zoom versus annotation overlays in tutorial videos?▼

Default to no zoom, since upscaling a 960x720 recording looks visibly blurry. When zoom is unavoidable, cap it at 1.6x with a centered 62.5% region; for small unreadable text, guide the eye with a circle or re-record at higher resolution instead.

Why does my transparent HTML overlay render as a white box?▼

Chromium paints an opaque white backing when the iframe lacks a declared color scheme matching the dark workbench. Add `:root { color-scheme: dark }` and set the annotation module background to transparent to restore see-through layering.

What are the limitations of GSAP timelines in player-driven video overlays?▼

Modules must be seek-driven, not self-playing: avoid drawSVG (paid plugin), avoid .from() which leaves dirty state on seek-to-zero, set lazy:false, and never use wall-clock time. All timing comes from videocut:seek messages sent each animation frame.

Related Skills

Explore More Design & Creative Skills→
broomvabroomva
3

video-cut

Edit raw video footage into finished cuts using local transcription and EDL-based rendering.

Community
Advanced
Z43LZ43L

hyperframes

Render HTML and GSAP motion graphics into deterministic MP4/WebM videos.

Community
Advanced
paul-hosking-cdw-compaul-hosking-cdw-com

preview-import

Validate imported HTML rendering against the original page during local preview.

Community
Intermediate
ShawhinTShawhinT
40

animation-builder

Generate HTML/CSS/SVG motion graphics and render them into MP4 B-roll overlays.

Community
Intermediate