skills.rest
michaelsvanbeek
michaelsvanbeekCOMMUNITY
Explore all skills by this author →
GitHub

charts

Standardize Recharts data visualization design with design tokens and accessibility.

1|2|Updated Apr 9, 2026
Search Tags:#theming#performance#accessibility#charts#visualization#responsive#recharts
One-click install
npx skills add https://github.com/michaelsvanbeek/personal-agent-skills --skill charts-michaelsvanbeek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: charts
Source: https://github.com/michaelsvanbeek/personal-agent-skills/tree/main/skills/charts
Command: npx skills add https://github.com/michaelsvanbeek/personal-agent-skills --skill charts-michaelsvanbeek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data visualization inconsistencies across teams and projects lead to misinterpretation and wasted development time; this skill provides standardized guidelines to design and implement charts that are accessible, themed, and reliable.

Core Features & Use Cases

  • Standard chart type recommendations and selection criteria (line, bar, area, scatter) based on data shape and audience.
  • Accessible theming and dark-mode aware visuals that align with design tokens, with color-safe palettes and keyboard-friendly tooltips.
  • Responsive rendering and performance best practices for large datasets, including downsampling strategies and efficient rendering.

Quick Start

Create a responsive Recharts-based chart that adheres to the design tokens, accessibility, and theming guidelines.

Frequently Asked Questions about charts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize data visualization theming and accessibility in React?▼

You can standardize accessible themed charts by applying design tokens for colors, configuring keyboard-friendly tooltips, and using responsive containers. This ensures consistent visualization across React applications.

What is the best way to choose a chart type based on data shape?▼

Choosing the right chart type involves selecting line, bar, area, or scatter charts based on your data shape and audience. Standardized selection criteria ensure accurate data representation and prevent misinterpretation.

How do I make Recharts components responsive and performant with large datasets?▼

To make Recharts components responsive and performant with large datasets, implement responsive containers and apply downsampling strategies. These performance best practices ensure efficient rendering without freezing the application.

Does this standardized charting approach support dark mode and design tokens?▼

Yes, this standardized charting approach supports dark mode by utilizing CSS variable-driven colors and design tokens. This creates color-safe palettes that dynamically adapt to theme changes across your application.

What are the limitations of using Recharts for data visualization?▼

Limitations of using Recharts include performance bottlenecks when rendering large datasets without downsampling strategies. Additionally, achieving full accessibility requires careful configuration of keyboard-friendly tooltips beyond default settings.

Related Skills

Explore More Software Engineering Skills→
333-333-333333-333-333

corporate-colors

Define corporate color palettes with Catppuccin warm tones for web and mobile theming.

Community
Advanced
MomoDavilukeMomoDaviluke
2

vue-chartjs-integration

Integrate Chart.js into Vue 3 with a useChart composable for reactive charts.

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
asfbay-bitasfbay-bit

oc-dash-forge

Design interactive React dashboards with Recharts or D3 for complex data.

Community
Advanced