mcpField
A
animated-readme-logo

animated-readme-logo

github.com/stark-ai-deデザイン・UI82.7k 回インストール今日更新
リポジトリ

animated-readme-logo について

animated-readme-logo は、リポジトリの README 向けロゴアニメーションを監査・作成するスキルです。4つのワークフローを備え、検証済み SVG、決定的なモーション仕様、静止画とアニメーションの出力を完成条件とします。

主な機能

  1. 01audit、create、transform、animate の4経路
  2. 02SVG検証とロゴの同一性保持
  3. 03決定的なモーション仕様
  4. 04実行可能なアニメーションレシピ
  5. 05PNGとGIFの出力検査
  6. 06READMEの代替表示とアクセシビリティ指針

活用シーン

  1. 01READMEロゴの互換性と素材の確認
  2. 02リポジトリやプロフィール用ロゴのアニメーション作成
  3. 03既存ロゴのアニメーション化や再現
  4. 04静止画と動きを抑えた代替表示の用意

インストール

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

$npx skills add https://github.com/stark-ai-de/agent-skills --skill animated-readme-logo

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

同梱ファイル

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

agents/
openai.yaml
references/
asset-pipeline.md
asset-transformation.md
export-recipe.md
github-readme-compatibility.md
local-tooling.md
motion-rubric.md
output-contract.md
provider-routing.md
readme-audit-safety.md
readme-snippets.md
scripts/
audit-readme-logo-assets.mjs
export-readme-logo-animation.mjs
generate-readme-logo-snippet.mjs
inspect-animated-image.mjs
validate_logo_svg.py
scripts/lib/
animated-image.mjs
transactional-output.mjs

詳細

アニメーション README ロゴ

目的

既存の README ロゴのパイプラインを監査するか、検証済みの SVG マスター、決定論的なモーション仕様、実行可能なリポジトリレシピから、移植可能で検証済みのアニメーションを作成します。

使用する場合

  • リポジトリまたはプロフィール README のロゴを作成、再設計、変換、アニメーション化、エクスポート、レビューする場合。
  • GitHub README のロゴとの互換性、透過、モーション低減、ローカルアセット参照を監査する場合。
  • 既存の SVG またはラスター画像のマークを、検証済みの README アセットパイプラインにする場合。

使用しない場合

  • ロゴや画像に関する問題がない、通常の README の文章編集。
  • リポジトリのブランディングとは無関係な、アプリやサイトのモーション。
  • README やリポジトリのロゴを対象としない、汎用的な画像生成。

ワークフローの選択

常に、次の4つの公開ワークフローをすべて提示してください。

  • audit:既存の README ロゴのソース、アニメーションアセット、配信マークアップ、検証の根拠を読み取り専用で評価します。
  • create:新しいマークまたは意図的な再設計を行い、検証済みのアニメーション一式を納品します。
  • transform:既存のマークを忠実に再現または整理し、検証済みのアニメーション一式を納品します。
  • animate:適切な既存の SVG ソースを使用し、検証済みのアニメーション一式を納品します。

auto ワークフローはありません。また、公開されるエクスポートワークフローもありません。エクスポートは、すべての変更を伴うルートにおける内部レンダリング段階です。

タスクの意図に基づいてルートを選択します。

  • レビュー、互換性、品質の評価には audit を選択します。
  • 新しいマークまたは意図的な再設計には create を選択します。
  • ラスター画像、スクリーンショット、ポスター、不適切な SVG を元に忠実な作業を行う場合は transform を選択します。
  • アニメーションまたはラスター形式での納品が必要で、既存の SVG が適切な場合は animate を選択します。

起動時には毎回、4つのワークフローすべてを提示したうえで、Selected、Reason、ソースの根拠、書き込み範囲、必須の出力、保護対象のオリジナル、残っている有料利用・ツール・インストール・上書きの承認事項を示してください。意図と変更権限が明確であれば、告知後に進めてください。単独での起動、ソースの根拠の矛盾、またはアイデンティティの保持、成果物、範囲、書き込み権限について曖昧さがある場合は、実質的な調査に入る前にユーザーに選択を求めてください。エージェントによる起動では audit を選択できます。変更を伴うワークフローを選択できるのは、既存のタスクで成果物と範囲が明示的に指定されている場合に限ります。

