financial-data-visualization
Patterns for building dark-themed financial charts and data visualizations. Covers chart theming, color scales for gains/losses, and real-time data display. Use when building trading dashboards or financial analytics. Triggers on chart theme, data visualization, financial chart, dark theme, gains losses, trading UI.
Why use this skill?
Build beautiful, accessible, and consistent dark-themed financial charts for trading dashboards with pre-configured color palettes and Recharts patterns.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/financial-design-systemsWhat This Skill Does
The financial-data-visualization skill provides a standardized set of design patterns, color palettes, and component configurations for OpenClaw users building professional-grade financial applications. By focusing on dark-themed aesthetics, the skill ensures that developers can create readable and data-dense interfaces suitable for high-frequency trading platforms, portfolio trackers, or market analysis dashboards. It simplifies the implementation of complex Recharts components by offering pre-configured themes that enforce visual consistency—specifically regarding accessibility, color-coded gain/loss indicators, and clean typography suitable for tabular financial data.
Installation
To integrate this skill into your environment, run the following command in your terminal:
clawhub install openclaw/skills/skills/wpank/financial-design-systems
Once installed, the library of theme variables and components will be available for import into your TypeScript/React financial dashboard projects.
Use Cases
- Trading Dashboards: Create real-time price trend visualizations that prioritize low-eye-strain color schemes for prolonged viewing sessions.
- Portfolio Performance Tracking: Utilize the built-in gain/loss color scales to instantly visualize asset performance against benchmarks.
- Market Analytics: Build scalable, interactive charts for historical price data, volume analysis, and multi-series comparisons.
- Financial Reporting: Standardize tooltips and axis labels across multiple reporting modules to ensure a unified user experience.
Example Prompts
- "OpenClaw, help me implement the financial-data-visualization pattern for my new crypto dashboard, ensuring the chart matches the dark theme palette provided in the documentation."
- "Generate a Recharts AreaChart component for my stock price tracker using the 'positive' and 'negative' colors from the financial design system."
- "Create a custom tooltip for my trading UI that properly formats currency values and uses the standardized surface and grid styling."
Tips & Limitations
The primary limitation of this skill is its dependency on Recharts. If your project requires high-performance canvas-based rendering (like heavy-duty WebGL charting for thousands of data points), you may need to extend these patterns manually. Ensure that your parent components respect the 'hsl' color definitions provided, as these are tuned specifically for dark-mode contrast. Always verify the accessibility of your chosen data series colors if you are displaying more than five lines on a single chart to avoid color confusion.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wpank-financial-design-systems": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.