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.