ReddRadar
Agent skill
react-dashboard
Build interactive React dashboards in Treasure Studio using render_react. Use when the user explicitly asks for an interactive dashboard or custom React component beyond what render_chart supports.
Install this agent skill to your Project
npx add-skill https://github.com/treasure-data/td-skills/tree/main/studio-skills/react-dashboard
SKILL.md
React Dashboard
Use mcp__tdx-studio__render_react. For simple charts, prefer render_chart.
Sandbox Globals
Do NOT import anything — these are pre-loaded:
- React 18: all hooks (
useState,useEffect,useMemo, etc.) - Recharts: all components
- Tailwind CSS: all utility classes
- Theme:
isDark(boolean) andtheme("light"/"dark") — reactive, update on toggle
Dark Mode
HTML 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"} />
Example
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>
);
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
treasure-data/td-skills
email-campaign
This skill should be used when the user asks to "create an email", "build an email campaign", "design an email template", "generate an email for a segment", "preview an email", or "push an email to Engage". Generates enterprise-grade HTML email templates with live preview in Treasure Studio and natural language editing, then pushes the final version to Treasure Engage.
treasure-data/td-skills
action-report
YAML format reference for action reports rendered via preview_action_report. MUST be read before writing any action report YAML — defines the report structure (title, summary, actions array) and action item fields (as_is, to_be, reason, priority, category, impact) with incremental build workflow. Required by seo-analysis and any skill that produces prioritized recommendations.
treasure-data/td-skills
grid-dashboard
YAML format reference for grid dashboards rendered via preview_grid_dashboard. MUST be read before writing any dashboard YAML — defines the page structure, 6 cell types (kpi, gauge, scores, table, chart, markdown), grid layout rules, cell merging syntax, and incremental build workflow. Required by seo-analysis and any skill that produces visual data dashboards.
treasure-data/td-skills
seo-analysis
Runs SEO and AEO (Answer Engine Optimization) analysis on websites or specific pages. Use when the user mentions SEO, AEO, search rankings, search optimization, or wants to analyze how their pages perform in search engines and AI answers. Produces a data dashboard and action report with before/after recommendations.
treasure-data/td-skills
aps-doc-core
Core documentation generation patterns and framework for Treasure Data pipeline layers. Provides shared templates, quality validation, testing framework, and Confluence integration used by all layer-specific documentation skills.
treasure-data/td-skills
aps-doc-id-unification
Expert documentation generation for ID unification layers. Documents identity resolution algorithms, merge strategies, match rules, entity graphs, and multi-workflow orchestration. Use when documenting ID unification processes.
Didn't find tool you were looking for?