How do I install the Recharts skill?

Run npx skillmds@latest add amanahmed2222/recharts in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Recharts safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Recharts?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Recharts free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Recharts?

amanahmed2222 (@amanahmed2222) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Recharts by amanahmed2222 — Agent Skill

Name: Recharts
Author: amanahmed2222

Recharts

Use when building charts, data visualisations, or dashboards with Recharts. Also use when integrating Recharts with HeroUI, reviewing chart components, or creating responsive chart containers. Generates Recharts charts styled with HeroUI v3 design tokens and Tailwind CSS v4.

amanahmed2222 Updated Sep 17, 2026

File contents

You build Recharts charts integrated with HeroUI v3 design tokens and Tailwind CSS v4. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.

Read individual rule files in rules/ for detailed patterns and code examples.

Rules Overview

Rule	Impact	File
Container pattern	HIGH	`rules/container-pattern.md`
Theme integration	HIGH	`rules/theme-integration.md`
Custom components	HIGH	`rules/custom-components.md`

Workflow

Building a chart?

Detect setup — Confirm recharts is in package.json. Check if HeroUI v3 is installed (@heroui/react or individual packages). Detect Tailwind CSS v4 (@tailwindcss/*).
Read rules — Read all files in rules/ to load the container pattern, theme token mapping, and custom component templates.
Fetch theme tokens — Check the current HeroUI theme variables to confirm token names available in the project.
Generate component — Build the chart component applying all three rules: outer container wrapper, CSS variable colours, and custom tooltip/legend.
Verify — Check the generated code against each rule. Confirm no hardcoded hex colours, ResponsiveContainer is wrapped correctly, and tooltip uses HeroUI classes.

Reviewing existing charts?

Scan — Glob for files importing from recharts. Read each file and check against every rule in rules/.
Report — List violations grouped by rule with file paths and line numbers.
Fix — Apply corrections one violation at a time.

Quick Reminders

Always add <AccessibilityLayer /> as the first child inside every chart for screen reader support
Set isAnimationActive={false} on chart elements when inside components that re-render frequently (tables, filters)
Recharts uses SVG — style with stroke and fill props, not CSS color
Export chart prop interfaces separately so consumers can extend them
Use cartesianGrid with strokeDasharray="3 3" and theme-aware stroke colour
Never set a fixed width on ResponsiveContainer — it must always be width="100%"

Assumptions

React + TypeScript project
Recharts installed (recharts in dependencies)
HeroUI v3 installed with Tailwind CSS v4
CSS variables from HeroUI theme are available globally

---name: rechartsdescription: Use when building charts, data visualisations, or dashboards with Recharts. Also use when integrating Recharts with HeroUI, reviewing chart components, or creating responsive chart containers. Generates Recharts charts styled with HeroUI v3 design tokens and Tailwind CSS v4.---You build Recharts charts integrated with HeroUI v3 design tokens and Tailwind CSS v4. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.Read individual rule files in `rules/` for detailed patterns and code examples.## Rules Overview| Rule | Impact | File ||------|--------|------|| Container pattern | HIGH | `rules/container-pattern.md` || Theme integration | HIGH | `rules/theme-integration.md` || Custom components | HIGH | `rules/custom-components.md` |## Workflow### Building a chart?1. **Detect setup** — Confirm `recharts` is in `package.json`. Check if HeroUI v3 is installed (`@heroui/react` or individual packages). Detect Tailwind CSS v4 (`@tailwindcss/*`).2. **Read rules** — Read all files in `rules/` to load the container pattern, theme token mapping, and custom component templates.3. **Fetch theme tokens** — Check the current HeroUI theme variables to confirm token names available in the project.4. **Generate component** — Build the chart component applying all three rules: outer container wrapper, CSS variable colours, and custom tooltip/legend.5. **Verify** — Check the generated code against each rule. Confirm no hardcoded hex colours, `ResponsiveContainer` is wrapped correctly, and tooltip uses HeroUI classes.### Reviewing existing charts?1. **Scan** — Glob for files importing from `recharts`. Read each file and check against every rule in `rules/`.2. **Report** — List violations grouped by rule with file paths and line numbers.3. **Fix** — Apply corrections one violation at a time.## Quick Reminders- Always add `<AccessibilityLayer />` as the first child inside every chart for screen reader support- Set `isAnimationActive={false}` on chart elements when inside components that re-render frequently (tables, filters)- Recharts uses SVG — style with `stroke` and `fill` props, not CSS `color`- Export chart prop interfaces separately so consumers can extend them- Use `cartesianGrid` with `strokeDasharray="3 3"` and theme-aware stroke colour- Never set a fixed `width` on `ResponsiveContainer` — it must always be `width="100%"`## Assumptions- React + TypeScript project- Recharts installed (`recharts` in dependencies)- HeroUI v3 installed with Tailwind CSS v4- CSS variables from HeroUI theme are available globally

Frequently asked questions