Eugene-Studio/creativeai-dataviz-skill

creativeai-dataviz-skill は何をしますか？

CreativeAI.frの記事をChart.jsデータビジュアライゼーションに変換し、WordPressのHTMLブロックとして埋め込めるClaudeスキル。

概要

このスキルを使用すると、CreativeAI.frの記事からデータを抽出し、Chart.jsを使用したインタラクティブなグラフに変換できます。生成されたグラフはWordPressのHTMLブロックとして簡単に埋め込むことができます。

使用方法

1. CreativeAI.frの記事URLを指定します。
2. スキルが記事の内容を分析し、適切なChart.js設定を生成します。
3. 生成されたHTMLコードをWordPressのカスタムHTMLブロックに貼り付けます。

サポートされているチャートタイプ

• 棒グラフ
• 折れ線グラフ
• 円グラフ
• 散布図
• その他（記事の内容に基づいて自動選択）

例

ユーザー: https://creativeai.fr/article/example-article をChart.jsのグラフに変換して
Claude: 記事を分析中...

生成されたチャートコード:
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['カテゴリA', 'カテゴリB', 'カテゴリC'],
      datasets: [{
        label: 'サンプルデータ',
        data: [10, 20, 30],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }]
    }
  });
</script>

互換性

• Claude Code
• Cursor
• Codex
• その他のClaudeベースのAIエージェント

ライセンス

このスキルはMITライセンスの下で提供されています。