P5js Simulation

テンプレートを選ぶ

• .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 の読み込み（ローカル）が含まれていることを確認する。
• テンプレートのスケッチファイルに p5.js の setup() / draw() コードを置く。
• コードはモジュール化し、モデル（データ/状態）、ビュー（描画）、コントローラ（操作）を分ける。

Material Design スタイルを適用する

• テンプレートが使っている Material Design の足場（MDC Web / Material Web Components）で UI コントロールを作る。
• 配色、タイポグラフィ、余白などがデザインシステムに準拠していることを確認する。
• 新しいコントロール（スライダー、ボタン、カードなど）が必要なら、テンプレート内の既存パターンに従って追加する。

インタラクションを検証する

• ローカルでシミュレーションを動かす（例：index.html をブラウザで開く、または簡易サーバーを起動する）。
• p5 のキャンバスが更新され、コントロールが動き、レスポンシブなレイアウトが維持されることを確認する。

一覧ページ（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>/ とする。
• カードの順序は追加した順（末尾追記）で問題ない。

品質チェック（完了条件）

• コンソールにエラーが出ずにシミュレーションが起動する。
• インタラクティブなコントロールが Material Design でスタイルされており、アクセシビリティも配慮されている。
• p5 のスケッチがスムーズに動き（単純なシミュレーションで 30fps 以上）、UI が固まらない。
• コードが整理されている：テンプレートコードは可能な限り変更せず、カスタムロジックはシミュレーション専用の JS に置く。