financial-design-systemsPatterns 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.
Install via ClawdBot CLI:
clawdbot install wpank/financial-design-systemsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 20, 2026
Develop a real-time trading dashboard for retail investors, featuring interactive charts for stock price movements, portfolio performance tracking, and market trend analysis. This scenario leverages dark-themed visualizations to reduce eye strain during extended use, with color-coded gains/losses for quick decision-making.
Build an analytics platform for financial institutions to visualize historical data, such as asset price trends and volatility patterns, using candlestick charts and percentage bars. The dark theme ensures readability in low-light environments, while real-time data display supports monitoring of market fluctuations.
Create a tool for portfolio managers to display performance metrics, including gains/losses via sparklines and percentage bars, with customizable color palettes for different asset classes. This scenario focuses on consistency across charts to enhance user experience in tracking multiple investments.
Design a user interface for a cryptocurrency exchange, featuring price charts with dark themes to highlight market movements and candlestick patterns for trading analysis. The visualizations help users monitor real-time price changes and make informed trading decisions.
Offer the skill as a subscription-based service for fintech companies, providing regular updates and premium chart components. Revenue is generated through monthly or annual fees, with tiers based on usage volume and advanced features like real-time data integration.
License the skill to large financial institutions for internal use in their dashboards and analytics tools, with customizations and support contracts. Revenue comes from one-time licensing fees and ongoing maintenance charges, targeting banks and investment firms.
Provide a free basic version with limited chart types and themes, while charging for advanced features like real-time data display and premium color palettes. Revenue is generated through upgrades and in-app purchases, appealing to startups and individual developers.
💬 Integration Tip
Integrate by importing the provided TypeScript/React components and color palettes into existing projects, ensuring compatibility with libraries like Recharts for seamless chart rendering.
Scored Apr 15, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag