关于 trading-analysis-dashboard-template
用于基于模板制作独立 HTML 交易仪表板的设计 Skill，涵盖图表交互、主题与模式控制及验证，并要求明确标注未知数值。
主要功能
- 01浅色与深色模式切换
- 02实时与演示模式
- 03图表十字线与提示框
- 04浮动图表聚焦视图
- 05键盘命令面板
适用场景
- 01制作交易分析仪表板
- 02定制标的名称与标题
- 03生成单文件 HTML 成品
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/trading-analysis-dashboard-template确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
example.htmlassets/template.htmlreferences/checklist.md详细介绍
交易分析仪表盘模板
生成一个高级、数据密集、华尔街风格的交易仪表盘，并将其制作为独立的 HTML 文件。
资源映射
trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
工作流
- 阅读当前的
DESIGN.md，然后将字体、颜色和布局映射为 CSS 变量。 - 将
assets/template.html复制到index.html。 - 根据用户需求个性化标题、交易品种名称和数值标签。
- 保持交互体验完整：
- 浅色／深色模式切换
- 实时／演示模式
- 图表悬停十字线和工具提示
- 点击图表以聚焦（浮动模态框样式）
- 键盘命令面板（
/）
- 输出必须是单个 HTML 文件（内嵌 CSS + 内嵌 JS，不依赖框架）。
- 对于未知的真实数值，使用占位符（
—）或中性标签，确保内容准确。 - 生成前，根据
references/checklist.md进行验证。
输出约定
在制品前添加一个句子，然后：
<artifact identifier="trading-analysis-dashboard" type="text/html" title="Trading Analysis Dashboard">
<!doctype html>
<html>...</html>
</artifact>
评论
支持 Markdown