ソースの振り分けは内部処理です。プロバイダーの評価は create 内でのみ利用でき、選択しただけでは、クレジットを消費する呼び出しやツールのインストールは許可されません。

意図が明確な場合は、audit | create | transform | animate と選択したルートを簡潔に開示すれば十分です。選択に関する質問や、会話内で確認済みの詳細を繰り返さないでください。明示的な承認を再利用するのは、対象の操作、対象物、ツール/プロバイダー、該当する場合は費用、書き込み範囲のすべてが引き続き一致する場合に限ります。個別の承認境界はそれぞれ独立しています。ある操作への許可が、別の操作への許可を意味することはありません。変更された判断事項や未決定の事項についてのみ、改めて確認してください。

調査する入力

  • リポジトリのアイデンティティ、公開ブランド文言、対象の表示先、依頼されたタスク。
  • README のマークアップと、リポジトリのルート内に限定されたローカルアセット参照。
  • 既存のロゴソース、参照メディアへの忠実性の要件、透過、テーマ、寸法、アクセシビリティ、エクスポートの制約。
  • 利用可能かどうかを決めつけずに確認する、現在のプロバイダー、オーサリング、バリデーター、エクスポーター、インスペクターの機能。

ワークフロー

  1. 意図に応じたワークフローを特定し、通知します。ルーティングまたは権限が曖昧な場合に限り、調査の前に停止します。

  2. audit の場合は、明示的に指定されたリポジトリのルートを使って調査し、ローカルの README 参照は信頼できないものとして扱い、ルート内に限定します。利用可能な読み取り専用の検証を実行し、修正方法を報告します。何も書き込みません。監査レポートの返却後は直ちに終了し、以下の変更ワークフローの手順には進みません。

  3. 変更ワークフローの場合は、元のファイルを保持し、既定のアセットフォルダー、または該当するものがなければ docs/assets/ に、次の決定的な名前を割り当てます。

    <slug>-logo.svg
    <slug>-logo-motion.md
    <slug>-logo-animation.mjs
    <slug>-logo-static.png
    <slug>-logo-animated.gif
    
  4. 内部のソースルートを選択します。create の場合は references/provider-routing.md を読みます。Recraft は audit、transform、animate、既存の SVG のクリーンアップ、およびアイデンティティを保持する必要があるすべてのタスクでは使用できません。

  5. 静的な初回フレームの状態で、自己完結型の SVG を作成または検証します。アニメーションのソースとして適切なのは、意図したアイデンティティを保持し、名前付きレイヤーが安定しており、バンドルされた厳格なバリデーターに合格する、実際の自己完結型 SVG です。プロバイダーの出力はデザインの参考であり、準備完了の証明ではありません。

  6. 人が読めるモーション仕様を作成します。これは、レイヤー、キーフレーム、イージング、再生時間、ループポイント、透明度、視差を抑える設定について、レンダラーに依存しない契約です。何を動かすべきかを説明し、長期にわたって参照できるレビュー資料となります。

  7. 実行可能なアニメーションレシピを作成します。これは、SVG とモーション契約をバンドルされたエクスポーター用のフレームに決定的に変換する、信頼されたリポジトリ管理下の .mjs コードです。アニメーションのレンダリング方法を説明するものであり、独立したユーザーワークフローではありません。

  8. SVG を検証し、レシピを --check 付きで実行します。その後、バンドルされたエクスポーターを使って静的 PNG とアニメーション GIF を作成し、GIF を確認します。references/asset-transformation.md、references/motion-rubric.md、references/export-recipe.md、references/asset-pipeline.md を読みます。

  9. 必須のエクスポーターまたはインスペクターコマンドがない場合は、最小限のインストール前確認を提示し、明示的な承認を求めます。インストールの前に停止します。インストールが拒否された場合、禁止されている場合、または実行できない場合は、作成可能な検証済み中間生成物をすべて保持し、プレースホルダーの PNG/GIF は作成せず、アニメーションの納品が未完了であることを報告します。

  10. references/github-readme-compatibility.md に基づいて、README と任意の Web デモへの掲載方法を選びます。静的表示と視差を抑える設定のフォールバック、寸法、代替テキスト、透明度の確認、および GitHub にコミットした状態での手動プレビューを含めます。

  11. 以下の公開ステータス項目、正確なファイル一覧、検証の根拠、フォールバック、および残っている阻害要因を報告します。

