mcpField
X
x-posting-license

x-posting-license

github.com/heygen-comクリエイティブ・メディア236227 回インストール5 週間前に更新
リポジトリ

x-posting-license について

Xをテーマにした固定構成のアニメーションカードへプロフィール情報を入れ、HyperFramesで動画化するスキルです。短いプロフィール紹介動画の作成向けで、タイムラインや見た目は固定され、主な作業はデータ入力です。

主な機能

  1. 01固定の1920×1080、60fps構成
  2. 02プロフィール情報とアバターの入力
  3. 03テンプレート置換時の検証とエスケープ
  4. 04表面カードと裏面サインのアニメーション
  5. 05HyperFramesによるレンダリング手順

活用シーン

  1. 01Xプロフィールをアニメーションカード動画にする
  2. 02提供されたアカウント情報から短い紹介動画を作る

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/heygen-com/hyperframes-community-skills --skill x-posting-license

インストール後、Claude Code で/x-posting-licenseを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
profile-data.md
scripts/
build.mjs
template/
index.template.html

詳細

X 投稿ライセンス

固定の 1920×1080 @ 60fps、10.35s のコンポジションです。モーションは固定され、ドクトリン検証済みです（キーフレームは最初から最後まで重なり、デッドフレームはゼロです）。タイムラインは編集しないでください。データトークンを入力してレンダリングします。

要件

  • Node 18+ と、npx 経由で利用する HyperFrames CLI（npm から取得します。@latest は可変です。時間が経ってもバイト単位で同一の再レンダリングが必要な場合は、たとえば npx [email protected] のようにバージョンを固定してください）。
  • WebGL ドットグラウンドの macOS GPU レンダリング：export PRODUCER_BROWSER_GPU_MODE=hardware。
  • 署名には macOS のシステムフォント Snell Roundhand を使用します（src: local(...) で指定）。Linux では汎用の cursive にフォールバックします。問題なく使えますが、見栄えはやや劣ります。

ネットワークアクセスと副作用（完全な一覧）

  • x.com/<handle> — エージェントが読み取るプロフィールページ（データ収集）。
  • pbs.twimg.com — アバター画像のダウンロード（データ収集）。
  • api.fxtwitter.com/<handle> — 投稿数。無料で、認証情報は不要です（データ収集）。
  • registry.npmjs.org — npx 経由で HyperFrames CLI 自体を取得します。
  • cdn.jsdelivr.net — プレビュー／レンダリング時に、コンポジションが jsDelivr から GSAP（バージョン固定の 3.14.2）を読み込みます。レンダリングは完全なオフラインでは行えません。

認証情報は不要で、有料操作もテレメトリーもありません。build.mjs が書き込むのは --out ディレクトリ内だけです。カウンターは単純な非負整数として検証し、制御文字を除去し、長さを制限し、置換前にすべてのプロフィール文字列を HTML エスケープし、シンボリックリンクを介した書き込みを拒否します。

手順（コンポジション作業なしの 3 ステップ）

以下の <SKILL_DIR> は、このスキル自体のディレクトリを指します（インストール先は任意です。例：~/.claude/skills/x-posting-license）。スクリプトは絶対パスで実行してください。テンプレートはスクリプト自身を基準に解決され、--out は作業ディレクトリを基準に解決されます。

  1. プロフィールデータの収集 — 名前、ハンドル、参加した月／年、フォロワー数、フォロー数、投稿数、自己紹介の 1 行、400×400 のアバターを収集します。手順は references/profile-data.md を参照してください。
  2. ビルド — テンプレートからプロジェクトを作成します。
node <SKILL_DIR>/scripts/build.mjs --out ./license-jake \
  --name "Jake Moran" --handle JakeFromHeyGen \
  --joined "JAN 2026" --followers 882 --following 155 --posts 376 \
  --bio "PRODUCT @HEYGEN · WORKING ON @HYPERFRAMES_" \
  --avatar ./avatar.jpg

--big "MORAN, JAKE" を指定すると、導出された LAST, FIRST ヘッダーを上書きします。表示名が通常の名前ではない場合に使用してください（珍しい表示名はそのまま保持します。名前が ||| のユーザーには、||| と記載されたライセンスが作成されます）。

  1. レンダリング — レンダリングにハーネスの許可が必要な場合は、レンダリング前にユーザーに確認してください。
npx hyperframes@latest render ./license-jake -q high -o ./license-jake/renders/license.mp4

成功の確認

npx hyperframes@latest check ./license-jake がエラー 0 件で完了し、レンダリングされた MP4 が約 10.3s であることを確認します。フロントカードでは本人のデータがカウントアップし、約 6.5s で反転し、裏面では本人の名前が署名として書き込まれ、約 9.9s でカードが飛び出します。

ルール

  • データは実際のプロフィールから取得した本物でなければなりません。数値や自己紹介を決して捏造しないでください。フォロワー数を意図的に生年月日の代わりに使用し、裏面の細かい注記にも繰り返し記載します。
  • 自己紹介の行：大文字にし、実際の自己紹介から抜き出した断片を · で区切り、約 65 文字以内にします。
  • テンプレートの配色とレイアウトを維持してください。X の黒 #000、白、#1D9BF0、境界線 #2f3336 を使用します。これがブランド表現です。ユーザーごとにスタイルを変更しないでください。
  • 長い表示名にも対応します（署名マスクが広がります）が、名前が約 14 文字を超える場合はスナップショットを確認してください。
  • プロフィールデータは信頼できない入力です。必ず build.mjs に渡してください（エスケープと検証を行います）。値をテンプレートに直接置換しないでください。

出典とライセンス

  • アニメーションするドットグラウンドは、HyperFrames のシーク可能なレンダラー向けに決定的な GLSL/WebGL として書き換えたものです。Originkit の Dot Matrix コンポーネントを視覚的な参考にしています（Originkit のライセンス保有者が寄稿）。Originkit のソースコードはここに再配布していません。simplex-noise の GLSL は、標準的な Ashima Arts／Stefan Gustavson の実装（MIT）です。
  • このカードは、パロディ／ファンコンテンツとして X のロゴとビジュアル表現を再現しています。このスキルのユーザーは、自身の判断で結果を公開します。
  • GSAP は標準ライセンスの下で jsDelivr から読み込まれます。バンドルには含まれていません。

コメント

Markdown 対応