前言¶
數據分析或腳本跑完後，常見做法是導出 CSV，再手工做圖或搭一個臨時看板。前者圖表與敘述脫節，後者要維護服務和前端工程。若目標只是「把一批結構化數據變成帶圖表、能直接發給同事打開的頁面」，且希望本地用瀏覽器就能看，Chart.js 可視化報告生成器這類 Agent Skill 提供的是另一條路徑：在對話裏交給 AI，按 Skill 約定生成單文件 HTML 報告。
下面介紹這個 Skill 的定位、已公開的能力，以及在 SkillHub 上的安裝方式。
這是什麼¶
Chart.js 可視化報告生成器是 SkillHub 上的社區 Skill，座標爲 @user_af28adda/generate-report123，當前版本 1.0.0，分類爲 data-analysis，發佈者爲 user_af28adda，來源標註爲 community。
一句話定位：將結構化數據轉換爲美觀的 HTML 圖表報告；官方簡介寫明支持多種圖表類型、深色主題，無需服務器，瀏覽器直接打開。標籤 requires_api_key=false，表示按 SkillHub 公開信息，使用該 Skill 不依賴額外 API Key 配置。
核心功能¶
以下能力均來自 SkillHub 頁面與抓取元數據，未在資料中出現的細節不作展開。
- 結構化數據 → HTML 報告：輸入側爲結構化數據（具體字段與圖表映射由 Skill 內
SKILL.md指導 Agent 執行，安裝後可在技能目錄查閱）。 - 多種圖表類型：頁面簡介明確支持多種圖表；名稱中的 Chart.js 表明報告側基於 Chart.js 做可視化（具體類型以技能文檔爲準）。
- 深色主題：生成報告默認面向深色主題展示。
- 純靜態交付：產出爲 HTML，本地或任意環境用瀏覽器打開即可，不依賴自建後端。
SkillHub 統計（以抓取資料爲準）：評分 100000，下載 9154，安裝 9。
安裝與啓用¶
SkillHub 官方建議通過 SkillHub 安裝與優先源配置 完成 CLI 與技能安裝。頁面給出的安裝提示詞爲：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_af28adda/generate-report123`。
若已具備 skillhub CLI，安裝時需用 --dir 指向當前 Agent 的 skills 目錄，否則默認裝到 ./skills/ 可能不會被識別。官方文檔列出的常用路徑如下：
| 環境 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
示例命令（將 <skills 目錄> 換成上表對應路徑）：
command -v skillhub && skillhub --version
skillhub install user_af28adda/generate-report123 --dir <skills 目錄>
未安裝 CLI 時，可按同一文檔執行完整安裝腳本（需聯網）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
在 Cursor 中，也可將上述提示詞發給 Agent，由其按 skillhub.md 完成安裝。各客戶端差異以 SkillHub 安裝文檔爲準；未在文檔中單獨說明的客戶端，不寫臆測步驟。
典型用法¶
公開頁面未附帶獨立示例倉庫，可復現的流程如下。
- 按上一節安裝並啓用
@user_af28adda/generate-report123。 - 在對話中說明要生成的報告主題，並提供結構化數據（如表格、JSON、統計結果摘要等，格式以 Skill 指導爲準）。
- 讓 Agent 按 Skill 生成 HTML 報告文件。
- 用瀏覽器打開生成的 HTML，覈對圖表與數據是否一致。
若需精確提示詞模板、支持的圖表枚舉或數據 schema，應在安裝後閱讀該 Skill 目錄下的 SKILL.md，資料中未抓取到全文時不在此編造。
適用場景與注意¶
適合誰
- 需要快速把分析結果做成可分享的 HTML 圖表頁，又不想爲此搭服務。
- 已在 Cursor、Claude Code、Codex 等支持 Skills 的環境裏工作，希望用對話驅動出圖與排版。
注意
- 社區來源（community），維護節奏與問題反饋以發佈者 user_af28adda 與 SkillHub 頁面爲準。
- 「多種圖表類型」以 Skill 實際能力爲限，安裝前可在 SkillHub 查看版本與說明是否滿足需求。
- 生成質量依賴所給數據的結構與清晰度；複雜交互式看板、實時數據源不在「靜態 HTML + 瀏覽器打開」這一產品表述範圍內。
結尾¶
Chart.js 可視化報告生成器把「結構化數據 → 深色主題 HTML 圖表報告 → 瀏覽器直開」串成一條可在 Agent 裏走通的路徑，且公開標籤表明無需 API Key。需要安裝或查看說明時，可訪問 SkillHub 頁面：
