# Build Dashboard

Build the visual layer of a holaOS dashboard app, TanStack Start + @holaboss/ui +...

- Repository: https://github.com/holaboss-ai/holaOS (11451 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add holaboss-ai/holaOS --skill build-dashboard -g -a claude-code -y`
Codex: `npx skills add holaboss-ai/holaOS --skill build-dashboard -g -a codex -y`
Cursor: `npx skills add holaboss-ai/holaOS --skill build-dashboard -g -a cursor -y`
Gemini CLI: `npx skills add holaboss-ai/holaOS --skill build-dashboard -g -a gemini-cli -y`

## Description

Build the visual layer of a holaOS dashboard app, TanStack Start + @holaboss/ui + workspace tokens. Use when an app has SDK primitives wired (via app-builder-sdk) AND needs a `src/client/` UI surface. NOT for marketing pages, NOT for snapshot HTML reports.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# build-dashboard

The agent before you reliably produces ugly dashboards because it starts from a blank page and reaches for default shapes (single-column full-width cards, KPI strips that don't fit, sidebars that don't earn their space). This skill exists to **bypass that default**. The visual decisions are already made, your job is to fill in the data and copy.

## When to use

- The user asked for a dashboard, workspace pane, list view, kanban, calendar, or "let me see my X"
- The app's `app.ts` already declares `resource(...)` rows via the SDK (set up via the `app-builder-sdk` skill first)
- The app dir needs a `src/client/` directory

**Skip this skill when:**
- Integration-only module (Slack/Discord/Stripe-style MCP-only), those use only `app-builder-sdk`
- Marketing landing page → use `frontend-design`
- One-off static HTML report → not this product class

## The two non-negotiables

1. **Copy the bundled reference. Don't invent.** `reference/messaging-dashboard/src/client/` is the canonical starting point. Three files below are verbatim across every dashboard; the rest gets customized per shape.
2. **Two style imports, not one.** `@holaboss/ui/styles.css` only bakes in utilities used inside the library. Every Tailwind class your `src/client/` writes needs your own app-side compile pass. The register-time lint `workspace_app_missing_tailwind_compile` rejects apps missing this.

## The shape catalog, pick one

Look at the user's data, NOT at "what dashboards usually have". Most apps are shape 1.

The rest: https://github.com/holaboss-ai/holaOS/blob/HEAD/runtime/harnesses/src/embedded-skills/build-dashboard/SKILL.md