Communitygithub.com

Taskfilm:実際のブラウザ操作を編集可能なプロダクト映像に

実際のブラウザ作業を、時刻付き操作、DOMアサーション、結果スクリーンショット付きで録画し、編集可能なHyperFrames HTML/SVGモーション映像に変換。機能レッスン、SaaSローンチ用プロモ、出典付きOSS紹介をMP4で書き出します。

Taskfilm:実際のブラウザ操作を編集可能なプロダクト映像に とは?

チュートリアル動画レシピのステップ2(ローンチ版カット)。Karnaf0katom/taskfilm(2026-10-07公開、MIT、GitHub Pagesにプレビューギャラリー)より。taskfilm CLIと同梱のtaskfilm-videoスキルが、時刻付き操作、クリック、DOMアサーション、ハッシュ付き結果スクリーンショットでブラウザ作業を収録し、ストーリーモードを選びます。feature_demoは繰り返せる1タスク、saas_launchは課題、操作、成果と指定のCTA、github_reviewは固定バージョンのOSSを適合性、制約、出典付きで紹介。taskfilm editでレッスンを準備し、composeかreelでカメラワーク、キネティックタイポ、クリック演出、まとめショット、合成サウンド入りの編集可能なHTML/SVGコンポジションを書き出し、renderでMP4にします。レッスンは実際の速度のまま、プロモは待ち時間を切っても実際の結果は画面に残します。サンプルはアカウント、APIキー、GPU不要。このアルファ版の検証済み環境はLinuxです。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Karnaf0katom/taskfilm/tree/HEAD/skills/taskfilm-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Use the installed taskfilm CLI. Read its README for installation and run taskfilm doctor and taskfilm capture check before browser capture. This skill is self-contained and does not require the private monorepo or fleet tools.

Choose the story treatment from the user's goal: feature_demo for one repeatable task, saas_launch for problem/workflow/payoff and a supplied CTA, github_review for a pinned OSS source with fit, limitation and attribution. taskfilm init demo supplies an original working app, capture script and sample request/story files. Adapt its inputs instead of inventing unsupported flags. Read taskfilm story --help and taskfilm capture --help for the actual contracts.

Keep before/action/result explicit. For a lesson, keep real interactions at natural speed and hold the visible result long enough to read. Promos can cut idle time, with a useful result still on screen. Use taskfilm repo-pack and story --repo-pack for source-based OSS assertions; the source pack does not prove runtime behaviour.

For the original Taskfilm OSS sample, init includes oss.json and prepare-oss-review.py. Bind its request to the actual pinned public release README using the recipe in the README, then use story --repo-pack. The helper refuses README bytes that differ from the source pack. Other repositories need their own source claims and real task actions.

Record with taskfilm capture rec SCRIPT --out-dir takes --no-burn-captions. Use the exact take path it reports. taskfilm edit TAKE --no-retime prepares the lesson edit. taskfilm compose TAKE --out PROJECT or taskfilm reel TAKE --out PROJECT exports an editable composition from real footage and beat labels. The story brief is direction to apply and inspect, not automatically executed by the composition command. taskfilm render PROJECT --output FILE checks and renders through the pinned HyperFrames owner.

For a directed motion promo, use the existing product-film owner: the sample motion-capture.json records a real 4K take, and motion-spec.json supplies the brand, copy, measured regions and action anchors. Copy the spec to spec.json beside the film, then run taskfilm motion FILM --take EXACT-TAKE --format landscape or portrait. Read taskfilm motion --help. Its optional NumPy/SciPy dependencies are installed with the motion extra. The output under FILM/cuts/FORMAT retains an edit-decision record; rendering stays with taskfilm render.

For pure motion graphics, init also supplies motion-lab/: four original editable HyperFrames scenes with masked type, SVG drawing/interpolation and perspective. Edit the scene files and their paused GSAP timelines, then render that project. It is a silent animation study. Do not describe it as an Adobe After Effects project importer.

taskfilm package --showcase MANIFEST --out DIRECTORY packages finished, hash-bound movies and distribution downloads as a portable static release preview. It probes movie metadata and retains hashes; it does not create or approve a film. package --evidence retains the original take-companion contract.

Keep plans, capture success, verified product result and final-video review distinct in your report. Inspect the result in the captured task, inspect delivery-size video frames, and listen to complete audio when supplied. Never treat a UI replica as proof. Use supplied/currently owned accounts and media. Keep cookies and browser profiles out of examples and packages. Publish only when the user has authorized the concrete destination/output.

関連スキル