Community画像github.com

namgung9406/visualize

あらゆるコンテンツやアイデアから、美しく自己完結型のHTMLビジュアライゼーションを作成します。スライドデッキ、プレゼンテーション、インフォグラフィック、ダッシュボード、フローチャート、図、タイムライン、比較表、データ可視化、ランディングページなどに最適です。

visualize とは？

このスキルは、会話の内容、データ、URL、アイデアを瞬時にプロフェッショナルな単一ファイルHTMLビジュアライゼーションに変換します。開発者やAIエージェントが「これを可視化して」「スライドにして」といったリクエストに応え、スライドデッキ、ダッシュボード、インフォグラフィック、フローチャート、タイムラインなど様々な形式を生成できます。このスキルは、評価システムとの互換性を確保するために厳格な構造を強制します。具体的には、特定のCSSカスタムプロパティ、ユーティリティメニューシステム、クラスベースのテーマ（`.theme-light` / `.theme-dark`）、Chart.jsやReveal.jsなどのCDNライブラリの正しい統合、レスポンシブデザイン、アクセシビリティ機能、スケルトンテンプレート（`references/skeleton.md`）の完全なコピーを要求します。また、チャートの信頼性を高めるChartManagerパターンや、アニメーション、印刷スタイル、キーボードナビゲーションも必須です。設計哲学は「コードは安価」であり、美しさと明瞭さを兼ね備えた、コンテンツファーストのビジュアライゼーションを提供します。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/namgung9406/skill-project/tree/HEAD/.agents/skills/visualize

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

visualize は何をしますか？

あらゆるアイデア、データ、コンテンツを、美しい単一ファイルのHTMLビジュアライゼーションに変換します。

ファイル作成後

HTMLファイルを作成した後は、常に以下の両方を行ってください:

  1. ブラウザで自動開く: IDEのブラウザを開くツールが利用可能な場合はそれを使用します。それ以外の場合は、Windowsでは Invoke-Item <filename>.html、macOSでは open <filename>.html、Linuxでは xdg-open <filename>.html を実行します。
  2. クリック可能なファイルリンクを返す: VS Codeでの応答では、生成されたワークスペースファイルへのMarkdownリンクを使用します。出力がワークスペース外にあり、クライアントがそれをサポートしている場合にのみ、file:// URLを使用します。

作成後の応答例:

ビジュアライゼーションを作成しました！ブラウザで開いています...
[my-dashboard.html](my-dashboard.html)

重要な要件 (譲れない条件)

⚠️ これら8つの要素がないと評価に失敗することが保証されています ⚠️

すべてのファイルは、references/skeleton.md のスケルトンテンプレートから開始する必要があります — テンプレート全体をコピーし、その後にコンテンツを追加してください。

  1. CSSカスタムプロパティ: 必須の正確な名前: --bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — 他の名前は不可（--bg-primary や --text-primary は不可）。重要: これらの正確なプロパティ名は評価システムとの互換性のために必要です。
  2. ユーティリティメニューシステム (必須): 完全な .viz-menu 要素と、.viz-menu-toggle ボタン、.viz-menu-dropdown コンテナ、PNGダウンロードボタン（onclick="downloadImage()"）、印刷ボタン（onclick="window.print()"）、html-to-image CDNスクリプト（<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js"></script>）を含みます。評価上重要: メニューシステムは自動的にチェックされ、欠落していると失敗の原因になります。
  3. テーマクラス (評価上重要): スタイルシートで .theme-light クラスと .theme-dark クラスの両方を、完全なカスタムプロパティ定義とともに明示的に定義する必要があります。必要な例:
