skills.rest
Dzakiamriz22
Dzakiamriz22COMMUNITY
Explore all skills by this author →
GitHub

charts

Generate accessible responsive charts with shadcn/ui and recharts components.

1|Updated Jul 15, 2026
Search Tags:#data visualization#analytics#charts#dashboard#shadcn#recharts
One-click install
npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill charts-dzakiamriz22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: charts
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/charts
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill charts-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the complexity of creating accessible, responsive, and visually consistent data charts by leveraging the shadcn/ui and recharts ecosystem.

Core Features & Use Cases

  • Standardized Visualization: Provides pre-configured templates for line, bar, area, and pie charts that adhere to a strict design system.
  • Accessibility First: Ensures every chart includes proper labels, tooltips, and keyboard navigation support out of the box.
  • Use Case: Quickly generate an analytics dashboard for a SaaS application that maintains consistent color tokens and responsive behavior across all screen sizes.

Quick Start

Use the charts skill to generate a responsive bar chart comparing monthly sales data for the current quarter.

Frequently Asked Questions about charts

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

FAQPage Schema
How do I build accessible data visualizations with shadcn/ui and recharts?▼

To build accessible data visualizations with shadcn/ui and recharts, use this skill to generate pre-configured line, bar, area, and pie charts that enforce strict design system tokens, ensuring proper labels and keyboard navigation support out of the box.

What is the best way to create a responsive analytics dashboard using existing UI component libraries?▼

The best way to create a responsive analytics dashboard is by generating standardized chart templates that integrate directly with your existing UI component libraries, ensuring consistent color tokens and responsive behavior across all screen sizes.

Do I need an existing UI component library to use these recharts templates?▼

Yes, you need an existing UI component library because these recharts templates require integration with your current setup to ensure consistent styling and functional tooltips across your data visualizations.

How do I add keyboard navigation and tooltips to recharts components?▼

To add keyboard navigation and tooltips to recharts components, generate your charts using this accessibility-first approach, which includes proper labels, tooltips, and keyboard navigation support automatically.

Can I enforce strict design system tokens when generating data visualizations?▼

Yes, you can enforce strict design system tokens when generating data visualizations by using pre-configured templates that adhere directly to your established color tokens and styling rules.

Related Skills

Explore More Software Engineering Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
alongor666alongor666
1

vue-component-dev

Develop Vue 3 components with Pinia stores and ECharts charts.

Community
Intermediate
andreiverdesandreiverdes

shadcn Dashboard + Landing Template Expert

Guides React + TypeScript + Vite + Tailwind dashboard and landing frontends with shadcn/ui patterns.

Community
Intermediate
MesferAliMesferAli

atlas-ui

Provide guidance on Atlas UI components, theming, forms, and data display.

Community
Intermediate