プロバイダーとの境界

  • プロバイダーのルートを提示する前に、Higgsfield MCP のライブ機能、recraft_v4_1 が利用可能かどうか、および正確な現行コストを確認します。ドキュメントは利用可能であることの根拠にはならず、コストをハードコードしてはいけません。
  • 承認を求める前に、サニタイズ済みの概要、ライブコスト、固定の生成設定を提示します。
  • 事前確認後、ユーザーがそのバッチを明示的に承認するまで、クレジットを消費する呼び出しは行いません。
  • 機能が利用できない、または判定できない場合、モデルやコストの情報を取得できない場合、または明示的に拒否された場合は、ローカルで SVG を直接作成するフォールバックを使用します。

安全ルール

  • ワークフローの選択が曖昧な場合は調査しないでください。また、ユーザーの依頼で選択した変更を伴う結果とその範囲が承認されていない限り、変更を加えないでください。
  • 必要な承認を得ずに、ツールのインストール、ブランドアセットの上書き、クレジットの消費、公開、リモート状態の変更を行わないでください。
  • プロバイダーの承認とローカルツールのインストール承認は、それぞれ別のチェックポイントとして扱ってください。一方の承認が、もう一方の承認を意味することはありません。
  • プロンプト、アセット、スニペット、レポートに、シークレット、プライベートパス、内部ホスト名、非公開メタデータ、顧客データを含めないでください。
  • 参照メディアをRecraftに送信したり、既存のアイデンティティが維持されると主張したりしないでください。
  • 絶対パス、UNCパス、ルート外へ抜けるパストラバーサル、シンボリックリンクを介してルート外へ抜けるREADMEアセット参照は拒否してください。
  • 互換性のあるフォールバックとGitHubでの手動プレビューなしに、アニメーションSVG、Lottie、またはラスター形式がGitHub READMEで正しく表示されると約束しないでください。
  • ユーザーが明示的に背景を要求しない限り、透明度を維持してください。

参照資料

タスクに必要なものだけを読みます。

  • references/provider-routing.md:Recraftの実行可否、コストの事前確認、承認、固定設定、フォールバック。
  • references/output-contract.md:公開するフィールドとステータス値の厳密な定義。
  • references/asset-transformation.md:SVGの直接作成、変換、検証、変更の境界。
  • references/asset-pipeline.md:正規アセット、エクスポート機能のゲート、透明度の確認。
  • references/export-recipe.md:信頼できるリポジトリレシピの境界、および再利用可能な静的PNG/アニメーションGIFエクスポーターの仕様。
  • references/local-tooling.md:最小限のエクスポーターの選択、インストール承認、検証、ブラウザープレビューへのフォールバック経路。
  • references/motion-rubric.md:決定論的なモーション仕様と視覚効果の抑制設定の要件。
  • references/github-readme-compatibility.md:READMEとWebでの提供方法、およびレンダラーのフォールバック。
  • references/readme-audit-safety.md:ルート配下に限定したREADMEアセットの調査。
  • references/readme-snippets.md:アクセシブルなREADMEおよびデモのマークアップ。

スクリプト

  • scripts/validate_logo_svg.py <svg>:正規SVGを厳密に検証します。
  • scripts/inspect-animated-image.mjs <asset>:生成されたメタデータ除去済みGIF、APNG、またはアニメーションWebPを変更せずに検証します。
  • scripts/export-readme-logo-animation.mjs --root <repo> --recipe <relative.mjs> [--check] [--replace]:信頼できるリポジトリレシピを検証し、承認済みのローカルツールを使用して静的PNGとアニメーションGIFをエクスポートします。検証してからコミットし、コミット時に既存ファイルを上書きしないことを確認します。エクスポーターが変更するのは、宣言された出力先のうち存在しないファイルだけです。--replaceを明示した場合は上書きします。--checkではエクスポーターによる書き込みは行われませんが、信頼されたレシピは実行されます。
  • scripts/audit-readme-logo-assets.mjs --root <repo-root> --readme <root-relative-readme>:ルート内に収まる範囲に限定してREADMEの参照とフォールバックの役割を監査します。ファイルは変更しません。
  • scripts/generate-readme-logo-snippet.mjs --fallback <path> --alt <text> --width <px> --height <px> [options]:マークアップを標準出力に表示します。