:root { /* 基本プロパティ */ }
.theme-light { --bg: #ffffff; --surface: #f8f9fa; --text: #1a1a1a; /* など */ }
.theme-dark { --bg: #0a0a0a; --surface: #1a1a1a; --text: #ffffff; /* など */ }

決して :root や @media (prefers-color-scheme) だけに依存しないでください — 評価システムはクラスベースのテーマをチェックします。 4. セマンティックHTML: <main id="main-content"> 要素、必須: 主要なコンテンツブロックごとに複数の <section> 要素（ヘッダー、メトリクス、チャートなど）、スキップリンク。個別のコンテンツ領域はそれぞれセマンティックな <section> タグで囲む必要があります。 5. Chart.js 要件 (評価上重要): </head> の閉じタグの前に <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> を含める必要があります。必須: Chart.jsスクリプトの直後に <script>Chart.defaults.animation = false;</script> を追加します（アニメーションの不具合を防ぎ、評価システムによって自動的にチェックされます）。必須のチャート検証: すべてのチャート関数は if (typeof Chart === 'undefined') { console.error('Chart.js not loaded'); return; } で始まる必要があります。チャートのアクセシビリティ: すべてのcanvas要素には role="img" 属性と説明的な aria-label 属性が必要です。重要なチャート設定: アクセシビリティのために maintainAspectRatio: false、responsive: true、plugins: { tooltip: { enabled: true } } を設定します。決してツールチップを無効にしないでください — 評価システムは有効なツールチップをチェックします。チャート信頼性システム: 堅牢な統合のために専用のChartManagerパターンを使用します:

var ChartManager = {
  charts: new Map(),
  safeInit: function(canvasId, config) {
    if (typeof Chart === 'undefined') {
      console.error('Chart.js library not loaded - check CDN inclusion');
      return null;
    }
    try {
      if (this.charts.has(canvasId)) {
        this.charts.get(canvasId).destroy();
        this.charts.delete(canvasId);
      }
      var ctx = document.getElementById(canvasId);
      if (!ctx) {
        console.error('Canvas element not found: ' + canvasId);
        return null;
      }
      // 競合するチャートインスタンスがないことを確認
      if (ctx.chart) {
        ctx.chart.destroy();
        delete ctx.chart;
      }
      // アクセシビリティ属性を設定
      ctx.setAttribute('role', 'img');
      if (!ctx.getAttribute('aria-label')) {
        ctx.setAttribute('aria-label', 'Chart visualization');
      }
      // 拡張エラーハンドリングで初期化
      var chart = new Chart(ctx, config);
      this.charts.set(canvasId, chart);
      return chart;
    } catch (error) {
      console.error('Chart initialization failed for ' + canvasId + ':', error);
      return null;
    }
  },
  updateTheme: function() {
    if (typeof Chart === 'undefined') return;
    this.charts.forEach(function(chart, canvasId) {
      try {
        chart.update();
      } catch (error) {
        console.error('Chart theme update failed for ' + canvasId + ':', error);
      }
    });
  },
  destroyAll: function() {
    this.charts.forEach(function(chart) {
      try {
        chart.destroy();
      } catch (error) {
        console.error('Chart destruction failed:', error);
      }
    });
    this.charts.clear();
  }
};

生の new Chart() の代わりに ChartManager.safeInit() を使用してください。重要なチャート設定: アクセシビリティのために maintainAspectRatio: false、responsive: true、plugins: { tooltip: { enabled: true } } を設定します。チャートコンテナの寸法: コンテナには、チャートが正しくレンダリングされるように、明示的な height を 300px 以上設定する必要があります。静的な16進数カラーではなく、CSSカスタムプロパティを使用したテーマ対応の色を使用してください。Chart.js CDNで import/export 構文を決して使用しないでください — 標準の var 宣言のみを使用してください。

Chart.js トラブルシューティング (重要): チャートが空白の白い領域として表示される場合:

  • Chart.js CDNが </head> の前に含まれていることを確認
  • Chart.defaults.animation = false; がCDNの直後にあることを確認
  • チャートの初期化がDOMContentLoadedイベントリスナー内にあることを確認
  • ファイル内にモジュールのimport/export構文がないことを確認
  • ChartManager.safeInit() パターンが正しく使用されていることを確認
  • canvasに role="img" と aria-label 属性があることを確認
  1. レスポンシブデザイン: セクション間の間隔は48px以上、重要: 375pxビューポートで水平方向のオーバーフローがないこと（必須: 水平スクロールを防ぐために @media (max-width: 375px) { body { overflow-x: hidden; } } を追加）、必須のフォントサイズ階層: h1 ≥ 2.5rem、h2 ≥ 2rem、h3 ≥ 1.5rem、body = 1rem。スライドデッキの要件: タイトルスライドのh1 ≥ 3rem、コンテンツスライドのタイトル ≥ 2.5rem、見出しレベル間の明確な視覚的区別。スライドセクションの間隔: スライド内の主要セクション間は48px以上の間隔が必要（タイトルとコンテンツ間、コンテンツとチャート間、チャートとナビゲーション間）。すべてのレイアウトを375px幅でテストしてください — ダッシュボードは特にチャートコンテナのオーバーフローが発生しやすいです。 CSSコンテナクエリ: 高度なレスポンシブ対応のために、コンテナベースのクエリを使用:
.chart-container { container-type: inline-size; }
@container (max-width: 400px) { 
  .chart-legend { display: none; } 
  .chart-title { font-size: 1rem; }
}

これにより、ビューポートのメディアクエリを超えた真のコンポーネントレベルのレスポンシブ対応が可能になります。 7. 印刷とアクセシビリティ: @media print スタイル、@media (prefers-reduced-motion: reduce) によるアニメーションの無効化 8. エントランスアニメーション (必須): .animate クラス、data-reveal 属性、または CSS @keyframes によるエントランスアニメーションを含める必要があります。評価上重要: アニメーションの存在は自動的に検出され、必須です。 9. JavaScript関数: cycleTheme()、toggleMenu()、トップレベルの変数には let/const ではなく var を使用

🔥 重要: skeleton.md を正確にコピー → "YOUR CONTENT HERE" をビジュアライゼーションコンテンツに置き換える → ファイルを保存

基本原則

  1. 単一ファイルHTML — CSS/JSをインラインに含む1つの .html ファイル。任意のブラウザで開き、オフラインでも動作し、簡単にメール送信できます。
  2. ライトテーマ最適化 — モダンなデザインはライトモードの品質を優先します。ダークテーマはトグルで利用可能です。
  3. デフォルトで美しい — 最初の出力が、修正を繰り返さずともプロフェッショナルに見えるべきです。
  4. コンテンツファースト — ビジュアライゼーションはメッセージに貢献します。明瞭さを美学のために犠牲にしないでください。
  5. レスポンシブ — 明示的に固定寸法（例：16:9スライド）でない限り、デスクトップ、タブレット、モバイルで動作します。
  6. 視覚的な抑制 — プロフェッショナルなデザインは、ノイズを増やす装飾要素を避けます。浮遊するグラデーションの球体、虹色の境界線、装飾的なアニメーションは使用しないでください。

哲学

HTMLは「ウェブサイト」ではなく、ビジュアライゼーションツールです。コードは安価です。誰もが何でもビジュアライズできる力を与えられるべきです。このスキルは、会話のコンテキスト、URL、記事、データ、または生のアイデアを、数秒で視覚的で理解しやすいものに変換します。

ユーザーは、Claude Codeとの会話の中でこれを呼び出します。会話の全コンテキスト（議論してきた内容、共有したリンク、貼り付けたデータ）をソースマテリアルとして使用してください。URLが指定された場合は、それをクロールしてコンテンツを抽出し、ビジュアライズします。

出力ルール

必須の最初のステップ: references/skeleton.md から完全なスケルトンをコピーしてください — これには必要な要素すべて（メニュー、テーマシステム、CSSプロパティ、セマンティックHTML、アクセシビリティ機能）が含まれています。HTMLをゼロから作成しないでください。

  • 1つの .html ファイルを ~/Downloads/（またはユーザー指定のパス）に書き込みます
  • ファイル名: 説明的なケバブケース（例: q4-revenue-dashboard.html、team-roadmap-deck.html）
  • skeleton.md テンプレートから開始し、<!-- YOUR CONTENT HERE --> セクションにコンテンツを追加します
  • すべてのカスタムスタイルは、スケルトンのベーススタイルの後の <style> に記述
  • CDNライブラリの使用を推奨 — 作業に最適なツールを使用:
    • Tailwind CSS — https://cdn.tailwindcss.com（ユーティリティファーストスタイリング、自由に使用）
    • Chart.js — https://cdn.jsdelivr.net/npm/chart.js（棒、折れ線、円、レーダー、ドーナツグラフ）
    • D3.js — https://cdn.jsdelivr.net/npm/d3@7（複雑/カスタムデータ可視化、フォースグラフ）
    • Mermaid — https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js（フローチャート、シーケンス図）
    • Three.js — 適切な場合に3D
    • Reveal.js — 必要に応じて本格的なスライドエンジン。重要: html, body { height: 100%; overflow: hidden; } を設定し、.reveal コンテナに height: 100% を与える必要があります。設定では数値の寸法を使用する必要があります: Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) — '100%' のような文字列のパーセンテージは決して使用しないでください。ビューポートの高さがゼロになり、空白のスライドが表示されます。必須: Reveal.jsのデフォルトコントロールを無効にする (controls: false) — デフォルトの < > 矢印オーバーレイは見栄えが悪いです。代わりに、カスタムの最小限の下部ナビゲーションバーを追加:
<nav class="slide-nav" aria-label="スライドナビゲーション">
  <button onclick="prevSlide()" aria-label="前のスライド">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <span class="slide-counter" id="slideCounter">1 / 8</span>
  <button onclick="nextSlide()" aria-label="次のスライド">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</nav>

.slide-nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9998; }
.slide-nav button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s; }
.slide-nav button:hover { opacity: 0.7; }
.slide-counter { font-size: 12px; color: var(--text-secondary); font-weight: 400; min-width: 40px; text-align: center; opacity: 0.35; }
  • Leaflet — 地図と地理空間データ（https://unpkg.com/[email protected]/dist/leaflet.js + CSS）。地理データには必須 — SVGで大陸の形状を手書きしないでください。OpenStreetMapタイルまたは最小限のタイルプロバイダーを使用します。
  • アイコンとシンプルなグラフィックにはSVGを使用 — ユーザーが提供しない限り、外部画像URLは決して使用しない
  • 可能な場合はJSよりもCSSアニメーションを優先

