skills.rest
mqzkim
mqzkimCOMMUNITY
Explore all skills by this author →
GitHub

dashboard-builder

Generate Recharts and Tremor dashboard pages with metric cards, charts, and data tables.

Updated Mar 1, 2026
Search Tags:#data visualization#frontend#dashboard#component generation#recharts#tremor
One-click install
npx skills add https://github.com/mqzkim/trading --skill dashboard-builder-mqzkim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-builder
Source: https://github.com/mqzkim/trading/tree/main/.agents/skills/dashboard-builder
Command: npx skills add https://github.com/mqzkim/trading --skill dashboard-builder-mqzkim

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of dashboard pages with metric cards and charts, streamlining data visualization development.

Core Features & Use Cases

  • Automated Dashboard Generation: Creates Recharts/Tremor-based dashboard pages with pre-defined layouts.
  • Metric Cards & Charts: Automatically generates metric cards, primary charts (area/line), secondary charts (pie/bar), and data tables.
  • Use Case: Quickly generate a "Cost Analytics" dashboard with key metrics like "Total Cost" and "Avg Daily", visualized with area and pie charts, for the last 30 days.

Quick Start

Create a dashboard page named "Trace Overview" with metrics "Total Traces,Error Rate" and area/bar charts for the last 7 days.

Frequently Asked Questions about dashboard-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React dashboard with Recharts and Tremor?▼

You can build a React dashboard with Recharts and Tremor by generating pre-defined pages with automated metric cards, primary charts, and data tables for data visualization.

Can I dynamically configure chart types and time periods for data visualization?▼

Yes, you can dynamically configure chart types and time periods for data visualization, selecting primary charts like area or line, and secondary charts like pie or bar.

Does this dashboard generation integrate with tRPC and React Query?▼

Yes, the dashboard generation integrates with tRPC and React Query to handle data fetching and state management for the generated metric cards and charts.

How do I generate metric cards and charts for a cost analytics dashboard?▼

To generate metric cards and charts for a cost analytics dashboard, you specify metrics like Total Cost and Avg Daily, and the tool outputs area and pie charts for selected periods.

What is the best way to automate frontend component generation for data tables?▼

Automating frontend component generation for data tables is best handled by defining your required metrics and chart configurations to output a complete dashboard layout.

Are there limitations to the automated dashboard layouts I can create?▼

Limitations include being constrained to predefined dashboard layouts with specific chart combinations like area, line, pie, and bar charts using Recharts and Tremor components.

Related Skills

Explore More Software Engineering Skills→
FranciscoMorettiFranciscoMoretti
1.2k

trpc-patterns

Standardize tRPC integration with TanStack Query in TSX files.

Community
Intermediate
liwooliwoo
16

dashboard-visualization

Transform dashboard visualization patterns into reusable Recharts and Inertia components.

Community
Advanced
fefogarciafefogarcia
1

tremor-design-system

Build dashboards and data-rich UIs with Tremor React components and Tailwind CSS.

Community
Intermediate
Starchild-ai-agentStarchild-ai-agent
1

@1463/dashboard

Create interactive HTML/CSS/JavaScript dashboards with real-time data streaming.

Official
Advanced