Communitygithub.com

Agentchengfeng/chengfeng-videocut-skills

Ajoute des visuels à des enregistrements d'écran de tutoriels : superpose des calques HTML (annotations, animations plein écran, zoom) synchronisés avec les sous-titres, pilotés image par image par le lecteur, consultables directement dans l'aperçu. Utilisé lorsque l'utilisateur demande des storyboards, des visuels, des animations, des annotations, des B-rolls ou la conception de séquences. Ne pas utiliser pour le montage, le sous-titrage, les coupes physiques ou le rendu final.

Qu'est-ce que chengfeng-videocut-skills ?

Ce skill est spécialisé dans l'ajout de calques visuels (HTML) à un enregistrement d'écran existant, en se basant strictement sur les sous-titres et le journal des modifications (edit-list.json, transcript.json, subtitles.json). Il ne remplace pas le montage vidéo traditionnel ni le rendu final : il produit un fichier visuals.json et des modules HTML individuels (modules/<numéro-nom>/index.html) qui seront superposés au lecteur. Le flux de travail est strictement séquentiel : ① lire les sous-titres pour déterminer la nature de chaque segment (tutoriel/démonstration vs concept/transition), ② extraire 8 à 12 images de chaque segment pour vérifier visuellement les suppositions (étape essentielle, les images contredisent parfois le texte), ③ mesurer les fenêtres de mouvement par différence de pixels entre images consécutives (pour identifier les défilements, changements d'écran, actions de l'utilisateur) et ne placer les calques que sur les fenêtres stables, ④ écrire le module HTML et l'ajouter via la CLI. Les annotations sont positionnées à l'aide de coordonnées pixel calculées (pas d'estimation visuelle), les animations plein écran sont utilisées pour les segments faiblement liés ou vides, et l'absence d'ajout est la réponse la plus courante (13 segments sur 4 restent sans calque). Le zoom est limité à 1,6x maximum et utilisé uniquement si nécessaire. Les révisions se font par numéro de module, avec deux règles strictes : vérifier que le calque ne dépasse pas la fenêtre stable (les temps absolus dans le module peuvent devenir invalides) et valider par capture d'écran (pas en inspectant les propriétés DOM, qui peuvent être correctes mais le calque physiquement invisible). Le skill s'appuie sur le CLI videocut-cli.cjs et le script ensure-running.cjs (port 5190). Il respecte un contrat de workflow métier et un contrat de module. Les icônes de marque sont issues de simple-icons (monochromes officiels), jamais dessinées à la main. Le skill ne doit pas être utilisé pour le sous-titrage, le montage, les coupes physiques ou le rendu final.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Agentchengfeng/chengfeng-videocut-skills/tree/HEAD/plugins/chengfeng-videocut/skills/chengfeng-visual

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Visuels (Storyboard)

C'est une tâche, pas une étape d'un flux. Elle s'exécute quand l'utilisateur la demande ; après une modification du montage, on peut y revenir plus tard.

Prérequis uniquement : le journal et les sous-titres existent (les calques sont placés selon la plage de sous-titres, les temps sont calculés à partir du journal).

Nécessite   edit-list.json, transcript.json, subtitles.json
Produit     visuals.json + modules/<numéro-nom>/index.html

Une fois terminé, on s'arrête, sans diriger l'utilisateur vers la prochaine étape.

Lire et exécuter d'abord le Contrat de phase du workflow métier. Les règles strictes pour l'écriture des modules sont dans le Contrat de module, les règles de décision dans Jugement visuel.

0. Prêt

Exécuter d'abord la « Vérification de préparation » de Vérification des mises à jour — vérifier que les skills sont à jour et que le Runtime est compatible ; la racine du plugin est également localisée ici (dans les commandes de ce document, <racine-plugin> est remplacé par ce chemin littéral). Continuer seulement si « Prêt » ; si « Nouvelle session nécessaire » ou « Stop », exécuter les instructions correspondantes (y compris l'interdiction « Interdiction de fabriquer une interface de remplacement »), le Skill métier n'intègre pas sa propre logique d'environnement.

