Skills recharts

install

source · Clone the upstream repo

git clone https://github.com/amanahmed2222/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/amanahmed2222/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/recharts" ~/.claude/skills/amanahmed2222-skills-recharts && rm -rf "$T"

manifest: skills/recharts/SKILL.md

source content

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