Dashboard Creation Skill 用于指导创建专业的 HTML/CSS/JavaScript 仪表盘，涵盖数据可视化、实时更新以及与免费数据源的集成，内容基于 2025-2026 最佳实践与现代架构模式。
一、用途 该技能面向需要搭建仪表盘的场景，提供从数据源选择到页面生成、可视化集成与实时更新的完整方法。
二、主要能力
- 数据源发现：帮助用户寻找合适的免费公共 API。技能要求先检查 Star Child 自身已有的数据源，而不是假设。检查方式包括读取 core/http_client.py 中的 DEFAULT_PROXIED_APIS 与 DOMAIN_TO_API_TYPE，以及通过 bash env | grep -i "api_key|_key" 查看已配置的密钥。资料中列出的常见数据源包括 coingecko（加密市场数据）、twelvedata（股票、外汇、商品）、taapi（技术分析指标）、coinglass（衍生品/期权数据）、lunarcrush（社交情绪数据）、twitterapi（Twitter/X 数据）、birdeye（聪明钱与钱包分析）、oneinch（DEX 聚合器），并明确说明该列表可能过时，应始终检查 core/http_client.py。技能还提供代理自动配置模式、浏览器 Fetch API 调用 CoinGecko 与 Twelve Data 的示例代码，以及 API 选择决策树与速率限制影响计算器（含每日调用量计算公式）。
- 仪表盘生成：提供两种方式。方式 A 为模板驱动，推荐 Tabler（基于 Bootstrap 5.3、40k+ GitHub stars、100+ 响应式组件、200+ 示例页面、5,400+ SVG 图标、内置深色模式、MIT 许可）与 AdminKit（基于 Bootstrap 5、无 jQuery 依赖、使用 Webpack、Sass、BrowserSync）。方式 B 为自定义 HTML/CSS/JS，提供模块化目录结构、核心 HTML 结构、响应式 CSS Grid 布局示例（移动端单列、平板 2 列、桌面 3 列，含跨列卡片类）。
- 可视化集成：按需求选择库。Chart.js 为默认推荐，适合简单图表与快速实现；ApexCharts 适合美观的实时仪表盘，具备动画与 appendData 实时更新；D3.js 仅在用户明确要求自定义可视化、标准图表类型不足或需要复杂交互/动画时使用。技能给出三者的引入方式与代码示例。
- 实时更新：推荐 SSE（Server-Sent Events），适用于服务器到客户端的流式传输，覆盖约 95% 的仪表盘用例，具备简单、自动重连、基于 HTTP、更优 TTFB 等优点，但仅支持单向（服务器到客户端）。提供客户端 EventSource 的监听与关闭写法，以及服务端 FastAPI 示例开头。
三、使用方式 技能以研究优先为原则：选择数据源前先计算总 API 调用量（更新频率 × 资产数量 × 24 小时）；中等/低频更新与需要历史数据时使用 Star Child 付费 API；高频、免鉴权或特殊需求时研究免费替代方案；向用户给出 2-4 个经过调研的选项及其权衡；优先采用 2025-2026 来源且仍在维护的方案。
四、适用场景 适合需要数据可视化面板的场合，例如加密或股票行情面板、实时指标监控、营销数据面板等。
五、限制 资料中未提供具体收费标准、价格与平台信息，也未提供该技能的完整官方限制说明，缺失事实暂未提供。技能明确要求不得推荐未计算速率限制影响、已弃用或无人维护的 API，不得在高频仪表盘中未经检查配额就使用付费 API。