Video Add Content Cards
Convierte momentos semánticos aprobados en una superposición coherente de gráficos HyperFrames. Utiliza evidencia compartida y la línea de tiempo canónica; no vuelvas a transcribir ni a reanalizar la fuente dentro de esta habilidad.
Dependencias
/video-understand es un requisito previo. Ejecútalo primero para que las tarjetas utilicen evidencia semántica validada y la línea de tiempo canónica.
Antes de comenzar, verifica que esté instalado. Si no lo está, advierte al usuario que falta este requisito y detente antes de procesar el contenido multimedia.
Requiere ffmpeg en PATH, Python y Node.js >= 22 (para npx hyperframes, obtenido bajo demanda). hyperframes render/snapshot utiliza un Chrome sin cabeza; maneja su propio chrome-headless-shell y recurre a un Chrome del sistema (configura CHROME para anularlo) cuando el almacenado en caché no es utilizable. Verifica estos requisitos antes de procesar contenido multimedia.
Entradas
work/project.json: revisiones de operación y dependenciaswork/understand/understanding.json: momentos semánticos y evidencia revisadoswork/timeline.json: mapeo de fuente a programa, o una línea de tiempo de identidad cuando no existe un corte- revisión de color opcional seleccionada cuando se juzga el contraste o la paleta con respecto a esa apariencia
La habilidad es válida sin un corte o una corrección de color. Cuando los subtítulos están activos, ejecútalos primero,
depende de su revisión actual y trata su región ocupada como una zona de exclusión obligatoria.
Las tarjetas de contenido deben preceder al movimiento gráfico cuando ambos están activos. Estas reglas relativas se aplican
a cada par seleccionado. Declara solo las dependencias realmente consumidas y registra sus revisiones actuales
en based_on.
Trata el rostro visible y la silueta de la cabeza de cada persona principal o en primer plano, orador, presentador, entrevistado o persona semánticamente importante como una zona de exclusión obligatoria durante toda la señal de la tarjeta, incluyendo entradas y salidas. Una persona incidental solo de fondo que no sea un foco narrativo o visual está exenta; protege los casos inciertos. Si una tarjeta intersecta un rostro o cabeza protegida, reposiciónala primero, luego escálala o rediseñala. Omite la tarjeta cuando no exista una ubicación compatible.
Archivos de trabajo
work/content-cards/cards-plan.json # plan editorial duradero
work/cache/content-cards/index.html # composición de código-es-la-edición
work/cache/content-cards-overlay.mov # contribución de renderizado transparente
review/03-content-cards/card-stills/ # una imagen fija útil por tarjeta
review/03-content-cards/content-cards-preview.mp4 # ventanas de señal cortas opcionales
review/03-content-cards/content-cards-summary.md
review/03-content-cards/content-cards-review.html # panel de revisión local de candidatos
review/03-content-cards/content-cards-review-assets/ # un fotograma fuente por candidato
review/03-content-cards/content-cards-review.json # elecciones humanas validadas
La página de revisión reutilizable está comprometida en
skills/video-add-content-cards/assets/content-cards-review.html.
El HTML poblado, las capturas de pantalla, la superposición y las representaciones de vista previa son reproducibles.
Mantén el plan fuera de cache/. Debe contener cada cadena visible, sincronización, ubicación, valor de tratamiento visual, ruta de composición del renderizador, ruta del activo del renderizador y FPS de origen necesarios para regenerar el HTML desechable y los activos alfa después de eliminar work/cache/. Registra un renderer_recipe a nivel de plan con el ejemplo/plantilla de origen, la ruta de salida de la composición, el motor de renderizado y la ruta de salida, versión exacta, origen y SHA-256 de cada activo de tiempo de ejecución local. Un archivo HTML en caché o un script descargado sin una receta duradera no satisface la regeneración.
Flujo de trabajo
1. Entrevista antes de redactar
Primero lee understanding.json y la línea de tiempo activa. Cuenta los momentos gráficos elegibles y
calcula la recomendación de cantidad objetivo de tarjetas antes de la entrevista:
min(momentos elegibles, max(1, round(minutos del programa / 0.75)))
Esto es un objetivo, no una regla de truncamiento automático. Antes de hacer cualquier pregunta, abre tú mismo los ejemplos animados reales con el comando nativo para el sistema operativo actual. Ejecuta exactamente uno:
# Windows PowerShell
Start-Process (Resolve-Path 'skills/video-add-content-cards/examples/gallery-animated.html')
# macOS
open skills/video-add-content-cards/examples/gallery-animated.html
# escritorio Linux
xdg-open skills/video-add-content-cards/examples/gallery-animated.html
Si el comando falla, diagnostica y vuelve a intentarlo. No reemplaces esta acción con un URI ni le pidas al usuario que encuentre y haga clic en el archivo. La galería compara los seis temas y puede enfocar una columna con su selector nativo:
| Tema | Carácter inicial |
|---|---|
almanac | crema cálida, serifa, meditado |
teal | transmisión oscura, acento cian |
editorial | documental, tinta y ámbar |
dotgrid | píxel-mono, técnico |
apex | deportes de alta energía, acento rojo |
air | tipografía Lexend transparente, sin placas de respaldo ni pantallas |
Haz exactamente una pregunta a la vez en este orden:
- ¿Qué tema debería usar esta edición?
- ¿Qué cantidad objetivo de tarjetas debería usar esta edición? Ofrece la recomendación calculada como predeterminada.
- ¿Qué tipos de tarjetas deben incluirse? Ofrece
intro,key-quote,stat,listyoutro; por defecto, ninguno.
Presenta + DETENTE después de cada pregunta. Después de la tercera respuesta, resume el tema, la cantidad objetivo, los tipos requeridos y cualquier nota proporcionada por el usuario; pide confirmación. Si el usuario cancela, conserva el análisis, deja la operación como draft y no crees ni renderices tarjetas.
2. Redactar tarjetas a partir del entendimiento compartido
python skills/video-add-content-cards/scripts/build_cards_plan.py `
work/understand/understanding.json `
work/timeline.json `
work/content-cards/cards-plan.json `
--target-card-count 6 `
--theme editorial `
--must-include-type stat `
--notes "Conserva los nombres de productos textualmente"
El script asigna los momentos semánticos conservados al tiempo del programa y omite los momentos eliminados por el corte. Preserva los rangos de origen y las referencias de evidencia, ajusta la duración al clip contenedor y marca la copia/ubicación/tratamiento visual como draft. Un stat comienza con metric-spotlight; un list comienza con side-by-side; la revisión de candidatos puede conservar el diseño normal o cambiar un list a parallel-columns.
La entrevista confirmada se almacena como brief en cards-plan.json. Repite
--must-include-type para múltiples valores; omite las banderas que no correspondan. Los campos de resumen opcionales más antiguos se mantienen aceptados por compatibilidad, pero no forman parte de la entrevista normal.
3. Tomar decisiones editoriales
Lee la evidencia en cada momento de la tarjeta. Corrige nombres ASR y números, elimina candidatos débiles, escribe un texto conciso, elige una ubicación que despeje rostros protegidos, siluetas de cabeza visibles y subtítulos, y aprueba el tratamiento visual. Nunca trates el texto del analizador como copia final.
Almacena toda la copia en pantalla bajo copy.display (por ejemplo, eyebrow, title y detail),
no solo un resumen o título sugerido. Establece placement.face_clearance a verified solo después
de revisar una imagen fija compuesta contra la definición de rostro y cabeza protegida anterior,
y almacena la ruta relativa al protocolo de esa imagen fija en
placement.review_still. Almacena la composición de HyperFrames, el activo alfa y los FPS racionales exactos
bajo renderer.
Usa estas asignaciones como punto de partida:
| Tipo semántico | Tipo de tarjeta |
|---|---|
| hook | intro |
| key-point, quote, question | key-quote |
| stat | stat |
| list | list |
| cta | outro |
repetition, tangent y risk son evidencia editorial, no tarjetas automáticas.
Mantén los cinco tipos de tarjeta canónicos. Almacena los siguientes diseños opcionales bajo
visual_treatment.layout en lugar de crear nuevos tipos de tarjeta de alto nivel:
| Tipo de tarjeta canónico | Diseño permitido |
|---|---|
stat | default, metric-spotlight, bar-chart, pie-chart, line-chart |
list | default, side-by-side, parallel-columns |
Usa metric-spotlight solo cuando un número, porcentaje, cantidad, múltiplo, año o duración respaldado por evidencia merezca énfasis. Coloca el número entre un contexto superior e inferior conciso, ajusta valores largos sin superposición y mantén el número visualmente centrado entre esas etiquetas.
Usa side-by-side o parallel-columns para dos a cuatro conceptos breves paralelos, contrastantes, opuestos o correspondientes. Prefiere frases cortas; usa la revisión para elegir la orientación que se ajuste al metraje disponible y despeje el sujeto.
Usa un gráfico solo cuando la transcripción conservada proporcione un conjunto de datos completo y respaldado por evidencia.
Lee reference/chart-data.md antes de crear datos de gráficos. Almacena manualmente la dimensión,
métrica, unidad, período, puntos ordenados y la evidencia de transcripción de cada punto bajo data; nunca
infieras valores de un resumen del analizador ni combines puntos de diferentes videos. Usa bar-chart
para 2-6 categorías comparables, pie-chart para 2-6 partes mutuamente excluyentes de un todo probado
y line-chart para 3-8 puntos con significado ordenado. Cuando falten valores requeridos, etiquetas, un denominador,
un orden temporal o unidades, usa metric-spotlight, una tarjeta de estadística normal o ninguna tarjeta.
Para diseños de gráficos, comprime las explicaciones largas en textos de apoyo concisos sin cambiar
su significado. El gráfico debe comunicar principalmente los valores clave y su cambio o
relación. No enumeres ni vuelvas a expresar valores, etiquetas, períodos o unidades ya visibles en
el gráfico.
Conserva todos los candidatos respaldados por evidencia en esta etapa. Apunta a la cantidad objetivo de tarjetas del resumen, pero permite un conjunto más sólido o más escaso cuando la evidencia lo justifique.
4. Revisar y aplicar las elecciones de los candidatos
Genera una revisión de navegador específica del proyecto después de que exista el plan de candidatos. Pasa el video fuente alineado al source_range del plan y la línea de tiempo activa. El script ajusta cada punto medio de evidencia a su clip retenido contenedor, luego puebla la plantilla comprometida con un fotograma fuente correspondiente por candidato:
python skills/video-add-content-cards/scripts/build_review_page.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.html `
--video input/source.mp4 `
--timeline work/timeline.json `
--captions-plan work/captions/captions-plan.json
Omite --captions-plan cuando el proyecto no tenga una operación de subtítulos activa. Con un plan de subtítulos activo, el fotograma de revisión muestra sus regiones superior, central o inferior realmente ocupadas.
Abre inmediatamente la revisión poblada tú mismo con el comando nativo para el sistema operativo actual. Ejecuta exactamente uno:
# Windows PowerShell
Start-Process (Resolve-Path 'review/03-content-cards/content-cards-review.html')
# macOS
open review/03-content-cards/content-cards-review.html
# escritorio Linux
xdg-open review/03-content-cards/content-cards-review.html
Si el comando falla, diagnostica y vuelve a intentarlo; no le pidas al usuario que localice el archivo. La página
muestra cada fotograma fuente, ID de tarjeta, tiempo del programa, texto editable, tratamiento visual y ubicación.
Los diseños de gráficos también muestran datos estructurados editables y las referencias de evidencia de los puntos. Revisa
cada valor contra la evidencia mostrada antes de aprobarlo.
Cada candidato
comienza sin seleccionar con la ubicación establecida en bottom. Cambiar la ubicación mueve un proxy de tarjeta gris
sobre el fotograma real para que el riesgo de colisión sea visible antes de la aprobación. El usuario selecciona tarjetas,
edita el texto, elige el tratamiento y la ubicación, hace clic en Copiar resumen y pega el resumen visible
de vuelta en la conversación.
Presenta + DETENTE. Espera el resumen de selección pegado. No crees HTML a partir de candidatos de borrador no verificados.
Convierte el resumen en
review/03-content-cards/content-cards-review.json: escribe una entrada para cada tarjeta del plan, marca los ID de resumen seleccionados con su texto, tratamiento visual y ubicación elegidos, y marca todos los demás ID como no seleccionados con su texto de borrador actual y una ubicación vacía. Almacena la elección de revisión como un campo de cadena llamado visual_treatment. Luego aplica la revisión validada:
python skills/video-add-content-cards/scripts/apply_cards_review.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.json
El paso de aplicación rechaza ID de tarjeta desconocidos, duplicados o faltantes, texto seleccionado en blanco, ubicación no válida y tratamientos incompatibles con el tipo de tarjeta canónico sin cambiar el plan. Si tiene éxito, conserva las tarjetas seleccionadas y marca su texto, ubicación, tratamiento visual y revisión de nivel superior como approved. Lee la cantidad seleccionada resultante contra el objetivo del resumen antes de continuar.
Para los diseños de gráficos seleccionados, el paso de aplicación también valida los datos estructurados completos y marca
data.status como approved. Cualquier gráfico seleccionado no válido rechaza toda la revisión antes de que se copie el plan.
Elegir un diseño que no sea de gráfico elimina los datos de gráfico de borrador no utilizados. Después de la aplicación, la autorización de rostros y subtítulos sigue pendiente hasta que la composición se verifique con fotogramas compuestos reales.
5. Crear una composición de HyperFrames
Usa un index.html y una línea de tiempo de GSAP en pausa. Cada tarjeta aprobada se convierte en un .clip claveado por program_start_s y duration_s del plan. Mantén la búsqueda de movimiento segura y deriva la sincronización de atributos de datos en lugar de temporizadores de pared.
Para señales de gráficos, anima solo a través de esa línea de tiempo en pausa en tiempos de composición absolutos. Las barras se revelan desde una línea base cero; los sectores de pastel se revelan en orden de puntos con geometría proporcional a los valores; las rutas de línea se dibujan en orden del eje X antes de que aparezcan sus puntos. Usa un tamaño relativo a la fuente y cuadros de diseño fijos para que la búsqueda, las etiquetas y los valores dinámicos nunca causen saltos en el diseño. Las duraciones sugeridas son de 5 a 6 segundos para barras y pastel y de 6 a 8 segundos para líneas, siempre ajustadas al clip retenido.
Comienza desde el ejemplo de repositorio más cercano:
examples/index-almanac.htmlexamples/index-apex.htmlexamples/index-dotgrid.htmlexamples/index-editorial.htmlexamples/index-teal.htmlexamples/index-air.html
Mantén un lenguaje visual en todas las tarjetas, usa un tamaño relativo a la fuente y mantén suficiente contraste contra la gradación seleccionada. Los cinco temas de panel opaco pueden usar una tarjeta o pantalla para la legibilidad. air debe mantener los contenedores de escena y texto transparentes
…
[truncado para la traducción]