詳細なCDNリンク、パターン、ヒントについては references/libraries.md を参照してください。

デザインシステム

以下のデフォルトを適用します。これらは意見に基づいており、テスト済みです — ユーザーが要求した場合のみ上書きしてください。

完全なデザインシステムリファレンス: 完全なタイポグラフィ、色、スペーシング、アニメーション、アクセシビリティ、視覚的な洗練の仕様については references/design-system.md を参照してください。

重要なハイライト（詳細はリファレンスを参照）:

デザインノート

テーマシステム (重要):

  • クラスベースのテーマのみ使用 — <html class="theme-dark"> または <html class="theme-light">
  • テーマトグルはhtmlクラスを変更: document.documentElement.className = 'theme-' + newTheme
  • 決して data-theme 属性を使用しないでください — 評価システムはクラスベースのテーマを期待します
  • 必須のCSSカスタムプロパティ: --bg, --surface, --text, --accent, --border（評価互換性のための最小セット）

タイポグラフィ:

  • Interフォント必須 — https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap
  • 必須のフォントウェイト階層: h1 ≥ 700、h2 ≥ 600、h3 ≥ 500、body = 400（重要な評価要件）
  • 見出しには -0.03em のトラッキング
  • 優れた韓国語タイポグラフィ: 韓国語コンテンツの場合、本文にはNoto Sans KR、UI要素にはInterを使用します。韓国語には line-height: 1.6（ラテン語の1.4に対して）を適用します。韓国語のMediumウェイトは西洋のRegular (400) に対応します。以下を含めてください: https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap

色:

  • クラスベースのテーマのみ（@media prefers-color-scheme は不可）
  • ダーク: #0A0A0A 背景、#EDEDED テキスト。ライト: #FAFAF9 背景、#0f172a テキスト
  • リファレンスを参照...

関連スキル

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 画像 skills