SpectreSkills
← All recipes

dashboard-scaffold

v1.0.0

Scaffold a full-stack dashboard app end to end — a public home page with an auth-aware CTA, Clerk authentication, shadcn dashboard views, and Postgres via Drizzle with Docker locally. Combine when starting a new SaaS-style dashboard from scratch.

Web & Frontendnextjsdashboardclerkshadcndrizzle
Try it — copy this prompt into Claude Code
Run `npx @spectre-apps/skills recipe dashboard-scaffold` to install the skills, then use them in order to scaffold me a dashboard app: a public home page whose CTA sends visitors to sign in or into the dashboard, Clerk auth protecting /dashboard, shadcn sidebar + views, and a local Dockerized Postgres wired up with Drizzle.

One paste installs the skills and kicks off the whole build.

Install the whole recipe
npx @spectre-apps/skills recipe dashboard-scaffold

Installs all 4 skills into .claude/skills. Add --user to install globally.

Or add them individually
npx @spectre-apps/skills add nextjs-dashboard-scaffold clerk-nextjs-auth shadcn-dashboard-ui drizzle-postgres-docker

4 skills, in order

  1. 01
    nextjs-dashboard-scaffoldv1.0.0

    Scaffold a Next.js App Router project split into a public marketing surface and a protected dashboard — route groups, layouts, and a home page with sign-in CTAs. Trigger when starting a new dashboard-style app.

  2. 02
    clerk-nextjs-authv1.0.0

    Wire Clerk into a Next.js App Router app — middleware-protected dashboard routes, sign-in/sign-up pages, an auth-aware home CTA, and the user menu. Trigger when adding authentication to a dashboard app or protecting a route subtree.

  3. 03
    shadcn-dashboard-uiv1.0.0

    Build dashboard views with shadcn/ui — sidebar navigation shell, header with user menu, stat cards, and data tables, all composed from generated components you own. Trigger when building the authenticated UI of a dashboard app.

  4. 04
    drizzle-postgres-dockerv1.0.0

    Set up Postgres with Drizzle ORM — Docker Compose for the local database, schema and migrations with drizzle-kit, and a single DATABASE_URL that production simply overrides. Trigger when adding persistence to an app or standing up a local database.

How it fits together

Dashboard scaffold

Everything you need to take a dashboard-style app from an empty folder to a working skeleton: public marketing page, protected dashboard, auth, UI kit, and database. Install the skills and let Claude work through them in order.

Order

  1. nextjs-dashboard-scaffold — the App Router skeleton: (marketing) route group for the public surface, /dashboard for the app, and the home page with static Sign in / Get started links.
  2. clerk-nextjs-auth — ClerkProvider, sign-in/sign-up pages, the middleware that protects everything under /dashboard, and the auth-aware home CTA (<SignedIn> / <SignedOut>).
  3. shadcn-dashboard-ui — the dashboard chrome (sidebar, header, user menu) and view patterns (stat cards, tables, loading skeletons).
  4. drizzle-postgres-docker — Postgres in Docker Compose for local dev, Drizzle schema + migrations, one DATABASE_URL that production overrides.

Notes

The pieces interlock: step 2 swaps the static home CTAs for Clerk's <SignedIn>/<SignedOut> branches, the dashboard layout from step 1 is filled in by step 3, and tables from step 4 scope rows by the Clerk userId. Locally you need Docker running before drizzle-kit migrate; in production just set DATABASE_URL on the host — no compose file ships.

Prefer to drop the files in?

Copies every skill in this recipe as one block — each section is headed with the path it belongs at (.claude/skills/<slug>/SKILL.md), so you can paste them straight into your project and reference them in your prompt.