Si le résultat de la préparation est runtime.kind=desktop-managed, réutiliser directement le CLI stable installé de l'application de bureau et le même service launchd/windows-task ; ne pas analyser le chemin d'Electron, installer des dépendances supplémentaires ou lancer un second Runtime.

Commandes

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

ensure-running doit d'abord prouver que le port canonique 5190 appartient au service géré de la plateforme actuelle ; en cas d'échec, transmettre l'erreur et s'arrêter, sans revenir au premier plan ni choisir un port.

Le calque est lié à la plage de sous-titres (--cues), le produit les convertit en ID de mots — un calque ne peut jamais être lié à des mots que personne ne prononce, si le montage change, le calque se déplace tout seul. Ne pas stocker de secondes.

Quatre étapes, sans saut

① Texte → Tâche        Lire subtitles.json, segmenter sémantiquement, répondre pour chaque segment :
                       Tutoriel/Démonstration/Preuve, ou Concept/Logique/Transition ?
② Extraire des images  visual frame extrait 8 à 12 images, regarder vraiment avec les yeux.
                       En pratique, 2 segments sur 12 ont contredit la prédiction textuelle par les images — cette étape n'est pas une formalité
③ Mesurer la fenêtre    Différence de pixels entre images adjacentes pour identifier les moments de défilement/commutation/action.
  de mouvement         Le calque ne couvre que la fenêtre stable, se retire avant que l'action ne commence
④ Faire et placer      Écrire le module → visual add → vérifier calque par calque dans l'aperçu

Règles de jugement pour ②

L'image correspond exactement à ce qu'il dit   → Annoter : entourer, entourer le mot qu'il dit où il le dit. Les vraies preuves ne doivent pas être masquées
Image faiblement liée/vide                     → Animation plein écran : fond blanc, à partir de la bibliothèque de styles
L'image est suffisamment claire par elle-même  → Ne pas toucher. C'est la réponse correcte la plus courante (en pratique, 4 segments sur 13 restent sans calque)

Le résultat de ③ est numérique, pas une impression

Coordonnées du cercle   Calculées par statistiques de pixels (scanner les lignes de texte en niveaux de gris), interdiction d'estimation visuelle — l'estimation visuelle a déjà eu une erreur de 50 px
Moments d'interaction    Différence de pixels image par image pour trouver les sauts brusques (en pratique, un saut de 4 à 335), le cercle doit disparaître 0,2 s avant le début de l'action
Fenêtre stable          Il y a souvent du défilement au début (il cherche le contenu), le calque commence à la plage de sous-titres où l'image est stable

Zoom, réfléchir avant d'utiliser

Par défaut, pas de zoom.   Un enregistrement d'écran 960×720 devient flou en zoomant, l'utilisateur le verra immédiatement
Quand le zoom est inévitable   ≤1,6×, zone de 62,5% au carré centrée — la composition complète prime sur la lisibilité des petits caractères
Caractères trop petits   Utiliser un cercle pour guider le regard suffit ; si vraiment besoin de lire, la réponse est de réenregistrer en haute résolution, pas de zoomer

Cycle de révision

Le répertoire des modules est nommé par numéro (01-daily-report, 05-anim-task-split), la piste temporelle affiche le nom du répertoire, l'utilisateur signale le numéro et vous modifiez ce calque-là, sans toucher aux autres.

Deux règles strictes pour la modification des calques, chacune correspondant à un incident réel :

En modifiant un calque, vérifier le module   Après avoir réduit/allongé un calque, les instants relatifs codés en dur dans le module ne changent pas —
                                             l'instant d'apparition du cercle peut tomber après la fin du calque et ne jamais s'afficher
Validation par pixels                       Capturer l'image et regarder, ne pas inspecter les propriétés DOM. Un iframe avec « visibilité inversée correcte »
                                             était physiquement hors de l'image — propriétés parfaites, écran vide