省略可能なフラグを使用する前に、スクリプトを--help付きで実行してください。

出力形式

タスクを実行した場合は、必ず次のフィールドを報告してください。

Workflow: audit | create | transform | animate
Source route: <route>
Selection: <task evidence and rationale>
Write scope and protected originals: <scope>
Provider state: <state>
Approval state: <state>
Motion readiness: <state>
Animation delivery: <state>

続けて、アセットスタック、モーション仕様、READMEでの提供方法、検証の根拠、残るブロッカーを報告してください。各項目の意味はreferences/output-contract.mdの定義に厳密に従ってください。

完了基準

  • 4 つすべてのワークフローが提示され、明確な意図があれば選択を通知し、意図が曖昧な場合は選択を求めていること。
  • audit が厳密に読み取り専用であること。
  • create、transform、animate の各ルートが成功した場合、SVG マスター、モーション仕様、アニメーションレシピ、静的 PNG、アニメーション GIF を生成し、検証していること。
  • 変更を伴うルートで必要なツールが不足している場合、検証済みの中間成果物を保持しつつ、成功ではなく納品未完了として報告していること。
  • 有料生成はすべて、実行時の事前確認と、その特定のバッチに対する明示的な承認に追跡可能であること。
  • 生成済みと報告するラスターデータはすべて存在し、該当するインスペクターの検査に合格していること。
  • README 内のローカルパスはすべて、シンボリックリンク解決後も宣言されたリポジトリルート内にとどまること。
  • README のアニメーションに、意味のある静的フォールバック、動きの低減に対応した表示、明示的な寸法と代替テキストがあり、GitHub での手動プレビューが必須であること。

実行環境間の移植性

ホストに依存しないワークフローを 1 つだけ維持してください。Codex、Cursor、Claude、または別のエージェント名に応じて分岐したり、エージェント固有のコマンドを出力したりしないでください。ソース、承認、検証、モーション、出力の各契約は共通であるため、現時点では調整するメリットはありません。後にホストが実質的に異なるツールや出力契約を必要とする場合にのみ、分割を再検討してください。

障害時の対応

  • プロバイダーの現在の機能、正確なモデルの利用可否、または現在の費用を確認できない場合は、その制約を報告し、SVG をローカルで作成してください。
  • プロバイダーの承認待ちの場合は、生成前に停止してください。承認されなかった場合は、その旨を一度記録し、ローカルで続行してください。
  • 厳密な SVG またはレシピの検証に失敗した場合は、ソースを修正して検証を再実行してください。モーション対応済みと報告してはいけません。
  • 必須のエクスポーターまたはインスペクターの実行環境がなく、インストールが拒否または禁止されていない場合は、必要最小限の正確なツール事前確認を提示し、すぐに承認を求めてください。承認待ちの間は Animation delivery: blocked とし、まだ何もインストールしないでください。
  • インストールが拒否、禁止、または利用不能の場合は、可能であれば検証済みの SVG、モーション仕様、チェック済みのレシピを保持し、Animation delivery: incomplete と報告してください。代替のラスターデータを作成してはいけません。
  • Playwright が想定するブラウザーを見つけられない場合でも、ラスターデータのエクスポーターを利用不能と判定してはいけません。既に設定されている Chrome または Chromium の実行ファイルを再利用し、次に既存の agent-browser を使用してください。CLI またはブラウザーをダウンロードする前に承認を求めてください。
  • README のアセット参照がルート内に収まらない場合は、読み取る前に拒否し、パスの分類を報告してください。

コメント