Dashboard Builder

What it does

Dashboard Builder takes a list of metrics you want to track ("monthly revenue, churn rate, active users, conversion funnel") and designs a complete dashboard layout — choosing the right chart type for each metric (line for trends, bar for comparisons, funnel for conversion, sparklines for KPIs). It generates the full React component code with Recharts, Chart.js, or Tremor, including mock data shapes so you can wire up your real API.

The dashboard is responsive by default — KPI cards stack on mobile, charts collapse to simplified versions on smaller screens. It also includes a date range filter component and a CSV export button. Color choices follow WCAG contrast requirements and include a colour-blind-safe palette option, ensuring the dashboard is accessible to all users from day one.

How to install

npx skills add user/dashboard-builder

The command fetches the skill definition, validates the schema, and registers it with your Claude Code environment. Stored in .claude/skills/ — no global installs required.

How to use

Describe the metrics and data sources you need to visualize:

Build a dashboard for: [list your metrics and data sources]

Claude designs the layout and generates the full component. A typical output for a SaaS metrics dashboard looks like this:

// Dashboard.tsx — generated by Dashboard Builder
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

function KPICard({ title, value, change, trend }) {
  return (
    <div className="kpi-card">
      <p className="kpi-label">{title}</p>
      <p className="kpi-value">{value}</p>
      <span className={trend === 'up' ? 'positive' : 'negative'}>{change}</span>
    </div>
  );
}

export default function Dashboard() {
  return (
    <div className="dashboard-grid">
      {/* KPI Row */}
      <KPICard title="MRR" value="$42,800" change="+8.2%" trend="up" />
      <KPICard title="Churn" value="2.1%" change="-0.3%" trend="up" />
      <KPICard title="Active Users" value="1,284" change="+12%" trend="up" />
      {/* Revenue Trend Chart */}
      <ResponsiveContainer width="100%" height={280}>
        <AreaChart data={revenueData}>...</AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

Follow up with "add a date range filter to the top" or "make the chart dark-mode-first" to refine incrementally.

Configuration

Switch chart libraries or add features with inline instructions:

# Use Tremor instead of Recharts
Build a dashboard for: [...] Use Tremor components instead of Recharts

# Add date range filter
Build a dashboard for: [...] Add a date range filter

# Dark mode first
Build a dashboard for: [...] Make it dark-mode-first

Related skills

Pair Dashboard Builder with Data Visualizer for one-off chart generation outside a full dashboard. Use CSV Analyzer to understand your data first, and JSON Transformer to shape API responses into the data format the dashboard expects.