Ce qu'il ne faut pas faire

  • Ne pas sauter l'extraction d'images et la fenêtre de mouvement pour aller directement à la création (chaque type d'erreur a été commis une fois : masquer une vraie preuve, cercle flottant pendant un défilement)
  • Ne pas ajouter quelque chose à chaque segment — remplir n'est pas un objectif, ne rien ajouter est une réponse courante
  • Ne pas stocker de secondes, ne pas estimer les coordonnées visuellement, ne pas ajouter d'ombre sur un fond blanc
  • Sans contenu réel, ne pas utiliser d'images de substitution
  • Le style est choisi depuis le registre, ne pas en inventer
  • Les icônes de marque utilisent les glyphes officiels, interdiction de les dessiner à la main (le X a été dessiné avec deux lignes croisées, l'utilisateur l'a repéré). Si l'index local ne les contient pas, prendre le glyphe officiel monochrome depuis simple-icons (le style noir et blanc correspond parfaitement), enregistrer le SVG original dans le répertoire du module pour référence ; dans une même vidéo, une même marque ne doit avoir qu'un seul aspect.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

Agentchengfeng/chengfeng-videocut-skills

剪辑环境的唯一管理者:就绪检查(skills 是否最新 → Runtime 是否配套)、Skills 更新激活、Runtime 安装与体检。用户说检查更新、安装剪辑环境、装播放器、检查剪辑环境、剪辑环境就绪了吗、配置转录凭证时使用;业务 Skill(剪口播/字幕/画面/导出)第 0 步也引用本 Skill 的就绪检查。不用于剪辑、字幕、画面、导出本身或项目数据迁移。

Agentchengfeng/chengfeng-videocut-skills

剪辑中文口播原素材:逐词转录、词典修字出修字表、五轮扫描找口误与重复、汇总表与重复句子表、打开 Studio 让用户复核、复盘沉淀用户偏好与词典。只产出一份已复核的删词账本,不切媒体、不做字幕、不做分镜动画。用户说剪口播、处理口误、生成口播基础素材、继续剪口播,或确认卡回传 action=return_cut_review 时使用。不要用于执行物理剪切、导出剪后视频、单独安装、单独打开工作台或口播分镜成片。

Agentchengfeng/chengfeng-videocut-skills

把剪好的口播烧成一个成片文件:账本切片段、推近、字幕、HTML 画面层,一次全部烧进 mp4。用户说导出、出成片、烧字幕、渲染、导出视频、生成最终文件时使用。不要用于生成删词候选、写字幕、做画面动画。

Agentchengfeng/chengfeng-videocut-skills

整理、脱敏并上报 chengfeng-videocut 的 GitHub Bug。用户说上报 Bug、反馈剪口播问题、提交 GitHub Issue、这个问题告诉开发者,或要求继续提交已预览的 Bug 草稿时使用。不要用于功能建议、普通排错、代码提交或未获用户确认的自动上报。

Agentchengfeng/chengfeng-videocut-skills

给剪好的口播做字幕:直接用已有的逐词稿加账本算出剪后时间(不必导出、不必重新转录)、用词典和作者文稿改写听错的专名、按句子分屏、在 Studio 里逐屏复核。用户说做字幕、加字幕、改字幕、重新分屏、字幕不对时使用。不要用于删词剪辑、物理剪切、分镜动画或成片渲染。

Agentchengfeng/chengfeng-videocut-skills

操作 chengfeng-videocut 剪辑工作台的已有工程,通过 Runtime CLI 查工程与词句位置、添加或替换画面覆盖层、移除画面、删除明确指定的词句或片段、拆分裁剪移动已有片段、调整画布比例并回读核验。用户说插入片段、删掉这句、移除动画、换个画面、调整顺序或管理时间线时使用;先区分画面覆盖与主轨顺延插入,不负责自动判断口误、创作动画、制作字幕、导出或排查安装故障。

Agentchengfeng/chengfeng-videocut-skills

Create Ian Xiaohei-style HTML/SVG motion illustrations for Chinese articles, scripts, storyboard scenes, workflow explanations, concept metaphors, and short video visual aids. Use when the user asks for 小黑 SVG、漫画感 HTML、分层 SVG 动效、把小黑生图做成 HTML/SVG、可编辑矢量动效、口播流程动画、手绘漫画动效、正文配图动画, or wants a Xiaohei illustration style adapted into controllable HTML/SVG/GSAP output instead of raster image generation.

Skills associés