What problem does it solve? Analytical charts that work on desktop often break on phones: tooltips slide off-screen, legends grow taller than the chart, and breakdown panels cover the plot. This Skill provides a workflow and design rules for making chart explanations readable at small viewport widths. ## Core Features & Use Cases - Mobile breakdown cards: Replace oversized floating tooltips with a compact card below the chart that shows the current x-axis label, active series values, and a total line. - Legend compaction: Convert tall side legends on donut and pie charts into wrapped chip lists or compact grids placed below the chart. - Touch-safe interaction: Drive the mobile explanation state from tap or chart focus instead of hover only, with active-series emphasis in both the chart and the breakdown rows. - Use Case: A Recharts analytics dashboard renders fine on desktop but its tooltip overflows at 375 px width. Use this Skill to split behavior: keep the desktop tooltip, add a mobile breakdown card, compress the legend, and verify at 320 px. ## Quick Start Use the dashboard-mobile-chart-compaction skill to refactor my dashboard so the chart tooltip and legend stay readable on phone screens without covering the plot.
