エージェント作成ガイドライン

<!-- 独自のスタイルを持つ自己完結フラグメント -->
<style>
  .hg-weather-card {
    background: var(--hg-surface-elevated, #f9fafb);
    border: 1px solid var(--hg-border, #e5e7eb);
    border-radius: var(--hg-radius, 8px);
    padding: var(--hg-space-4, 16px);
  }
</style>
<div class="hg-weather-card">
  <h2>Weather in Tokyo</h2>
  <p>18°C, partly cloudy</p>
  <div id="weather-detail"></div>
  <button hx-get="/api/agent/weather/detail"
          hx-target="#weather-detail"
          hx-swap="innerHTML">
    Show Forecast
  </button>
</div>

<!-- IDでターゲット -->
<button hx-get="/api/data" hx-target="#output">Load</button>
<div id="output"></div>

<!-- トリガー要素からの相対ターゲット -->
<div class="card">
  <button hx-post="/api/update"
          hx-target="closest .card"
          hx-swap="outerHTML">
    Update Card
  </button>
</div>

<!-- 要素自体をターゲット（デフォルト動作） -->
<div hx-get="/api/refresh" hx-trigger="every 30s" hx-swap="innerHTML">
  Auto-refreshing content
</div>

<button hx-post="/api/agent/action"
        hx-vals='{"action":"analyze","dataset":"sales_q4","format":"chart"}'
        hx-target="#result"
        hx-swap="innerHTML">
  Analyze Sales Data
</button>

<form hx-post="/api/agent/query" hx-target="#result" hx-swap="innerHTML">
  <input type="text" name="query" placeholder="Ask anything..." />
  <select name="model">
    <option value="fast">Fast</option>
    <option value="thorough">Thorough</option>
  </select>
  <button type="submit">Ask</button>
</form>
<div id="result"></div>

/* 良い例: フォールバック付きテーマ変数を使用 */
.my-component {
  background: var(--hg-surface, #ffffff);
  color: var(--hg-text, #111827);
  border: 1px solid var(--hg-border, #e5e7eb);
}

/* 悪い例: ホストテーマに合わないハードコードされた色 */
.my-component {
  background: #ffffff;
  color: #333333;
  border: 1px solid #ccc;
}

/* 良い例: レスポンシブ */
.chart-container {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}

/* 悪い例: 固定幅はオーバーフローする可能性 */
.chart-container {
  width: 600px;
  height: 400px;
}

/* このフラグメントにスコープ */
.hg-weather-card { ... }
.hg-weather-temp { ... }
.hg-weather-icon { ... }

<div id="chart-container" style="width:100%; height:300px;"></div>
<script>
  // This script runs when HTMX swaps this fragment into the DOM
  var container = document.getElementById('chart-container');
  // ... render a chart using a library loaded in the bootstrap
</script>

<button onclick="document.dispatchEvent(new CustomEvent('hg:data', {
  detail: { action: 'selected', itemId: 42 }
}))">
  Select Item
</button>

<a data-hg-navigate="/dashboard" href="#">Go to Dashboard</a>

<button onclick="window.parent.postMessage({
  type: 'hg:navigate', url: '/settings'
}, '*')">
  Open Settings
</button>

<button hx-post="/api/agent/analyze"
        hx-target="#result"
        hx-indicator="#spinner">
  Analyze
</button>
<span id="spinner" class="hg-indicator">Loading...</span>
<div id="result"></div>

<div class="hg-error" style="
  background: var(--hg-surface-elevated, #f9fafb);
  border: 1px solid #ef4444;
  border-radius: var(--hg-radius, 8px);
  padding: var(--hg-space-4, 16px);
  color: var(--hg-text, #111827);
">
  <strong>Something went wrong</strong>
  <p style="color: var(--hg-text-muted, #6b7280);">
    Unable to retrieve weather data. Please try again.
  </p>
  <button hx-get="/api/agent/weather"
          hx-target="closest .hg-error"
          hx-swap="outerHTML">
    Retry
  </button>
</div>

<!-- 良い例: セマンティック -->
<nav aria-label="Results navigation">
  <button hx-get="/api/page/1" hx-target="#results">Page 1</button>
  <button hx-get="/api/page/2" hx-target="#results">Page 2</button>
</nav>

<!-- 悪い例: divだらけ -->
<div>
  <div onclick="...">Page 1</div>
  <div onclick="...">Page 2</div>
</div>

<div role="alert" aria-live="polite">
  Analysis complete: 3 anomalies found.
</div>

<button hx-post="/api/agent/action"
        aria-label="Delete report for Q4 2025"
        hx-confirm="Delete this report?">
  Delete
</button>

<div aria-live="polite" aria-atomic="false">
  <div id="result" hx-swap="innerHTML">
    <!-- ストリーミングコンテンツがここに表示、スクリーンリーダーが更新をアナウンス -->
  </div>
</div>