Introduction

When building a financial website, the stumbling blocks usually aren’t about the “writing” itself, but rather specific technical hurdles: where to source market data, how to align the “red for rise, green for fall” color scheme with the CSS design system, how to structure data for multiple holdings, how to combine charts without creating clutter, and finally, where to host it for accessibility. Relying on ad-hoc searches and piecing together snippets often results in a collection of conflicting fragments.

The Skill introduced below organizes these steps into a replicable document. It is not just a template repository, but a complete process specification derived from a real-world project.

What is This

“Finance All-in-One Website — Investment Command Center Building Guide” is a Skill document categorized under dev-programming. It is identified by the coordinate @user_253cb571/finance-command-center, version 1.0.0, sourced from the community, published and maintained by user_253cb571, with requires_api_key=false.

It addresses a clear problem: building a purely static, dual-theme, real-time market-driven personal ETF investment dashboard from scratch, with the goal of enabling users to replicate a functionally equivalent website by following the documentation.

According to SkillHub page information, it has a score of 100000, 1187 downloads, and 0 installs. This data merely indicates distribution status and should not be taken as a conclusion regarding quality.

Core Features

This document covers a complete pipeline for website construction, breaking down each step:

  1. Architecture Design: Defining the structure of a static site before discussing specific pages and data flows.
  2. CSS Design System: A glassmorphism style with a color scheme following A-share conventions (red for rise, green for fall) instead of the general Western convention.
  3. Data Layer: Designing a data structure for 13 holdings, separating holding information from market quote information.
  4. Real-time Quote Integration (Dual Source): Using MCP for Tongdaxin (TDX) and JSONP for Tencent Securities, with the two sources complementing each other.
  5. ECharts Matrix: Doughnut charts, radar charts, pie charts, and area charts, plus custom SVG mini-trends.
  6. Interaction Polish: Command palette, scroll reveal animations, and sticky navigation.
  7. Deployment Configuration: Providing a deployment plan for CloudStudio.
  8. Known Bug Library: Compiling 8 specific pitfalls encountered during development along with their corresponding fixes.

While none of these features are novel in isolation, their value lies in being strung together into a clearly ordered path, complete with troubleshooting fixes.

Installation & Activation

As of the time of capture, neither the official page nor the API endpoint could be accessed successfully. Therefore, this article does not provide any unverified installation commands.

The only verifiable information is the source:

Official Address: https://api.skillhub.cn/user_253cb571/finance-command-center
SkillHub Page: https://www.skillhub.cn/skills/user_253cb571/finance-command-center
Coordinate: @user_253cb571/finance-command-center
Category: dev-programming
Source: community

Once the document is obtained, place it according to the Skill loading method of your coding Agent: Cursor reads from the project’s .cursor/skills or user-level skills directory, while Codex CLI and Claude Code have their own conventions for skill loading. The document is based on the general SKILL.md format and does not rely on a specific runtime.

Typical Usage

The document targets scenarios where “the user requests to build, clone, or understand how to create a financial dashboard / command center website.” Trigger words cover Chinese terms like “Financial Website / Investment Dashboard / Holdings Board.”

The reproducible workflow is roughly as follows:

1. State that you want to build a purely static personal ETF investment dashboard.
2. Proceed in document order: Architecture Design → CSS Design System → Holdings Data Layer → Market Data Integration → ECharts Charts → Interaction Polish → CloudStudio Deployment.
3. Consult the Known Bug Library for troubleshooting when issues arise.

Note that market data integration requires distinguishing between two sources: Tongdaxin is provided via MCP, while Tencent Securities is via JSONP. The integration methods differ, so do not mix the calling conventions.

Use Cases & Caveats

Suitable Scenarios: Building a personal ETF holdings dashboard that utilizes static hosting, requires no backend, and accepts a pure front-end solution.

Limitations to Note:

  1. The dual-source integration relies on external service availability. Tongdaxin MCP and Tencent Securities JSONP are not long-term stable interfaces; it is recommended to verify their accessibility before use.
  2. “Red for rise, green for fall” is the standard color convention for A-shares (China). If targeting Hong Kong or US stocks, the color rules need to be adjusted accordingly.
  3. The 8 bug fixes in the document stem from a specific project environment. Other projects may encounter different issues; do not assume they can be solved by simply copying these fixes.
  4. With 0 installs, there is currently limited public usage history. If you encounter scenarios not covered by the document, you will need to troubleshoot them yourself.
  5. The official page is currently inaccessible, so the timeliness of the document content cannot be verified. Before implementation, it is advisable to confirm whether the key interfaces and deployment plans are still valid.

Conclusion

The value of this Skill lies in compressing the construction process of a real financial project into an executable path. It provides concrete methods ranging from the design system to deployment, accompanied by bug fix records. It is suitable for those who need to replicate similar holdings dashboards without having to start from scratch and grope in the dark.

Official Address: https://api.skillhub.cn/user_253cb571/finance-command-center