KT

karnaf0katom/taskfilm

Developer tools
2 stars 品質 65 トレンド 28MIT

Make short videos that teach people how to use your software. Local CLI and agent skill for feature walkthroughs and tool demos.

概要

Build a feature, then show people how to use it. Taskfilm records a real browser workflow and turns it into a short, editable video with HyperFrames. Use it for feature handoffs, onboarding, release notes and tool walkthroughs. Run the local CLI yourself or give its included skill to your coding agent. The full demo plays here automatically (silent). See the agent build an update, make a video explaining what changed, and deliver it in the same chat. Download the MP4 with narration (4.7 MB). Start with a real task: where to find the feature, the actions to take, and the visible result. Captures retain timed actions and result screenshots so the explanation stays tied to the app it shows. Compare the preview gallery and production options: recorded feature lessons, directed product films, After Effects-style HTML/SVG motion, OSS walkthroughs and portrait reels. The downloadable projects keep the real take, native result and editable composition together.

README

Taskfilm

Make short videos that teach people how to use your software.

Build a feature, then show people how to use it. Taskfilm records a real browser workflow and turns it into a short, editable video with HyperFrames. Use it for feature handoffs, onboarding, release notes and tool walkthroughs. Run the local CLI yourself or give its included skill to your coding agent.

Watch Taskfilm in action (43 seconds)

The full demo plays here automatically (silent). See the agent build an update, make a video explaining what changed, and deliver it in the same chat. Download the MP4 with narration (4.7 MB).

Watch the examples · Download the release · Workflow guide

Start with a real task: where to find the feature, the actions to take, and the visible result. Captures retain timed actions and result screenshots so the explanation stays tied to the app it shows.

Compare the preview gallery and production options: recorded feature lessons, directed product films, After Effects-style HTML/SVG motion, OSS walkthroughs and portrait reels. The downloadable projects keep the real take, native result and editable composition together.

Build a feature. Explain it.

Give your agent one checked task and ask for its walkthrough:

Make the watchlist easier to scan. Use $taskfilm-feature-explainer to show the upgrade once it works and its checks pass.

See the animated workflow demo above · Watch the resulting feature walkthrough

The edited demo shows a UI upgrade request in CCC with Codex, a time skip, and the actual feature video playing inside the same conversation. Prompt entry is re-recorded; the feature change and inline playback are real. The Trading Terminal uses labeled sample quotes.

Your agent uses the same capture, composition and render commands as you. A recorded lesson can accompany the feature handoff, release notes or an onboarding guide. Follow the workflow guide and install the included agent skill to adapt it to your app. Installing a skill does not install a background watcher.

The feature-explainer skill is available in this source checkout. After installing Taskfilm, copy it to a new skill folder:

python3 -c 'from pathlib import Path; from shutil import copytree; copytree("skills/taskfilm-feature-explainer", Path.home()/".codex/skills/taskfilm-feature-explainer")'

The copy refuses an existing destination. This source skill uses the published capture, edit, compose and render commands; a new wheel release is not required. It adds no watcher, hook or service. See its production workflow.

What you get

  • Real browser recordings with timed actions, clicks, DOM assertions and hashed result screenshots.
  • Three story modes: teach a feature, promote a product, or explain an OSS tool with pinned source attribution.
  • Editable motion: camera moves, kinetic type, perspective, click effects, recap shots and original synthesized sound.
  • Your source files: the original take, edit decisions, HTML/SVG composition and rendered MP4 stay local.
  • An agent skill that uses the same CLI commands as you.

The sample needs no account, API key, GPU or model download. Rendering downloads the pinned HyperFrames runtime and GSAP; an offline render is not promised.

Install

Requires Python 3.10+. Capture needs FFmpeg/FFprobe and Chromium; rendering needs Node.js 22+ and npm. Linux is the checked platform for this first alpha; macOS and Windows have not been verified.

git clone https://github.com/Karnaf0katom/taskfilm.git
cd taskfilm
python3 -m venv .venv
source .venv/bin/activate
python -m pip install '.[browser,motion]'
python -m playwright install chromium
taskfilm doctor
taskfilm capture check

