Anthropic ClaudeLLM・AI開発⭐ リポ 0品質スコア 50/100

generative-ui

Name: generative-ui
Author: himself65

claude.aiの会話内でインタラクティブなHTML/SVGウィジェットをインラインレンダリングする`show_widget`ツールのデザインシステムとガイドラインです。データの可視化、インタラクティブなグラフ・ダッシュボード・図表・フローチャート・モックアップの作成、スライダーやトグルを使ったツールの構築など、プレーンテキストやMarkdownを超えたビジュアル・インタラクティブなコンテンツが必要な場面で使用します。「見せて」「可視化して」「図にして」「チャートを作って」「説明して（視覚的に）」といったリクエストや、財務データの表示・比較グリッドの作成時にも自動でトリガーされます。

description の原文を見る

> Design system and guidelines for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. This skill provides the complete Anthropic "Imagine" design system so Claude produces high-quality widgets without needing to call read_me first. Use this skill whenever the user asks to visualize data, create an interactive chart, build a dashboard, render a diagram, draw a flowchart, show a mockup, create an interactive explainer, or produce any visual content beyond plain text or markdown. Triggers include: "show me", "visualize", "draw", "chart", "dashboard", "diagram", "flowchart", "widget", "interactive", "mockup", "illustrate", "explain how X works" (with visual), or any request for visual/interactive output. Also triggers when the user wants to display financial data visually, create comparison grids, or build tools with sliders, toggles, or live-updating displays.

SKILL.md 本文

Generative UIスキル

このスキルはClaudeの組み込みshow_widgetツール — claude.aiの会話内にインタラクティブなHTML/SVGウィジェットをインラインで描画するGenerative UI機能の完全な設計システムを含んでいます。以下のガイドラインは実際のAnthropicの「Imagine — Visual Creation Suite」設計ルールであり、read_meセットアップコールの必要なく高品質のウィジェットを直接作成できるよう抽出されています。

仕組み: claude.aiでは、Claudeはshow_widgetツールにアクセスでき、生のHTML/SVGフラグメントを会話内にインラインで描画します。このスキルは、その使用方法を学ぶための設計システム、テンプレート、およびパターンを提供します。

ステップ1: 適切なビジュアルタイプを選択

名詞ではなく、動詞でルーティングします。同じ主題でも、何が尋ねられたかによって視覚化が異なります：

ユーザーが言う	タイプ	形式
「Xはどのように機能するのか」	説明図	SVG
「Xアーキテクチャ」	構造図	SVG
「ステップは何か」	フローチャート	SVG
「複利を説明する」	インタラクティブな説明	HTML
「これらのオプションを比較する」	比較グリッド	HTML
「収益チャートを表示する」	Chart.jsチャート	HTML
「連絡先カードを作成する」	データレコード	HTML
「夕焼けを描く」	アート/イラスト	SVG

ステップ2: ウィジェットを構築

構造（厳格な順序）

<style>  →  HTML content  →  <script>

トークン単位で出力がストリーミングされます。スタイルは対象となる要素の前に存在する必要があり、スクリプトはDOMが準備できた後に実行される必要があります。

哲学

シームレス: ユーザーはホストUIとウィジェットがどこで終わるかを気づかない
フラット: グラデーション、メッシュ背景、ノイズテクスチャ、または装飾的な効果なし。クリーンなフラットサーフェス
コンパクト: 本質的なものをインラインで表示。説明はテキストで
テキストは応答に、ビジュアルはツールに — すべての説明テキスト、説明、および要約は、ツール呼び出しの外側の通常の応答テキストとして記述される必要があります。ツール出力には視覚要素のみが含まれるべきです

コアルール

コメント（または/* comments */）なし。トークンを無駄にし、ストリーミングを破断
フォントサイズ11px未満なし
絵文字なし — CSSシェイプまたはSVGパスを使用
グラデーション、ドロップシャドウ、ぼかし、グロー、またはネオン効果なし
外側のコンテナに暗い/カラーの背景なし（透明のみ — ホストが背景を提供）
タイポグラフィ: 2ウェイトのみ：400 regular、500 medium。600または700は絶対に使用しないでください。見出し：h1=22px、h2=18px、h3=16px — すべてfont-weight 500。本文テキスト=16px、weight 400、line-height 1.7
文頭大文字のみ。Title Caseは絶対禁止、ALL CAPSは絶対禁止
文中の太字なし — エンティティ名はcode styleで、太字ではなく
<!DOCTYPE>、<html>、<head>、または<body>なし — コンテンツフラグメントのみ
position: fixedなし — 通常フローのレイアウトを使用
タブ、カルーセル、またはストリーミング中のdisplay: noneセクションなし
ネストされたスクロールなし — auto-fit height
コーナー：カード用にborder-radius: var(--border-radius-lg)、要素用にvar(--border-radius-md)
片側ボーダーに丸いコーナーなし（border-left、border-top）
表示されるすべての数値を丸める — Math.round()、.toFixed(n)、またはIntl.NumberFormatを使用

