WORKFLOW SKILL — templates/ 配下のテンプレートを使って p5.js + Material Design でインタラクティブなシミュレーション教材を作成します。
このスキルは、p5.js を使ったインタラクティブなシミュレーション教材を、Material Design で統一された見た目で、再利用可能なテンプレートから素早く作成したいときに使います。
このスキルは、.github/skills/p5js-simulation/templates/ フォルダに *.html、*.css、*.js のスターターファイルがあり、Material Design + p5.js のプロジェクト規約に従っていることを前提としています。
以下の要件を満たす動作するインタラクティブシミュレーションを作成します。
.github/skills/p5js-simulation/templates/ 配下のテンプレートから開始し、実行可能なシミュレーションを新しいフォルダ(例:simulations/<name>/)に出力する。シミュレーションの狙いを定義する
テンプレートを選ぶ
.github/skills/p5js-simulation/templates/ の中から、目的に合う HTML/CSS/JS の足場を探す。.github/skills/p5js-simulation/templates/ に追加する。新しいシミュレーション用フォルダを作る
simulations/<slug>/)を作る。index.html、styles.css、sketch.js など)。p5.js を組み込み
index.html に正しい p5.js の読み込み(ローカル)が含まれていることを確認する。setup() / draw() コードを置く。Material Design スタイルを適用する
インタラクションを検証する
index.html をブラウザで開く、または簡易サーバーを起動する)。一覧ページ(simulations/index.html)に追加する
simulations/index.html の <div class="row g-4"> 内に、既存カードと同じ構造で新しいカードブロックを追記する。<slug> と説明文を実際の値に置き換える):
<div class="col-sm-6 col-md-4 col-lg-3">
<div
class="card bg-secondary-subtle border-secondary simulation-card h-100"
data-bs-theme="dark"
>
<div class="card-body">
<h5 class="card-title text-light">〇〇のシミュレーション</h5>
<p class="card-text text-secondary small">
シミュレーションの概要を1〜2文で記述する。
</p>
</div>
<div class="card-footer bg-transparent border-secondary">
<a href="./<slug>/" class="btn btn-outline-light btn-sm">開く</a>
</div>
</div>
</div>
href の値は simulations/<slug>/ に対応するよう ./<slug>/ とする。品質チェック(完了条件)
テンプレートが必要か?
.github/skills/p5js-simulation/templates/ に新しいテンプレートを追加し、フォルダ命名規則に従う。シミュレーションのバリエーションを複数作るか?
simulations/ 以下に別々のフォルダを作成し、共有 JS/CSS をインポートして再利用する。コンポーネントライブラリを変更したいか?
templates/ に補助ユーティリティを追加するかを判断する。.github/skills/p5js-simulation/templates/ に置く。index.html(エントリーポイント)styles.css(Material Design スタイル + レイアウト)sketch.js(p5.js スケッチコード)または同等の JS ファイル/p5js-simulation マウスの動きに反応するパーティクルシステムを、"material-card" テンプレートを使って作成して。/p5js-simulation 初速と角度のスライダー付きで放物運動シミュレータを作成して(テンプレート: .github/skills/p5js-simulation/templates/physics-basic)。/p5js-simulation 既存の .github/skills/p5js-simulation/templates/interactive-map シミュレーションにスコアカウンターとリセットボタンを追加して。templates/ の構成ルールを検証する linter/チェッカーを追加する。p5js-sketch.prompt.md)を追加する。instructions ファイルを追加する。