How to use
Fill in every [PLACEHOLDER] with your specifics before pasting. The more detail you provide, the better the output.
→Fill in every [PLACEHOLDER] — vague inputs give generic outputs
→Works best in Claude Projects with the Full-Stack Architect system prompt active
→If the model stops mid-build, say "Continue from where you left off"
→For Replit: paste in the Agent chat, not the editor
Best platforms
claude.aiv0.devbolt.newGoogle AI Studio
The megaprompt
Build a complete analytics dashboard application with the following specifications.
## Dashboard Purpose
This dashboard is for: [DESCRIBE THE USER AND WHAT THEY ARE MONITORING]
Primary question it answers: [WHAT IS THE MAIN INSIGHT THIS DASHBOARD PROVIDES]
Data source: [WHERE DATA COMES FROM — API, CSV, Database, Mock data]
## Tech Stack
- React + TypeScript
- Recharts for charts (or Tremor for ready-made chart components)
- Tailwind CSS
- date-fns for date manipulation
- TanStack Table for data tables
## Layout Structure
```
┌─────────────────────────────────────┐
│ Header: Logo + Date Range + Filters │
├────────┬────────┬────────┬──────────┤
│ KPI 1 │ KPI 2 │ KPI 3 │ KPI 4 │ ← Metric cards row
├────────┴────────┼────────┴──────────┤
│ Main Chart │ Secondary Chart │
│ (60% width) │ (40% width) │
├─────────────────┴───────────────────┤
│ Data Table with sorting/filtering │
└─────────────────────────────────────┘
```
## Metrics to Show
KPIs (top cards):
- [Metric 1]: [what it measures, unit, benchmark color rule]
- [Metric 2]: [what it measures, unit, benchmark color rule]
- [Metric 3]: [what it measures, unit, benchmark color rule]
- [Metric 4]: [what it measures, unit, benchmark color rule]
Charts:
- Main chart: [type: line/bar/area] showing [WHAT DATA] over [TIME PERIOD]
- Secondary chart: [type: pie/donut/bar] showing [BREAKDOWN OF WHAT]
Table columns: [LIST COLUMN NAMES AND DATA TYPES]
## Interactive Features
- Date range picker (Last 7d / 30d / 90d / Custom)
- Filter by: [LIST FILTERABLE DIMENSIONS]
- Sort by any column in the table
- Export table to CSV button
- Click chart points to drill down into detail
## Design
- Color scheme: [Professional dark / Clean light / Brand colors: HEX]
- Positive trend: green, negative trend: red, neutral: gray
- Responsive: collapse to single column below 768px
## Data
[Either paste sample data structure or say "Create realistic mock data for a [TYPE OF BUSINESS]"]