CDN許可リスト（CSP執行）

外部リソースは以下からのみロードできます：

cdnjs.cloudflare.com
cdn.jsdelivr.net
unpkg.com
esm.sh

他のオリジンはすべてブロックされています — リクエストはサイレントに失敗します。

CSS变量

背景: --color-background-primary（白）、-secondary（サーフェス）、-tertiary（ページ背景）、-info、-danger、-success、-warning テキスト: --color-text-primary（黒）、-secondary（ミュート）、-tertiary（ヒント）、-info、-danger、-success、-warning ボーダー: --color-border-tertiary（0.15α、デフォルト）、-secondary（0.3α、ホバー）、-primary（0.4α）、セマンティック-info/-danger/-success/-warning タイポグラフィ: --font-sans、--font-serif、--font-mono レイアウト: --border-radius-md（8px）、--border-radius-lg（12px）、--border-radius-xl（16px）

すべて自動的にライト/ダークモードに対応します。

ダークモードは必須です — すべての色が両方のモードで機能する必要があります：

HTMLで：常にテキストにCSS変数を使用。color: #333のようにハードコーディングしない
SVGで：事前構築されたカラークラス（c-blue、c-tealなど）を使用 — ライト/ダークを自動的に処理
メンタルテスト：背景がほぼ黒い場合、すべてのテキスト要素が読み可能になるか？

`sendPrompt(text)`

チャットにユーザーが入力したかのようにメッセージを送信するグローバル関数。ユーザーの次のステップがClaudeの思考から利益を得られる場合に使用します。フィルタリング、ソート、切り替え、計算はJSで代わりに処理します。

ステップ3: `show_widget`でレンダリング

show_widgetツールはclaude.aiに組み込まれており、アクティベーション不要です。ウィジェットコードを直接渡します：

{
  "title": "snake_case_widget_name",
  "widget_code": "<style>...</style>\n<div>...</div>\n<script>...</script>"
}

パラメータ	タイプ	必須	説明
`title`	文字列	はい	ウィジェットのSnake_case識別子
`widget_code`	文字列	はい	HTMLまたはSVGコード。SVGの場合：`<svg>`で始める。HTMLの場合：コンテンツフラグメント

SVG出力の場合：widget_codeを<svgで始めます — 自動的に検出され、適切にラップされます。

ステップ4: Chart.jsテンプレート

チャートの場合、onloadコールバックパターンを使用してスクリプトロード順を処理します：

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;">
  <div style="background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem;">
    <div style="font-size: 13px; color: var(--color-text-secondary);">Label</div>
    <div style="font-size: 24px; font-weight: 500;" id="stat1">—</div>
  </div>
</div>

<div style="position: relative; width: 100%; height: 300px; margin-top: 1rem;">
  <canvas id="myChart"></canvas>
</div>

<div style="display: flex; align-items: center; gap: 12px; margin-top: 1rem;">
  <label style="font-size: 14px; color: var(--color-text-secondary);">Parameter</label>
  <input type="range" min="0" max="100" value="50" id="param" step="1" style="flex: 1;" />
  <span style="font-size: 14px; font-weight: 500; min-width: 32px;" id="param-out">50</span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
function initChart() {
  const slider = document.getElementById('param');
  const out = document.getElementById('param-out');
  let chart = null;

  function update() {
    const val = parseFloat(slider.value);
    out.textContent = val;
    document.getElementById('stat1').textContent = val.toFixed(1);

    const labels = [], data = [];
    for (let x = 0; x <= 100; x++) {
      labels.push(x);
      data.push(x * val / 100);
    }

    if (chart) chart.destroy();
    chart = new Chart(document.getElementById('myChart'), {
      type: 'line',
      data: { labels, datasets: [{ data, borderColor: '#7F77DD', borderWidth: 2, pointRadius: 0, fill: false }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { grid: { display: false } } }
      }
    });
  }

  slider.addEventListener('input', update);
  update();
}
if (window.Chart) initChart();
</script>

Chart.jsルール:

CanvasはCSS変数を解決できません — ハードコードされた16進数を使用
高さはラッパーdivでのみ設定、canvas自体では設定しない
常にresponsive: true, maintainAspectRatio: false
常にデフォルトの凡例を無効にしてカスタムHTML凡例を構築
数値フォーマット：$-5Mではなく-$5M（通貨記号の前に負の符号）
CDNスクリプトタグでonload="initChart()"を使用し、if (window.Chart) initChart();をフォールバックとして使用

ステップ5: SVG図テンプレート

フローチャートと図には、事前構築されたクラスを持つSVGを使用します：

