
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- イベント棒グラフの完全なソースコード。コンポーネントファイルと実行可能な使用例がセットで、そのまま貼り付けて編集できます。
- 文書化されたビジュアル仕様。カラーパレット、文字サイズの体系、角丸、アイコンの線幅、モーションのタイミングをすべてトークンとして 1 か所で編集できます。
- チャート設定はシンプルなデータとして提供。自分の系列に差し替えれば、あとはチャート層が処理します。
向いている人
- ページにデータビジュアライゼーションが必要だが、チャートライブラリの組み込みは避けたい場合。
- チャートの配色や余白をページのほかの部分と揃えたい場合。
- アップデートを追い続ける依存パッケージではなく、読みやすく編集できるソースコードがほしい場合。
向いていない人
- 成熟したデザインシステムをすでに運用しているチーム。このパレットや文字サイズの体系が既存のものと衝突します。
- バージョン管理された npm パッケージを求める方。提供されるのは自分で保守するソースコードです。
- リアルタイムのストリーミングデータや、大規模データの仮想スクロールが必要なチャート。
クライアント・経営層向けレポート研究発表・技術コミュニケーションWeb デザイン・デジタル体験インフォグラフィック作成UI ビジュアル作成ホームページ作成編集可能な出力洗練されたビジュアル初心者向けウォームニュートラルティールアクセントジェネラティブ背景
この Skill について

ブロックを 1 つ貼り付けるだけで、本物のデータビジュアライゼーションがページに表示されます。SVG で手描きしたものではなく、きちんと描画されたチャートです。数値を入れれば、図形が自動で描き直されます。
手に入るもの
- イベント棒グラフの完全なソースコード。コンポーネントファイルと実行可能な使用例がセットで、そのまま貼り付けて編集できます。
- 文書化されたビジュアル仕様。カラーパレット、文字サイズの体系、角丸、アイコンの線幅、モーションのタイミングをすべてトークンとして 1 か所で編集できます。
- チャート設定はシンプルなデータとして提供。自分の系列に差し替えれば、あとはチャート層が処理します。
使い方
- セクションを置く場所をアシスタントに伝えてください。まずプロジェクトを読み込み、そのプロジェクトの書き方に合わせてブロックを書きます。
- テキストを自分の言葉に差し替えます。文字サイズや余白はそのまま崩れません。
- 数値を自分の系列に差し替えます。グラフは描き直され、配色と軸は一貫したまま保たれます。
- 公開前にスマートフォンで確認してください。もともとスマートフォンでも崩れないように作られています。
始める前に必要なもの
- 依存関係
- ECharts — 必須
- 最終検証
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…







