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

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