Dashboard Template — Design skill for Claude Code

Business Dashboard Template

A production-ready business dashboard built with Next.js 14, Supabase, and Tailwind CSS. Clone it, configure it, deploy it to Vercel.

This template was extracted from a real dashboard running in production. Every module has been battle-tested.

Features

Module	What it does
Revenue	Pulls payment data from Stripe. Monthly totals, goal tracking, revenue charts.
Content Analytics	Connects to Instagram Graph API. Views, likes, shares, engagement rates on your posts.
Competitor Intelligence	Scrapes competitor Instagram accounts via Apify. Tracks their top posts, extracts viral hooks.
Tasks	Kanban board with drag-and-drop. Columns: To Do, In Progress, Review, Done.
Calendar	Google Calendar integration. Shows upcoming events inline.
Email	Gmail integration with AI triage. Categorizes emails by priority using Claude or GPT.
Ads	Meta Ads reporting. Spend, CPL, campaign performance. Read-only.
Content Scheduling	Google Drive folder monitoring. Detects new videos, auto-generates captions, schedules to Instagram/TikTok/YouTube/Facebook via Zernio.

Prerequisites

Run `/dashboard-setup` first. It installs:

• Vercel CLI
• Google Cloud SDK (for Calendar + Gmail OAuth)
• Supabase project connection

Quick Start

1. Clone this repo
2. Copy .env.example to .env.local and fill in your keys
3. Edit config.json to enable the modules you want
4. Run the database migration: paste scripts/setup-db.sql into your Supabase SQL editor
5. Install dependencies and start:

npm install
npm run dev

Or run `/dashboard-builder` and it walks you through everything interactively.

Tech Stack

• Framework: Next.js 14 (App Router)
• Database: Supabase (PostgreSQL + Row Level Security)
• Styling: Tailwind CSS with CSS variables for theming
• Deployment: Vercel
• APIs: Stripe, Instagram Graph API, Gmail, Google Ca