Use when the user wants to add sign-in, authentication, login, accounts, user identity, protected/gated pages, or per-user data to this app. This starter ships as a no-auth "hello world" so it previews with no backend, but the full Fabric authentication scaffolding is already in the project — this skill wires it back in. Covers: AuthProvider + bootstrapAuth in main.tsx, the route auth guard in App.tsx, the sign-in page, sign-out, and the env/deploy requirement. Triggers: auth, authentication, sign in, sign-in, login, log in, sign out, logout, account, user, identity, protect route, require login, gated page, who is the current user, Fabric auth, Entra, per-user data.
Use when adding charts, KPIs, tables, slicers, or any visual to a dashboard. Charts are authored as Graphein chart specs — one chart = one JSON `ChartSpec` (type + tidy `data` + `encoding`) dropped into `<ChartCard spec={…} />`, which owns loading / empty / error and the app theme. Covers the spec model and the per-type recipes (line/area/bar/scatter/pie/heatmap/funnel/combo/histogram/ treemap/gauge/bullet/waterfall/calendarHeatmap/slope/dumbbell/table/matrix), declarative features (transform/annotations/insights/trendline/facet), the validate→repair→report self-check (graphein 0.16), headless preview against live data, the DAX→rows helpers (toChartData / toTable / topN / deriveKpi), `KpiCard`, `DataTableCard` (Graphein table/matrix), slicers (dropdown/list/search/date-range/range + FilterBar) with shared filter state, interactivity, layout, value formatting, and color tokens.
Use when adding a chart, graph, plot, KPI, table, or any data visualization to this app. Charts are authored as Graphein specs — one chart = one JSON `ChartSpec` (a `type`, a tidy `data` array, and an `encoding` that names the columns) rendered by the bundled `<Chart spec={…} />` component (`@/components/Chart`). Covers the spec model, the chart-type catalog (line/area/bar/scatter/pie/heatmap/histogram/combo/funnel/treemap/waterfall/ gauge/bullet/calendarHeatmap/slope/dumbbell/table/matrix/box/sankey/choropleth), encodings and field types, in-spec transforms/annotations/trendline/facet, value formatting, cross-chart selections, `validateSpec`, and gotchas. Triggers: chart, graph, plot, visualize, dashboard, bar chart, line chart, pie, scatter, heatmap, KPI, metric, table, Graphein, spec, dataviz.
Use when building or modifying the app layout, dashboard kit visuals, UI components, or making any visual design decisions. Ensures a polished, distinctive, cohesive app — not a generic template.
START HERE when building, modifying, or iterating on a data app or dashboard. Defines the fast, iterative "time to wow" workflow: ship one real hero visual first, preview every visual against live data, then expand breadth and polish. Fabricator automatically deploys after the turn for user review. Orchestrates the dax, fabric-data, visuals, headless-preview, and app-design skills so you don't front-load all of them.
Use to check how a Graphein chart spec looks against REAL data. `npm run preview` renders one spec headlessly to a PNG plus a machine-readable report — pull a live DAX result with fabric-app-data, render it themed exactly like the shipped app, then view the PNG and read the report (clipping / overlap / contrast / mark counts) and iterate. This is the agent validation loop for every visual. Covers the query→render→critique loop, the CLI flags, reading the report, and the validate→repair workflow.
Discover Power BI semantic model schemas with DAX INFO functions, decide what belongs in DAX versus TypeScript, and author/test DAX queries for Fabric analytics dashboards.
Manage Fabric semantic-model connections with fabric-app-data and query Fabric semantic models at runtime with @microsoft/fabric-app-data. Covers fabric.yaml, generated TypeScript config, CLI schema/query testing, and essential FabricClient/use-semantic-model-query result handling.