Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/kjetilhartveit/kjetils-skills --skill explain-with-videoAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
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.
