build-dashboard

# 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...