エッセイやブログ投稿用の高品質なアニメーション説明ビジュアルを作成します。ユーザーが概念、プロセス、データ、またはアイデアをインタラクティブな Web アニメーションで視覚化したい場合に使用します。 「ビジュアルを作成する」、「このコンセプトをアニメーション化する」、「説明を作成する」、「このアイデアを視覚化する」、「このプロセスを図示する」、「このデータを表示する」などのリクエスト、またはエッセイのコンテンツが視覚的な説明から恩恵を受ける場合にトリガーされます。抽象的な概念 (メンタル モデル、フレームワーク)、技術プロセス (アルゴリズム、システム)、データの視覚化 (傾向、比較) を扱います。 Web コンテンツに直接埋め込まれる自己完結型の HTML/CSS/JS を出力します。
コマンドラインで explainer-visuals AI スキルを開発環境にすばやくインストール
ソース: petekp/agent-skills。
Create animated, interactive visuals that make complex ideas intuitive.
Great explainer visuals don't just illustrate—they reveal. They show the structure hidden in complexity, the motion implicit in static descriptions, the relationships that words struggle to convey.
Before creating any visual, conduct a brief discovery interview using AskUserQuestion. Understand not just WHAT to visualize, but WHY this idea needs visual treatment.
エッセイやブログ投稿用の高品質なアニメーション説明ビジュアルを作成します。ユーザーが概念、プロセス、データ、またはアイデアをインタラクティブな Web アニメーションで視覚化したい場合に使用します。 「ビジュアルを作成する」、「このコンセプトをアニメーション化する」、「説明を作成する」、「このアイデアを視覚化する」、「このプロセスを図示する」、「このデータを表示する」などのリクエスト、またはエッセイのコンテンツが視覚的な説明から恩恵を受ける場合にトリガーされます。抽象的な概念 (メンタル モデル、フレームワーク)、技術プロセス (アルゴリズム、システム)、データの視覚化 (傾向、比較) を扱います。 Web コンテンツに直接埋め込まれる自己完結型の HTML/CSS/JS を出力します。 ソース: petekp/agent-skills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/petekp/agent-skills --skill explainer-visualsエッセイやブログ投稿用の高品質なアニメーション説明ビジュアルを作成します。ユーザーが概念、プロセス、データ、またはアイデアをインタラクティブな Web アニメーションで視覚化したい場合に使用します。 「ビジュアルを作成する」、「このコンセプトをアニメーション化する」、「説明を作成する」、「このアイデアを視覚化する」、「このプロセスを図示する」、「このデータを表示する」などのリクエスト、またはエッセイのコンテンツが視覚的な説明から恩恵を受ける場合にトリガーされます。抽象的な概念 (メンタル モデル、フレームワーク)、技術プロセス (アルゴリズム、システム)、データの視覚化 (傾向、比較) を扱います。 Web コンテンツに直接埋め込まれる自己完結型の HTML/CSS/JS を出力します。 ソース: petekp/agent-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/petekp/agent-skills --skill explainer-visuals インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/petekp/agent-skills