Visuals (Storyboard)

This is a standalone task, not part of a workflow. Do it whenever the user requests, and you can come back to it after editing is revised.

There are only two prerequisites: the edit list and subtitles already exist (layers are placed according to subtitle screens, timings are calculated from the edit list).

text

Requires   edit-list.json, transcript.json, subtitles.json
Outputs    visuals.json + modules/<sequence-name>/index.html

Stop once done, do not instruct the user on the next step.

First read and execute the Business Skill Phase Contract. Hard rules for module writing are in Module Contract, judgment rules are in Visual Judgment.

0. Readiness

First execute the "readiness check" from Check Updates —— whether skills are up-to-date and the Runtime is compatible; the plugin root is also located there (replace

<plugin root>

in all commands in this document with that literal path). Only proceed if the result is "ready"; if it's "new session required" or "stop", follow its instructions (including the "prohibit custom alternative interfaces" ban), business Skills do not include their own environment logic.

If the readiness result is

runtime.kind=desktop-managed

, directly reuse the stable CLI installed in the desktop App and the same

launchd/windows-task

service; do not parse the Electron path, install additional dependencies, or start a second Runtime.

Commands

bash

node "<plugin root>/scripts/ensure-running.cjs" --json
node "<plugin root>/scripts/videocut-cli.cjs" visual get   <project> --json
node "<plugin root>/scripts/videocut-cli.cjs" visual frame <project> --cues sub-0004,sub-0005 --count 12 --out <dir> --json
node "<plugin root>/scripts/videocut-cli.cjs" visual add   <project> --module modules/01-xx/index.html --cues sub-0004,sub-0005 [--zoom x,y,w,h] [--id vis-0001] --json
node "<plugin root>/scripts/videocut-cli.cjs" visual remove <project> --id vis-0001 --json

ensure-running

must first verify that canonical 5190 belongs to the managed service of the current platform; if it fails, pass through the result and stop, do not fall back to foreground or select a custom port.

Bind layers to subtitle screens (

--cues

), the product converts them to word IDs automatically —— layers can never be bound to words that weren't spoken, and layers will move automatically if editing is changed. Do not store timestamps in seconds.

Four Steps, No Skipping

text

① Define task via text    Read subtitles.json, segment by semantics, and answer for each segment:
                         Is it a tutorial/demonstration/proof, or concept/logic/transition?
② Check frames for visuals    Use visual frame to extract 8-12 frames, and actually check them visually.
                         In practice, 2 out of 12 segments had their text-based predictions overturned by visuals —— this step is not a formality
③ Measure motion windows    Calculate pixel differences between adjacent frames to find moments of scrolling/switching/operations.
                         Layers only cover stable windows, and annotations exit before the screen starts moving
④ Create and place layers    Write modules → visual add → verify layer by layer in preview

Judgment Rules for Step ②

text

Visuals exactly match what was mentioned     → Annotation: Circle the area, circle where the corresponding word is spoken. Do not cover real evidence
Weakly related/blank visuals       → Black animation: Full-screen white background, created from the style library
Visuals are clear enough on their own      → Do nothing. This is the most common correct answer (4 out of 13 segments required no changes in practice)

Outputs of Step ③ are numerical values, not subjective judgments

text

Annotation coordinates      Calculated via pixel statistics (grayscale scan to find text lines), no visual estimation —— visual estimation can have errors over 50px
Interaction moments      Find sudden changes via frame-by-frame pixel differences (one case jumped from 4 to 335 in practice), annotations must finish exiting 0.2s before this moment
Stable windows      The start often has scrolling (the user is looking for content), layers start binding from the cue where the screen stabilizes

Think Before Using Zoom

text

Zoom is disabled by default.   960x720 screen recordings become blurry when zoomed, and users will notice immediately
When zoom is absolutely necessary     ≤1.6x magnification, select a 62.5% square area centered —— complete composition > reading small text
Text is too small to read   Use annotations to guide attention; if reading is truly necessary, the solution is re-recording in high resolution, not zooming

Review Cycle

Module directories are named with sequence numbers (

01-daily-report

05-anim-task-split

), the directory name is displayed on the timeline track, and you only modify the layer the user specifies, leaving others unchanged.

Two rules for modifying layers, each corresponding to a real incident:

text

Always check the module when modifying layers     After narrowing/extending a layer, hardcoded relative timings in the module will not update ——
                the exit timing of annotations may fall after the layer ends, causing them to never appear
Check pixels during acceptance      Check visuals via screenshots, do not check DOM attributes. An iframe with "correct visibility toggle"
                once physically did not appear on the screen —— all attributes were correct, but the screen was blank

Prohibited Actions

Do not skip frame extraction and motion window measurement (two mistakes were made: covering real evidence, annotations hanging over scrolling content)
Do not add changes to every segment —— filling the screen is not the goal, doing nothing is a common correct answer
Do not store timestamps in seconds, do not estimate coordinates visually, do not add darkening to white background pages
Do not use placeholder images when there is no real content
Select styles from the registry, do not create them arbitrarily
Use official glyphs for brand icons, do not draw substitutes by hand (X was drawn with two crossed lines once and caught by the user). If not available in the local index, take monochrome official glyphs from simple-icons (the black-and-white style matches perfectly), save the original svg in the module directory for reference; the same brand must have the same appearance in the same video

chengfeng-visual

NPX Install

Tags

SKILL.md Content (Chinese)

Visuals (Storyboard)

0. Readiness

Commands

Four Steps, No Skipping

Judgment Rules for Step ②

Outputs of Step ③ are numerical values, not subjective judgments

Think Before Using Zoom

Review Cycle

Prohibited Actions