# Scaffold Dashboard

> Stand up the dashboard foundation (the platform layer — UI primitives, form system, charts, Repository + adapters, auth seam, theme, routing shell) into a new project as a zero-config runnable app. Run this FIRST when building a dashboard, then compose screens from the add-component catalogue's shapes (add-detail-page, add-kanban, …) and the add-backend operation skill.

- **Type:** Skill
- **Install:** `agentstack add skill-ahpxex-open-dashboard-scaffold-dashboard`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ahpxex](https://agentstack.voostack.com/s/ahpxex)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ahpxex](https://github.com/ahpxex)
- **Source:** https://github.com/ahpxex/open-dashboard/tree/main/.claude/skills/scaffold-dashboard
- **Website:** https://open-dashboard.ctxflow.workers.dev/

## Install

```sh
agentstack add skill-ahpxex-open-dashboard-scaffold-dashboard
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Scaffold the dashboard foundation

The whole foundation is **bundled** at `base/` — a clean, runnable app shell with
no demo content. Materialize it into a new project, then add screens from the
`add-component` catalogue's shapes (and the `add-backend` operation skill). You
don't read the foundation code — you scaffold it.

## Scaffold

```bash
bash .claude/skills/scaffold-dashboard/scaffold.sh 
```

Copies `base/` → target and runs `bun install`. Then:

```bash
cd 
bun run dev          # zero-config: in-memory auth + data, no Postgres/Docker
```

Open it, click **Dev quick login** (`dev@example.com` / `password`) → an empty,
branded dashboard.

## What you get

TanStack Start + Router + Query + Table; shadcn-on-`@base-ui/react` primitives;
Tailwind v4 theme; the form system (TanStack Form + zod); chart components; the
`Repository` data layer (in-memory by default, Drizzle/Postgres when `DATABASE_URL`
is set); better-auth behind the `AuthProvider` seam; toast + `useConfirm`; and the
auth-guarded routing shell. Rebrand via `src/config/app.ts` (or the `rebrand` skill).

## Compose a coherent product (not a demo dump)

You are building a real back-office for a specific domain — not showcasing the
catalogue. The fastest way to ship something that reads as a patchwork demo is to
copy a pile of gallery shapes into the nav. Don't. Instead:

- **The home is an overview, never the placeholder.** Replace
  `src/routes/_app/index.tsx` (the "clean shell" welcome) with a real overview via
  `add-chart-page` — KPIs + charts derived from your actual resources. Shipping the
  scaffold welcome as the product home is the #1 tell of a demo.
- **Nav = real product sections only:** Overview, your resources, Settings. The
  scaffold base ships clean (no demo resources, no Skills Gallery) — you add
  product sections to `src/lib/sidebar-items.ts`, you don't prune sample ones.
- **Pick the archetype that fits each resource's shape**, don't add one of each:
  flat list → CRUD table (`add-backend`); rich record → + `add-detail-page`;
  an inbox you triage → `add-master-detail`; a staged pipeline → `add-kanban`;
  people/visual items → `add-card-list`; date-bound items → `add-calendar`;
  metrics → `add-chart-page`.
- **Every nav item gets a distinct, meaningful Phosphor icon** — never repeat one
  icon (e.g. `SquaresFourIcon`) down the list.
- **Use product language.** Labels and page copy name the domain, not the
  mechanism: "Feed", not "Feed (REST)"; "Manage your invoices", not "Generated
  resource — customise the schema".
- **Seed believable data** — real names, dates, statuses, amounts. Three rows of
  `Alpha/Beta/Gamma` read as a demo; a dozen realistic records read as a product.

## Add screens (compose from the add-component catalogue)

The shapes below are **references inside the single `add-component` catalogue** (not
separate invocable skills); each copies a bundled template into the new project.
Data + CRUD comes from the `add-backend` operation skill.

- **Resources** (data + CRUD): `bun run create-resource ` (or `add-backend`),
  then the catalogue's `add-detail-page`, `add-master-detail`, `add-card-list`,
  `add-form`, `add-chart-page`.
- **Shapes** (all in `add-component`): `add-list-view`, `add-kanban`,
  `add-tree-view`, `add-calendar`, `add-timeline`, `add-virtual-table`,
  `add-inline-edit`, `add-filter-panel`, `add-wizard-form`, `add-field-combobox`,
  `add-record-tabs`, `add-settings-page`, `add-empty-state`, `add-page-layout`,
  `add-data-display`, `add-feedback-states`.

After copying a template, add a sidebar entry in `src/lib/sidebar-items.ts` (above
the `// create-resource:anchor`) so it shows in the nav.

## Verify

```bash
cd 
bun run typecheck && bun run check && bun run test && bun run build
```

All green on the empty shell (and after each screen you add). `bun run dev` boots
zero-config.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ahpxex](https://github.com/ahpxex)
- **Source:** [ahpxex/open-dashboard](https://github.com/ahpxex/open-dashboard)
- **License:** MIT
- **Homepage:** https://open-dashboard.ctxflow.workers.dev/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ahpxex-open-dashboard-scaffold-dashboard
- Seller: https://agentstack.voostack.com/s/ahpxex
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.