2 min read
Data Visualization
When your app displays data — temperatures, streaks, stats, timelines — this skill file ensures Claude creates visualizations that are clear, accessible, and beautiful. No chart library required for simple cases.
Filename: data-viz.md
The Skill File
Copy this into a file called data-viz.md in your project root, next to your CLAUDE.md.
# Data Visualization Conventions
Follow these data visualization conventions for all charts, graphs, and data displays in this project.
## Chart Type Selection
- Line chart → trends over time (temperature, progress)
- Bar chart → comparing quantities (daily habits, category counts)
- Donut/ring → proportions or progress toward a goal
- Simple number + label → when one metric is enough (don't over-chart)
- Avoid: 3D charts, pie charts for more than 4 items, dual-axis charts
## Implementation
- For simple charts: use SVG or CSS — no library needed
- For complex/interactive charts: use Chart.js (web) or Swift Charts (iOS/macOS)
- Always include labels and units directly on the chart
- Add aria-labels for screen readers
## Color
- Use a maximum of 5-6 colors in any single chart
- Ensure colors are distinguishable for colorblind users (avoid red/green as the only differentiator)
- Use sequential palettes for ordered data (light to dark)
- Use categorical palettes for distinct groups
- Match the app's color scheme — charts shouldn't look like a different product
## Layout & Sizing
- Charts should have a clear title
- Add sufficient padding around charts
- Make charts responsive — they should resize with their container
- On mobile, consider simplifying (fewer data points, horizontal scrolling)
## Numbers & Labels
- Round numbers for display (72°, not 72.384°)
- Use appropriate units (°F, kg, hours)
- Format large numbers (1.2k, not 1,234)
- Align numbers to the right in tablesWhen to Use This
Add this to any project that displays data — weather apps, habit trackers, dashboards, or anything with numbers and trends.