Cómo usar
- Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
- Consulta las herramientas, credenciales y entornos necesarios en el documento original.
- Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/kjetilhartveit/kjetils-skills --skill explain-with-videoAntes de empezar
- La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
- Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
Explain with Video
A short, concise animated explainer, about 60 seconds, played in a large video-like player. By default it is a live HTML/SVG animation, not a video file: it follows the theme, its text can be searched and copied, and editing it needs no re-render.
Use this skill when
- The user asks for a visual explanation of changes with video.
- Used by an orchestrator to explain changes visually with video.
The video
- About 60 seconds, brisk pacing. 4–7 chapters, each one takeaway with one moving visual.
- Large stage: the full content width, 16:9 on desktop; switch to a taller layout and larger text on phones.
- Captions as real text in a strip under the stage.
- Keep the stage clean: no chapter labels, timestamps or tooltips inside the video or on the scrubber.
- Player controls: play/pause (Space), scrubber, speed, captions toggle, fullscreen.
- Before playing, show a meaningful poster frame (the strongest frame), not an empty stage. Pausing always
leaves a clean, readable frame.
Below the player
- One row of chapter names directly under the player: click to jump, the current one highlighted while playing.
- Then a compact details area: a few
ev-moretoggles that name their contents, with visual content
(highlighted code, chips, compact tables). Keep it small.
Building it
- Build it with the
explainer-kitskill (theme tokens,ev-more, code blocks). - Draw every frame with one function
render(t)that sets the whole picture from the time alone, driven by
requestAnimationFrame. Seeking, speed changes and the poster frame then come for free.
- Only render a real video file (e.g. frames with Python PIL piped to ffmpeg) when the user needs a file to share
outside the page.
