Menu
Add a new Recharts visualization with theme-aware styling to the dashboard
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/kwkraus/my-dashboard --skill add-chartThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | add-chart |
| description | Add a new Recharts visualization with theme-aware styling to the dashboard |
When adding a new chart to this dashboard application using Recharts:
Use the useChartColors hook for theme-aware colors:
const colors = useChartColors();
This hook automatically updates chart colors when theme changes between light/dark modes.
Choose the appropriate chart type:
MiniLineChart or MiniBarChart from @/lib/charts for compact displaysApply consistent theming to all chart elements:
stroke="hsl(var(--border))" opacity={0.5}fill="hsl(var(--muted-foreground))" for tick labelscontentStyle={{
backgroundColor: "hsl(var(--popover))",
border: "1px solid hsl(var(--border))",
borderRadius: "8px",
fontSize: "12px",
color: "hsl(var(--popover-foreground))",
}}
colors.chart1colors.chart2Make charts responsive:
<ResponsiveContainer width="100%" height={250} className="sm:h-[300px]">fontSize: 10 for axis labelsComponent structure for full-size charts:
function ChartComponent() {
const colors = useChartColors();
return (
<ResponsiveContainer width="100%" height={250}>
{/* Chart implementation */}
</ResponsiveContainer>
);
}
Add to the charts array in DashboardCharts.tsx:
{
title: "Chart Title",
description: "Chart description",
component: YourChartComponent,
}
Mark component as client-side if it's in its own file:
"use client";
function SalesLineChart() {
const colors = useChartColors();
return (
<ResponsiveContainer width="100%" height={250}>
<LineChart data={salesData}>
<CartesianGrid
strokeDasharray="3 3"
stroke="hsl(var(--border))"
opacity={0.5}
/>
<XAxis
dataKey="month"
tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
/>
<YAxis
tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
/>
<Tooltip contentStyle={{
backgroundColor: "hsl(var(--popover))",
border: "1px solid hsl(var(--border))",
borderRadius: "8px",
}} />
<Line
type="monotone"
dataKey="value"
stroke={colors.chart1}
strokeWidth={3}
/>
</LineChart>
</ResponsiveContainer>
);
}
import { MiniLineChart } from "@/lib/charts";
const trendData = [
{ x: "Mon", y: 10 },
{ x: "Tue", y: 15 },
{ x: "Wed", y: 12 },
];
<DashboardCard title="Trend" value="142">
<MiniLineChart data={trendData} />
</DashboardCard>
src/components/DashboardCharts.tsxsrc/lib/charts.tsxsrc/app/globals.cssadd-dashboard-cardadd-theme-colors