Financial Data Visualization 是一套面向金融数据可视化的设计模式参考文档，专注于解决交易类应用常见的暗黑主题图表设计需求。该 Skill 以 TypeScript/TSX 代码示例为核心，提供从基础配色系统到完整组件实现的完整解决方案，涵盖 K 线图、面积图、迷你 Sparkline、百分比对比条等多种金融场景常用图表类型。
核心用法方面，开发者可直接引用预设的 HSL 配色系统（chartColors），其中正红负绿的标准金融配色经过明度调校，确保在深色背景（hsl(222 47% 11%)）上具备充足对比度。Recharts 主题配置（chartConfig）提供了坐标轴、网格、Tooltip 的标准化样式，大幅降低组件间样式不一致的问题。Skill 内包含的 7 个完整代码模式可直接复制到项目中使用，包括价格面积图（带渐变填充）、K 线图配色方案、双向百分比条、SVG Sparkline 和图例组件等。
显著优点体现在专业性与工程化的平衡：配色方案基于 HSL 色彩空间设计，便于程序化处理（如根据盈亏动态调整饱和度）；所有组件均使用 CSS 变量和 Tailwind 类名，与现代 React 技术栈无缝集成；代码示例充分考虑金融场景的特殊需求——如使用 tabular-nums 保证数字等宽对齐、font-mono 确保价格显示的专业感。此外，Skill 明确标注了「NEVER Do」清单，提醒开发者避免色盲友好性缺失、过度动画等常见设计陷阱。
潜在局限主要包括三方面：首先，该 Skill 为纯设计参考文档，不包含实际可执行的图表库封装，开发者仍需自行安装 recharts 等依赖并处理数据获取逻辑；其次，代码示例假设使用特定的技术栈（React + TypeScript + Tailwind CSS），对于 Vue、Angular 或其他样式方案的项目需要额外适配；第三，Skill 未提供响应式设计的详细指南，复杂布局在不同屏幕尺寸下的适配需开发者自行处理。
适合的目标群体主要是：正在构建加密货币/股票交易平台的 frontend 工程师、需要为金融 SaaS 产品添加数据可视化功能的开发者、以及希望建立内部设计系统的技术团队产品经理。对于完全无前端经验的用户，该 Skill 更适合作为与开发团队沟通的设计参考，而非直接可用的解决方案。
使用风险方面，常规层面需注意：recharts 在大数据量场景（如毫秒级 K 线）下可能存在性能瓶颈，建议配合数据抽样或 Canvas 方案使用；深色主题在部分投影仪或低质量屏幕上可能出现对比度不足，关键数据建议添加形状编码作为冗余信息；Skill 本身无外部依赖和网络请求，但作为 T3 来源（个人开发者），建议关注维护者的长期更新承诺，关键项目可考虑 fork 后自行维护。