On Windows, activate with .venv\Scripts\activate. Install FFmpeg separately with your system package manager; on Ubuntu use sudo apt-get install ffmpeg. If Chromium needs Linux system libraries, use python -m playwright install --with-deps chromium.

You can also install the wheel from the GitHub release. There is no PyPI release yet.

Make your first film

The included Taskboard is an original local app. This recipe adds a task, marks it complete and shows the result. Tasks use browser local storage.

taskfilm init demo
python -m http.server 8765 --bind 127.0.0.1 --directory demo/taskboard

Keep the server running. In another terminal with the same environment:

taskfilm capture validate demo/capture.json
taskfilm capture rec demo/capture.json --out-dir takes --no-burn-captions

# Replace YOUR-TAKE with the timestamped directory printed by the recorder.
taskfilm edit takes/YOUR-TAKE --no-retime
taskfilm compose takes/YOUR-TAKE --out lesson --no-title \
  --width 1280 --height 720 --max-scale 1 --note-top 4
taskfilm render lesson --output lesson.mp4

Edit lesson/index.html to change the composition. Keep the original take so you can revise the film without repeating the task.

For a directed product promo or the original 24-second animation study, follow the motion recipes.

For a narrated app showcase, use the Excalidraw motion-promo recipe. It combines a real workflow with masked type, a perspective reveal, camera choreography and animation of the saved diagram. Bring narration and a licensed score; the CLI does not call ElevenLabs or another provider itself.

Plan the story

taskfilm story --request demo/request.json --story demo/feature.json --out feature-plan
taskfilm story --request demo/request.json --story demo/promo.json --out promo-plan

Story planning exports direction and capture requirements. Record the task, apply the direction to your composition and review the finished film. A plan does not execute the workflow or prove the result.

Goal Mode Recipe
Teach one useful task feature_demo Natural-speed actions and a readable result
Promote a product saas_launch Problem, real workflow, payoff and supplied CTA
Explain an OSS tool github_review Pinned source, real task, fit and limitation

The OSS recipes cover Excalidraw diagrams, drawDB schemas and a prepared Penpot design handoff. The 45-second Excalidraw film and 72-second drawDB lesson retain checked native exports. Penpot’s complete capture, native export and film remain unverified. The showcase films were recorded before the public rename and retain the earlier wordmark.

Use with an agent

taskfilm skill ~/.codex/skills/taskfilm-video

Choose the skill folder used by your agent. Existing destinations are never overwritten. The included skill explains the capture, composition, motion and evidence workflow; it requires no private checkout.

Commands

Command Purpose
doctor, init, skill Check tools, copy samples and install the skill
story Plan a feature lesson, promo or OSS walkthrough
capture Validate, discover and record a browser workflow
edit Prepare edit decisions from a take
compose, reel Create landscape or portrait HTML compositions
motion Author the directed product-film kit
render Check and render with pinned HyperFrames 0.8.134
repo-pack Retain pinned repository source and attribution
package Package evidence or checked films and downloads

Run taskfilm COMMAND --help for each input contract.

Privacy and scope

Capture uses a fresh browser context by default. Keystroke event logs redact characters, but the screen still records visible text. Review footage before sharing. Keep authentication state, cookies and browser profiles outside your take bundles and repository. Run capture scripts and setup JavaScript you trust.

This alpha provides a local CLI and editable compositions. Hosted orchestration, provider-generated media, a timeline editor, repository sandbox execution and Adobe After Effects project import are outside its scope. Source assertions, capture checks and final visual review remain separate evidence.

Contribute

python -m pip install '.[browser,motion,dev]'
python -m pytest -q
# Optional real-browser task; requires FFmpeg and installed Chromium.
TASKFILM_BROWSER_TEST=1 python -m pytest -q

See CONTRIBUTING.md, SECURITY.md and RELEASE.md. CI tests installed wheels and source distributions outside the checkout, records the original browser task, and checks audio through a complete HyperFrames render.

License

Original code is MIT licensed. Fonts and reference material retain their third-party notices. HyperFrames, GSAP, Chromium and FFmpeg are separately installed dependencies with their own terms.

View this README on GitHub

推奨ツール

別のキーワードを試すか、フィルタを外してください。

インストール

npx skillfish add karnaf0katom/taskfilm