analytics-metrics_skill

Overview

This skill builds data visualization and analytics dashboards using Recharts and reusable UI components. It provides chart components (line, bar, pie), KPI cards, formatting utilities, and a dashboard layout pattern to quickly assemble metrics-driven interfaces. Use it to display KPIs, trends, and distributions with responsive, styled components.

How this skill works

The skill supplies ready-to-use React components that wrap Recharts primitives (LineChart, BarChart, PieChart) inside responsive containers and styled panels. It includes a KPI card component for single-value metrics with trend indicators, plus number/currency/percent formatting utilities. Combine the components into a grid layout to produce production-friendly dashboards.

When to use it

• Creating a metrics dashboard or admin analytics page
• Displaying time-series trends (revenues, users, conversions)
• Building KPI cards for executive summaries
• Showing categorical distributions with pie charts
• Embedding responsive charts in components or pages

Best practices

• Keep charts responsive by using ResponsiveContainer and fixed heights
• Normalize data keys (e.g., month, revenue, users) so components stay generic
• Use formatting utilities to ensure consistent number/currency/percent display
• Limit series per chart to maintain readability; split when necessary
• Provide tooltips and legends for discoverability and context

Example use cases

• Revenue over time line chart combined with active-user series for marketing reporting
• Sales-by-category bar chart on a product analytics page
• KPI grid on a top-level dashboard showing total revenue, active users, conversion rate, and AOV
• Distribution pie chart for customer segments or traffic sources
• Reusable dashboard layout for admin panels where charts and KPI cards are swapped dynamically