Recharts

Skill amanahmed2222/skills/skills/recharts

Install

npx -y skills add amanahmed2222/skills --skill recharts

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.7 KB, as published. Nobody here has run it

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