<svg width="100%" viewBox="0 0 680 H">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <!-- Single-line node (44px tall) -->
  <g class="node c-blue" onclick="sendPrompt('Tell me more about this')">
    <rect x="250" y="40" width="180" height="44" rx="8" stroke-width="0.5"/>
    <text class="th" x="340" y="62" text-anchor="middle" dominant-baseline="central">Step one</text>
  </g>

  <!-- Connector arrow -->
  <line x1="340" y1="84" x2="340" y2="120" class="arr" marker-end="url(#arrow)"/>

  <!-- Two-line node (56px tall) -->
  <g class="node c-teal" onclick="sendPrompt('Explain this step')">
    <rect x="230" y="120" width="220" height="56" rx="8" stroke-width="0.5"/>
    <text class="th" x="340" y="140" text-anchor="middle" dominant-baseline="central">Step two</text>
    <text class="ts" x="340" y="158" text-anchor="middle" dominant-baseline="central">Processes the input</text>
  </g>
</svg>

SVGルール:

ViewBoxは常に680px幅（viewBox="0 0 680 H"）。Hをコンテンツ + 40pxパディングに設定
セーフエリア：x=40〜x=640、y=40〜y=(H-40)
事前構築されたクラス：t（14px）、ts（12px secondary）、th（14px medium 500）、box、node、arr、c-{color}
すべての<text>要素はクラスを持つ必要があります（t、ts、またはth）
ボックス内のテキスト垂直センタリングにdominant-baseline="central"を使用
コネクタパスにはfill="none"が必要です（SVGはデフォルトでfill: black）
ストローク幅：ボーダーとエッジで0.5px
すべてのノードをクリック可能にします：onclick="sendPrompt('...')"

ステップ6: インタラクティブ説明テンプレート

インタラクティブな説明（スライダー、ライブ計算、インラインSVG）の場合：

<div style="display: flex; align-items: center; gap: 12px; margin: 0 0 1.5rem;">
  <label style="font-size: 14px; color: var(--color-text-secondary);">Years</label>
  <input type="range" min="1" max="40" value="20" id="years" style="flex: 1;" />
  <span style="font-size: 14px; font-weight: 500; min-width: 24px;" id="years-out">20</span>
</div>

<div style="display: flex; align-items: baseline; gap: 8px; margin: 0 0 1.5rem;">
  <span style="font-size: 14px; color: var(--color-text-secondary);">$1,000 →</span>
  <span style="font-size: 24px; font-weight: 500;" id="result">$3,870</span>
</div>

<div style="margin: 2rem 0; position: relative; height: 240px;">
  <canvas id="chart"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
function initChart() {
  // slider logic, chart rendering, sendPrompt() for follow-ups
}
if (window.Chart) initChart();
</script>

ユーザーがフォローアップを尋ねられるようにするにはsendPrompt()を使用します：sendPrompt('What if I increase the rate to 10%?')

ステップ7: ユーザーに応答

ウィジェットをレンダリングした後、簡潔に説明します：

ウィジェットが何を表示しているか
どのように相互作用するか（どのコントロールが何を行うか）
データからの重要な洞察1つ

簡潔に保ちます — ウィジェット自体が物語ります。

リファレンスファイル

references/design_system.md — 完全なカラーパレット（9ラップ × 7ストップ）、CSS変数、UIコンポーネントパターン、メトリックカード、レイアウトルール
references/svg_and_diagrams.md — SVG viewBoxセットアップ、フォント校正、事前構築されたクラス、フローチャート/構造/説明図パターンと例
references/chart_js.md — Chart.js設定、スクリプトロード順、canvas サイジング、凡例パターン、ダッシュボードレイアウト

特定の設計トークン、SVG座標計算、またはChart.js設定の詳細が必要な場合は、関連するリファレンスファイルを読んでください。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: himself65
リポジトリ: himself65/finance-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/himself65/finance-skills / ライセンス: MIT

generative-ui

SKILL.md 本文

Generative UIスキル

ステップ1: 適切なビジュアルタイプを選択

ステップ2: ウィジェットを構築

構造（厳格な順序）

哲学

コアルール

CDN許可リスト（CSP執行）

CSS变量

`sendPrompt(text)`

ステップ3: `show_widget`でレンダリング

ステップ4: Chart.jsテンプレート

ステップ5: SVG図テンプレート

ステップ6: インタラクティブ説明テンプレート

ステップ7: ユーザーに応答

リファレンスファイル

詳細情報

関連スキル

agent-browser

anyskill

engram

skyvern

pinchbench

openui

SKILL.md 本文

Generative UIスキル

ステップ1: 適切なビジュアルタイプを選択

ステップ2: ウィジェットを構築

構造（厳格な順序）

哲学

コアルール

CDN許可リスト（CSP執行）

CSS变量

sendPrompt(text)

ステップ3: show_widgetでレンダリング

ステップ4: Chart.jsテンプレート

ステップ5: SVG図テンプレート

ステップ6: インタラクティブ説明テンプレート

ステップ7: ユーザーに応答

リファレンスファイル

詳細情報

関連スキル

agent-browser

anyskill

engram

skyvern

pinchbench

openui

`sendPrompt(text)`

ステップ3: `show_widget`でレンダリング