Build a dashboard

The prompt

Fill in the bracketed parts. Everything else stays the same every time.

# Paste into Claude / Cursor / Aider / any agent

Build [one-line description of the dashboard] for Shopify AI Hub.
The product helps Shopify merchants and agencies run AI tools on their stores.

Tech stack: Next.js 15 (app router), shadcn/ui, Tailwind v4, TypeScript.

Install the theme first, then generate:
  npx shadcn@latest add https://design.shibin.co/registry/shibin.json

Full spec (fetch this): https://design.shibin.co/llms.txt
Visual reference:      https://design.shibin.co/mockup/shadcn-theme.html

# Non-negotiables
- Warm cream background (--background), never pure white
- One accent only: deep indigo (--primary). No secondary brand colors
- Inter for all type. Sentence case everywhere
- Primary CTAs use pill shape:  className="rounded-[var(--radius-pill)]"
- Cards + dialogs use 16px:     className="rounded-[var(--radius-card)]"
- Alerts use the stripped style: 1px border, colored 10px dot, no tinted fill
- Icon: the diagonal up-right arrow from /assets/arrow.svg. No emoji, no lucide, no Unicode arrows
- Accent line 40×3px under every page h1
- Light theme only. No dark mode toggle
- Semantic palette: earthy. #B8462E destructive, #5A7A4F success, #C89B3C warning
- Chart colors: pull from --chart-1 through --chart-7

# Include these surfaces
- Sidebar with my Design System logo + page nav grouped by category
- Header with breadcrumb + user avatar + command palette trigger (⌘K)
- Metric row (4 tiles) with tabular figures and semantic deltas
- [primary table/list/grid for this dashboard's main content]
- Empty state, loading skeleton, and error state for the main content area
- Inline action menu on each row (dropdown menu with destructive disconnect option)

# Voice
- Warm, direct, personal. No corporate "we" — I'm one person
- Errors name the cause in the first sentence, the fix in the second
- Button labels are verbs ("Run audit", "Generate descriptions"), not nouns

Copy the block, fill in the bracketed parts, paste it to your agent. The whole brief fits within any agent’s context window.

What every dashboard needs

Use this as a final pass before accepting an agent’s output:

• Sidebar Grouped nav. Brand wordmark top. Active state in --primary.
• Header Breadcrumb + search + user avatar. Fixed or sticky.
• Metric row 3–4 tiles with tabular figures and semantic deltas.
• Primary surface Table, kanban, or grid. One per page.
• Action toolbar Filter, search, primary CTA (pill). Above the surface.
• Row actions Dropdown menu on hover or click. Destructive option last.
• Empty state Illustration or small copy + a primary CTA.
• Loading state Skeleton blocks, not spinners.
• Error state Inline with the surface. Cause + fix in two short sentences.
• Inline alerts 1px border, colored dot, stripped style. Title + body.
• Pagination or infinite scroll for lists over 20 rows.
• Tabular numbers Any number in a dashboard uses font-variant-numeric: tabular-nums.

Example briefs

Real prompts to copy, then adapt.

Build an analytics dashboard for a Shopify merchant. The page shows one store's rolling 30-day metrics: orders, revenue, conversion rate, average order value. Include a line chart of daily revenue (7-day rolling average), a top-10 product list with thumbnails and units sold, and a simple recent-orders table (10 rows). Use --chart-1 for the main series; derivative series use --chart-2 through --chart-4.

Build a tools catalog page. Card grid, 3 columns on desktop. Each card shows: category label (small, uppercase), tool name, 2-line description, "Run →" pill. Filters above the grid: category chips and a search input. Sidebar shows tool categories with counts. Empty state when no tools match the filter.

Build a store detail page. Breadcrumb at the top: Stores / goodstore.co. Below that, a health summary card (connection status badge, last sync time, active tools count). Tabs: Overview, Audits, Tools run, Settings. Overview tab shows health, a metric row (4 tiles), and recent activity (10-row table). Tools run tab shows a paginated table of all tool invocations with status badge.

Build a billing page. Three stacked sections: "Current plan" (card with plan name, price, next renewal date, manage button), "Usage this cycle" (progress bars for AI credits, store slots, and storage), "Payment methods" (list with default indicator). Below: paginated invoice history table with status badges (paid/pending/failed). Use the destructive style for failed invoices.

What to cut if you see it

AI-generated dashboards tend to include these. The theme forbids all of them.

• Pure white or near-white backgrounds
• Gradients behind metrics or in buttons
• Heavy shadows on cards (shadow-md, shadow-lg, etc.)
• Unicode arrows (→, ↗, ➜) — use the SVG arrow only
• Emoji as status icons (✓, ⚠️, ❌)
• Lucide, Heroicons, Phosphor icon sets
• Purple or blue accent gradients
• Rounded-md buttons for primary CTAs (use pill)
• Title Case on every heading
• Color-coded row backgrounds in tables
• Multiple brand colors mixed as chart accents
• A dark-mode toggle in the header