animated-financial-display
Patterns for animating financial numbers with spring physics, formatting, and visual feedback. Covers animated counters, price tickers, percentage changes, and value flash effects. Use when building financial dashboards or trading UIs. Triggers on animated number, price animation, financial display, number formatting, spring animation, value ticker.
Why use this skill?
Build professional financial dashboards with spring-animated numbers, price tickers, and value flash effects. Install to enhance your trading UI with smooth motion and accurate data formatting.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/animated-financial-displayWhat This Skill Does
The animated-financial-display skill provides a robust toolkit for creating highly responsive, visually polished financial user interfaces. It focuses on the intersection of UI motion and numerical precision, offering pre-built components for spring-physics number counters, real-time price tickers, and state-driven value flash effects. By abstracting away the complexities of React animation libraries like react-spring, it allows developers to quickly integrate high-performance financial data visualizations. The skill includes utilities for currency formatting, ensuring that large numbers (billions, millions) are handled with elegant abbreviation, which is critical for clean trading dashboards.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/wpank/animated-financial-display
Ensure that you have @react-spring/web installed in your project, as it acts as the primary dependency for the spring-based animations.
Use Cases
This skill is engineered specifically for:
- Real-time Trading Terminals: Updating stock prices with subtle 'flash' indicators (green for up, red for down) to provide immediate visual feedback to traders.
- Portfolio Dashboards: Animating large totals as they update, creating a professional 'growth' sensation that enhances user trust.
- Analytics Panels: Displaying KPIs that change frequently, where the movement of the numbers adds a layer of depth and responsiveness to the interface.
- Cryptocurrency Trackers: Managing high-frequency updates with smooth transitions rather than jarring jumps.
Example Prompts
- "OpenClaw, please set up an AnimatedNumber component for my crypto portfolio that tracks the daily change in USD with 2 decimal points."
- "I need a FlashingValue component for my stock dashboard that turns red when the price drops and green when it climbs, using the formatCurrency helper."
- "Generate a performance-optimized price ticker section for my dashboard that displays live market data using the spring animation pattern provided in the animated-financial-display skill."
Tips & Limitations
When using these components, ensure you wrap your values in a stable reference if you are polling data from an external API to prevent unnecessary re-renders. The flash effect duration is set to 600ms by default; you may need to adjust this depending on the refresh rate of your data source. Note that these components rely on client-side rendering due to their dependency on animation browser APIs. For extremely high-frequency data feeds, consider throttling your state updates to avoid saturating the browser's main thread.
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-animated-financial-display": {
"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.