[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69BQQ5D0YB0CSWDS4WAMH6E":3,"skill-same:01M69BQQ5D0YB0CSWDS4WAMH6E":76},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":29,"frontMatter":30,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":6,"ownerHtmlUrl":36,"ownerBlogUrl":37,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M69BQQ5D0YB0CSWDS4WAMH6E","visuals",null,"Use when user wants to incorporate charts, graphs, data grid,  or other visual representations of data into their project. Use VegaVisual and DataGrid components to create these visuals,  utilizing the shared DataTable input, formatting, theme, and interactivity. Covers the onInteraction selection\u002Fclick events host apps consume, named multi-table data input for layered overlays and reference lines, and Vega-Lite native selections.","microsoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69BPQ9YDYDTRW0K9YV8GQF1",3,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[5,24,25],"components","create","2026-11-10 10:12:30",false,"---\nname: visuals\ndescription: >\n  Use when user wants to incorporate charts, graphs, data grid, \n  or other visual representations of data into their project.\n  Use VegaVisual and DataGrid components to create these visuals, \n  utilizing the shared DataTable input, formatting, theme, and interactivity.\n  Covers the onInteraction selection\u002Fclick events host apps consume, named\n  multi-table data input for layered overlays and reference lines, and\n  Vega-Lite native selections.\n---\n\n# Visuals\n\n## Types of visuals\nThere are 2 different types of visuals that can be used in a project:\n1. Charts and Graphs: These are used to represent data in a visual format, such as bar charts, line charts, pie charts, etc. These are built using vega-lite, see [references\u002Fvega-lite-visual.md](references\u002Fvega-lite-visual.md) for more details.\n2. Data Grids: These are used to display tabular data in a structured format, allowing for sorting, filtering, and pagination. See [references\u002Fdata-grid-visual.md](references\u002Fdata-grid-visual.md) for more details.\n\n## Packages & Imports\n\nThe visual components are provided by three packages. **Always use these package imports when creating visuals.**\n\n| Package | Primary exports | Example import |\n|---|---|---|\n| `@microsoft\u002Ffabric-visuals` | `VegaVisual`, types: `VisualizationSpec`, `VegaLiteConfig`, `VegaVisualProps` | `import { VegaVisual } from \"@microsoft\u002Ffabric-visuals\"` |\n| `@microsoft\u002Ffabric-datagrid` | `DataGrid`, types: `GridColumnDef`, `Row`, `CellValue`, `DataGridProps`, `DataGridTheme`, `SortConfig` | `import { DataGrid } from \"@microsoft\u002Ffabric-datagrid\"` |\n| `@microsoft\u002Ffabric-visuals-core` | `isDataTable`, `convertDataTableToRows`, design tokens | `import { isDataTable } from \"@microsoft\u002Ffabric-visuals-core\"` |\n\nThe `DataTable` type (used by both components) is defined in `@microsoft\u002Ffabric-visuals-core` and re-exported by the visual packages' type definitions.\n\n## Data Format\nThe chart and data grid components share a unified `data` prop of type `DataTable` (from `@microsoft\u002Ffabric-visuals-core`). This structured format carries column metadata (`displayName`, `format`, `semanticType`) that the components use for axis titles, grid headers, number formatting, and tooltips.\n\n**Using `DataTable`**: Pass a `DataTable` via the `data` prop. The visual uses its column metadata for formatting, axis titles, and tooltips.\n\n**Static\u002Finline data**: For static data, transformed data, or plain arrays, put `data: { values: [...] }` directly in the Vega-Lite spec and omit the `data` prop.\n\n**Multiple tables in one visual**: the `data` prop also accepts a `Record\u003Cstring, DataTable>` for specs that bind separate layers to more than one dataset by name such as layered overlays, reference lines, and axis spines. See [references\u002Fmulti-data-input.md](references\u002Fmulti-data-input.md).\n\n```tsx\nimport { VegaVisual, useCssTheme } from \"@microsoft\u002Ffabric-visuals\";\nimport { DataGrid } from \"@microsoft\u002Ffabric-datagrid\";\nimport type { DataTable } from \"@microsoft\u002Ffabric-visuals-core\";\n\n\u002F\u002F useCssTheme() reads --color-* vars from the page and updates automatically\n\u002F\u002F when the theme changes (e.g. dark-mode toggle adds\u002Fremoves the .dark class).\nconst theme = useCssTheme();\n\n\u002F\u002F Charts — pass a DataTable and Vega-Lite spec\n\u003CVegaVisual spec={vegaLiteSpec} data={dataTable} theme={theme} \u002F>\n\n\u002F\u002F Grids — displayName becomes column headers, format applies to cells\n\u003CDataGrid data={dataTable} theme={theme} \u002F>\n\n\u002F\u002F Static\u002Finline data — no data prop needed\nconst inlineSpec = {\n  data: { values: [{ x: 1, y: 2 }, { x: 3, y: 4 }] },\n  mark: \"point\",\n  encoding: { ... },\n};\n\n\u003CVegaVisual spec={inlineSpec} theme={theme} \u002F>\n```\n\nFor the `DataTable` schema and `ColumnDef` fields, see [references\u002Fdata-table.md](references\u002Fdata-table.md).\n\n## Formatting & Theme\n- **Formatting rules**: Number formatting, color palettes, chart-specific encoding rules, highlighting guidelines, and a default theme. See [references\u002Fformatting.md](references\u002Fformatting.md).\n\n## Custom visuals\nAlways use the above mentioned ways to create visual when possible. If the user's request doesn't allow creation using the above methods, ask the user if they are ok with using another library for creating the visual. If they are ok with it, use the library to create the visual. If they are not ok with it, then build that visual from scratch using HTML, CSS, and JS\u002FTS. Make sure to ask the user for any specific requirements they have for the visual, such as colors, labels, etc.\n\n## Container Layout\n\n- **`DataGrid`** — the direct parent must apply `overflow-auto` so content remains scrollable when it exceeds the container bounds (many rows).\n\n## Interactivity\n\nBoth `VegaVisual` and `DataGrid` expose an `onInteraction` prop that emits structured, predicate-based events when the user clicks a data point or row.\n\n**Always use the `onInteraction` prop** on `VegaVisual` and `DataGrid` to surface user selections. The component only emits the selection; the host app decides what it does — e.g. coordinating other visuals or queries on the page.\n\n> A visual renders a layered subset by binding two named datasets to two layers (`data={{ all, highlighted }}`) — see [references\u002Fmulti-data-input.md](references\u002Fmulti-data-input.md). The component renders whatever tables it is handed.\n\n```tsx\nimport type { InteractionEvent } from \"@microsoft\u002Ffabric-visuals-core\";\n\nfunction handleInteraction(source: string, events: InteractionEvent[]) {\n    for (const event of events) {\n        if (event.action === \"select\") {\n            \u002F\u002F event.selections describes the clicked data as predicates\n        } else if (event.action === \"clear\") {\n            \u002F\u002F user deselected (re-clicked same item or clicked empty space)\n        }\n    }\n}\n\n\u003CVegaVisual spec={spec} data={dataTable} theme={theme}\n    onInteraction={(events) => handleInteraction(\"salesChart\", events)} \u002F>\n\u003CDataGrid data={dataTable} theme={theme}\n    onInteraction={(events) => handleInteraction(\"detailTable\", events)} \u002F>\n```\n**Key concepts**:\n- Clicking a different data point emits a new `select` (replaces the prior selection — no preceding `clear`).\n- Re-clicking the same item or background space in a vega-lite visual emits `clear`.\n- Predicates include all fields from the datum; consumers filter to the ones that are relevant to them.","# Visuals\n\n## Types of visuals\nThere are 2 different types of visuals that can be used in a project:\n1. Charts and Graphs: These are used to represent data in a visual format, such as bar charts, line charts, pie charts, etc. These are built using vega-lite, see [references\u002Fvega-lite-visual.md](references\u002Fvega-lite-visual.md) for more details.\n2. Data Grids: These are used to display tabular data in a structured format, allowing for sorting, filtering, and pagination. See [references\u002Fdata-grid-visual.md](references\u002Fdata-grid-visual.md) for more details.\n\n## Packages & Imports\n\nThe visual components are provided by three packages. **Always use these package imports when creating visuals.**\n\n| Package | Primary exports | Example import |\n|---|---|---|\n| `@microsoft\u002Ffabric-visuals` | `VegaVisual`, types: `VisualizationSpec`, `VegaLiteConfig`, `VegaVisualProps` | `import { VegaVisual } from \"@microsoft\u002Ffabric-visuals\"` |\n| `@microsoft\u002Ffabric-datagrid` | `DataGrid`, types: `GridColumnDef`, `Row`, `CellValue`, `DataGridProps`, `DataGridTheme`, `SortConfig` | `import { DataGrid } from \"@microsoft\u002Ffabric-datagrid\"` |\n| `@microsoft\u002Ffabric-visuals-core` | `isDataTable`, `convertDataTableToRows`, design tokens | `import { isDataTable } from \"@microsoft\u002Ffabric-visuals-core\"` |\n\nThe `DataTable` type (used by both components) is defined in `@microsoft\u002Ffabric-visuals-core` and re-exported by the visual packages' type definitions.\n\n## Data Format\nThe chart and data grid components share a unified `data` prop of type `DataTable` (from `@microsoft\u002Ffabric-visuals-core`). This structured format carries column metadata (`displayName`, `format`, `semanticType`) that the components use for axis titles, grid headers, number formatting, and tooltips.\n\n**Using `DataTable`**: Pass a `DataTable` via the `data` prop. The visual uses its column metadata for formatting, axis titles, and tooltips.\n\n**Static\u002Finline data**: For static data, transformed data, or plain arrays, put `data: { values: [...] }` directly in the Vega-Lite spec and omit the `data` prop.\n\n**Multiple tables in one visual**: the `data` prop also accepts a `Record\u003Cstring, DataTable>` for specs that bind separate layers to more than one dataset by name such as layered overlays, reference lines, and axis spines. See [references\u002Fmulti-data-input.md](references\u002Fmulti-data-input.md).\n\n```tsx\nimport { VegaVisual, useCssTheme } from \"@microsoft\u002Ffabric-visuals\";\nimport { DataGrid } from \"@microsoft\u002Ffabric-datagrid\";\nimport type { DataTable } from \"@microsoft\u002Ffabric-visuals-core\";\n\n\u002F\u002F useCssTheme() reads --color-* vars from the page and updates automatically\n\u002F\u002F when the theme changes (e.g. dark-mode toggle adds\u002Fremoves the .dark class).\nconst theme = useCssTheme();\n\n\u002F\u002F Charts — pass a DataTable and Vega-Lite spec\n\u003CVegaVisual spec={vegaLiteSpec} data={dataTable} theme={theme} \u002F>\n\n\u002F\u002F Grids — displayName becomes column headers, format applies to cells\n\u003CDataGrid data={dataTable} theme={theme} \u002F>\n\n\u002F\u002F Static\u002Finline data — no data prop needed\nconst inlineSpec = {\n  data: { values: [{ x: 1, y: 2 }, { x: 3, y: 4 }] },\n  mark: \"point\",\n  encoding: { ... },\n};\n\n\u003CVegaVisual spec={inlineSpec} theme={theme} \u002F>\n```\n\nFor the `DataTable` schema and `ColumnDef` fields, see [references\u002Fdata-table.md](references\u002Fdata-table.md).\n\n## Formatting & Theme\n- **Formatting rules**: Number formatting, color palettes, chart-specific encoding rules, highlighting guidelines, and a default theme. See [references\u002Fformatting.md](references\u002Fformatting.md).\n\n## Custom visuals\nAlways use the above mentioned ways to create visual when possible. If the user's request doesn't allow creation using the above methods, ask the user if they are ok with using another library for creating the visual. If they are ok with it, use the library to create the visual. If they are not ok with it, then build that visual from scratch using HTML, CSS, and JS\u002FTS. Make sure to ask the user for any specific requirements they have for the visual, such as colors, labels, etc.\n\n## Container Layout\n\n- **`DataGrid`** — the direct parent must apply `overflow-auto` so content remains scrollable when it exceeds the container bounds (many rows).\n\n## Interactivity\n\nBoth `VegaVisual` and `DataGrid` expose an `onInteraction` prop that emits structured, predicate-based events when the user clicks a data point or row.\n\n**Always use the `onInteraction` prop** on `VegaVisual` and `DataGrid` to surface user selections. The component only emits the selection; the host app decides what it does — e.g. coordinating other visuals or queries on the page.\n\n> A visual renders a layered subset by binding two named datasets to two layers (`data={{ all, highlighted }}`) — see [references\u002Fmulti-data-input.md](references\u002Fmulti-data-input.md). The component renders whatever tables it is handed.\n\n```tsx\nimport type { InteractionEvent } from \"@microsoft\u002Ffabric-visuals-core\";\n\nfunction handleInteraction(source: string, events: InteractionEvent[]) {\n    for (const event of events) {\n        if (event.action === \"select\") {\n            \u002F\u002F event.selections describes the clicked data as predicates\n        } else if (event.action === \"clear\") {\n            \u002F\u002F user deselected (re-clicked same item or clicked empty space)\n        }\n    }\n}\n\n\u003CVegaVisual spec={spec} data={dataTable} theme={theme}\n    onInteraction={(events) => handleInteraction(\"salesChart\", events)} \u002F>\n\u003CDataGrid data={dataTable} theme={theme}\n    onInteraction={(events) => handleInteraction(\"detailTable\", events)} \u002F>\n```\n**Key concepts**:\n- Clicking a different data point emits a new `select` (replaces the prior selection — no preceding `clear`).\n- Re-clicking the same item or background space in a vega-lite visual emits `clear`.\n- Predicates include all fields from the datum; consumers filter to the ones that are relevant to them.",{"name":5,"description":7},"main","e999f622261ad19e488b2b8c670f4b1d2d27610d","src\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals",1,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-11-03 16:06:19",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add microsoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin --skill visuals",{"tool":46,"command":47},"bunx","bunx skills add microsoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin --skill visuals",{"tool":49,"command":50},"pnpm","pnpm dlx skills add microsoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin --skill visuals","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals\u002FSKILL.md",true,[54,60,64,68,72],{"path":55,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":58,"sourceHtmlUrl":59},"references\u002Fdata-grid-visual.md","REFERENCE","参考文档",6619,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals\u002Freferences\u002Fdata-grid-visual.md",{"path":61,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":62,"sourceHtmlUrl":63},"references\u002Fdata-table.md",3921,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals\u002Freferences\u002Fdata-table.md",{"path":65,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":66,"sourceHtmlUrl":67},"references\u002Fformatting.md",6465,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals\u002Freferences\u002Fformatting.md",{"path":69,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":70,"sourceHtmlUrl":71},"references\u002Fmulti-data-input.md",4952,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals\u002Freferences\u002Fmulti-data-input.md",{"path":73,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":74,"sourceHtmlUrl":75},"references\u002Fvega-lite-visual.md",3379,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fvisuals\u002Freferences\u002Fvega-lite-visual.md",[77,87,107,128,147,161],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":26},"01M69BQMC6ZJ6H3HQYD2NG015J","schema-discovery","Explore Power BI semantic model schemas using DAX INFO functions. Progressive metadata discovery strategy, scope estimation, and narrowing techniques for tables, columns, measures, and relationships.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fschema-discovery\u002FSKILL.md",[],[84,85,86],"schema discovery","dax","power bi",{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":26},"01M69BQHBCN04406H0HAKR7M1A","rayfin","Use when doing ANY task involving Rayfin — scaffolding, data models, decorators, auth, deployment, CLI commands, or client setup. Triggers: rayfin, rayfin init, rayfin up, rayfin login, RayfinClient, @entity, @role, @anonymous, @authenticated, @text, @uuid, @int, @decimal, @boolean, @date, @email, @set, @one, @many, DAB, Data API Builder, rayfin.yml, publishableKey, signUp, signIn, signOut, sendMagicLink, handleMagicLinkCallback, ensureSignedInWithFabric, Fabric SSO, Entra ID, rayfin up db apply, rayfin up staticapp deploy, schema.ts, OpaqueSession, onSessionChange, GraphQL select, GraphQL create, GraphQL update, GraphQL delete, findById, executePaginated, RLS policy, row-level security, claims.sub, claims.email, TC39 decorators, config generation, dialect, mssql, postgresql","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Frayfin\u002FSKILL.md",[],[89,94,95,96,97,9,98,99,100,101,102,25,103,104,105,106],"init","config","entra id","auth","policy","security","deploy","setup","deployment","delete","update","fabric","cli",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":119,"publishedAt":26},"01M69BQE4NESC37SDKCNS775BK","rayfin-connectors","Use for Rayfin connectors that wire existing Fabric SQL data sources (Lakehouse, Warehouse, SQL Database) into an app as GraphQL-backed entities. Triggers: rayfin connector, rayfin up connector apply, connectors:, fabric-sqlanalytics, fabric-warehouse, fabric-sqldatabase, kusto, kql, eventhouse, workspaceId, itemId, operations:, AppConnectorsSchema, ConnectorsSchema, rayfin\u002Fconnectors\u002F, metadata.json, connector @role policy, connector claims.sub filter, connector claims.email filter, ConnectorsRayfinClient, rayfin-client.ts, client.connectors, connectorConfig, GraphQLBackedConnector, RestrictedDataApi, schema.ts aggregate, generate entities from metadata, add a use case on specific entities, wire connector into client, call a connector from the SDK, rayfin connector inspect, inspect connector data, sample connector rows, fabric-semanticmodel, --entity, --query, DAX EVALUATE, read-only sample query, rayfin connector search, discover connectable sources, find fabric sources to add, --all-workspaces, --workspace-id, connector search interactive picker, rayfin connector invoke, invoke a connector operation, run executeQuery, --input, --file, RAYFIN_FEATURE_FLAGS, resultSetRowCountLimit, limit rows, row limit, cap rows, too many rows, overflow","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Frayfin-connectors\u002FSKILL.md",[113,118],{"categoryNo":114,"categoryName":115,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[120,89,121,122,123,98,9,85,124,125,126,105,127],"rayfin connectors","connectors","sql","sdk","kql","generate","run","lakehouse",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":143,"publishedAt":26},"01M69BQAW71TBVEA0ZBPA1MH8Y","query-design","Separates DAX data-fetching from TypeScript presentation. Guides when to use  DAX vs. TypeScript vs. Vega-Lite for aggregation, total rows, FORMAT(), SELECTCOLUMNS,  BLANK handling, filtering, multi-grain queries, cross-filtering and cross-highlight subset\u002Foverlay queries, and format strings.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fquery-design\u002FSKILL.md",[134,137,140],{"categoryNo":135,"categoryName":136,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":138,"categoryName":139,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":141,"categoryName":142,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师",[144,145,146,85],"query design","design","typescript",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":156,"publishedAt":26},"01M69BQ7R6H9FS3K0BVZPTXFV1","playwright-cli","Automate browser interactions, test web pages and work with Playwright tests.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Fplaywright-cli\u002FSKILL.md",[153],{"categoryNo":154,"categoryName":155,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000008","测试与质量",[106,157,158,159,160],"playwright","playwright cli","test","web",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":167,"publishedAt":26},"01M69BQ55FZT47842W4W976Q5K","fabric-sdk","How to use @microsoft\u002Ffabric-app-data to connect web applications to Fabric data sources at runtime. Build browser-based apps that query semantic models via DAX using the FabricClient API.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontiertour27-LTG291-turn-your-data-into-production-apps-with-rayfin\u002Fblob\u002Fmain\u002Fsrc\u002Fcaldova-reorder\u002F.agents\u002Fskills\u002Ffabric-sdk\u002FSKILL.md",[],[168,105,123,160,9,85,169,170],"fabric sdk","connect","fabric data"]