Communitygithub.com

atlantis-mk/kinetic-tech-remotion-template

Use this tech perspective motion graphics template to produce one video and three covers, supporting parametrized scenes, horizontal/vertical orientations, programmatic sound effects, and local media input. The work/ directory is created only when actual production begins.

What is kinetic-tech-remotion-template?

This skill provides a structured, AI-agent-guided workflow for producing a tech explainer video using a Remotion-based motion graphics template. It supports parametrized scenes, horizontal and vertical aspect ratios, programmatic sound effects, and local media input. The skill is designed for use with AI coding assistants like Claude Code, Cursor, or Codex, and includes a detailed pipeline for initialization, content editing, validation, preview, rendering, and verification. It emphasizes a strict separation between template maintenance and production runs, with the work/ directory created only when actual production begins. The workflow ensures that all edits to scenes, metrics, annotations, news, code, and cover images are validated against a Zod schema and timeline constraints, and that audio, sound effects, and subtitles are manually synced rather than auto-aligned.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/atlantis-mk/kinetic-tech-remotion-template/tree/HEAD/.agents/skills/make-video

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Produce a Tech Explainer Video

First, read the root AGENTS.md — it is the sole overarching rule for production. This skill provides the technical steps.

  1. Read template.md to confirm the style and capability boundaries. When resuming a task, first read task-state.md and check the root work/task.json along with actual files.
  2. Only when starting production, run python3 .agents/skills/make-video/scripts/pipeline.py init --install. It copies the real project, preserves any existing modifications, and generates programmatic sound effects. If no theme is provided, gather requirements first — do not treat the default example as the user's final video.
  3. In work/project/content.json, replace text, metrics, annotations, news, code, and covers shot by shot. Scenes can be reordered, duplicated, or their duration changed; configuration is validated against the real Zod schema and timeline constraints. If a new visual subject exceeds existing scenes, modify the current src rather than just changing the title. For parameter and media operations, see remotion.md.
  4. Store raw assets in work/input; place derived assets actually used in work/project/public and refer to them with relative paths. Add voiceover, sound effects, and subtitles as needed; use default programmatic sound effects — no TTS or auto-alignment. First verify the voiceover semantics, then arrange the timeline.
  5. Run validate, check, preview --frames 0-59, and check each scene's start/middle/end frames along with any audio clips; adjust clip ranges if necessary. Then run render and verify. Technical reports will not claim audio-visual approval.
  6. Actually inspect keyframes, transitions, the final video, and the three covers; listen to the audio preview; then record acceptance and task status according to the root rules. Re-render relevant deliverables after modifications.
  7. Default deliverables are work/delivery/video.mp4, cover-4x3.png, cover-3x4.png, and cover-16x9.png. If the user requests a different manifest, first align task.deliverables with actual rendering capabilities.

When maintaining the template, modify assets/project-template and use isolated tests from the root tests directory; do not run the root init for maintenance. See readme-format.md for the template metadata protocol.

Related Skills