From studio-skills
Builds interactive React dashboards in Treasure Studio using render_react with preloaded React 18, Recharts, Tailwind CSS, and dark mode theme. For explicit dashboard or custom React requests beyond render_chart.
npx claudepluginhub treasure-data/td-skills --plugin treasure-work-skillsThis skill uses the workspace's default tool permissions.
Use `mcp__tdx-studio__render_react`. For simple charts, prefer `render_chart`.
Creates interactive charts, dashboards, and data visualizations using Recharts for React/Next.js, Chart.js for Vue/Angular, and D3.js for custom needs.
Builds dark-themed React UIs using Tailwind CSS with glassmorphism effects and Framer Motion animations for dashboards, admin panels, and data-rich apps.
Provides dark-themed React UI components using Tailwind CSS and Framer Motion for dashboards, admin panels, and data-rich apps with glassmorphism effects and animations.
Share bugs, ideas, or general feedback.
Use mcp__tdx-studio__render_react. For simple charts, prefer render_chart.
Do NOT import anything — these are pre-loaded:
useState, useEffect, useMemo, etc.)isDark (boolean) and theme ("light" / "dark") — reactive, update on toggleHTML elements — Tailwind dark: variants:
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
Recharts props — isDark ternary:
<XAxis stroke={isDark ? "#9ca3af" : "#6b7280"} />
<Tooltip contentStyle={{ backgroundColor: isDark ? "#1f2937" : "#fff" }} />
<CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#374151" : "#e5e7eb"} />
export default function KPIDashboard({ data }) {
const { kpis, trend } = data;
const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444'];
return (
<div className="p-6 space-y-6 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div className="grid grid-cols-4 gap-4">
{kpis.map((kpi, i) => (
<div key={i} className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="text-sm text-gray-500 dark:text-gray-400">{kpi.label}</div>
<div className="text-2xl font-bold" style={{ color: COLORS[i] }}>{kpi.value}</div>
</div>
))}
</div>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={trend}>
<CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#374151" : "#e5e7eb"} />
<XAxis dataKey="date" stroke={isDark ? "#9ca3af" : "#6b7280"} />
<YAxis stroke={isDark ? "#9ca3af" : "#6b7280"} />
<Tooltip contentStyle={{ backgroundColor: isDark ? "#1f2937" : "#fff" }} />
<Line type="monotone" dataKey="value" stroke="#3b82f6" />
</LineChart>
</ResponsiveContainer>
</div>
);
}