infographic-generator-p5

SKILL.md

Generate interactive educational infographics using p5.js that visualize relationships between concepts through nodes and edges. Infographics are data-driven visualizations that read from JSON files in vis-network format, allowing users to hover over elements to see a short definition in a tooltip and detailed information with links below the drawing area.

Infographics transform complex concept relationships into visual, explorable diagrams. Unlike MicroSims which focus on simulation and interaction controls, infographics emphasize information display and exploration through hover interactions. The control region is dedicated exclusively to displaying detailed information about the currently hovered item.

Create a JSON file following the vis-network format with metadata, groups, nodes, and edges:

このスキルは、vis ネットワーク互換の JSON データを読み取る p5.js を使用して、インタラクティブなインフォグラフィック ビジュアライゼーションを生成します。このスキルは、ユーザーが概念間の関係を探索できる、ノード、エッジ、ホバー インタラクションを含む教育用インフォグラフィックを作成するときに使用します。各インフォグラフィックには、ラベル付きの図形が表示され、ホバーするとツールチップが表示され、描画領域の下のコントロール パネルに詳細な説明が表示されます。ノードは絶対座標に配置されます。 出力はレスポンシブデザインではありません。 ソース: vishalsachdev/claude-skills。

原文を見る