本文へ移動
cccskills
無料GitHub で公開

powerbi-custom-visuals

Power BI custom visual (.pbiviz) development with the pbiviz toolchain and its MCP server. Automatically invoke when the user mentions "custom visual", "pbiviz", "develop a Power BI visual", "powerbi-visuals-tools", "IVisual", "capabilities.json", "visual formatting model", "visual certification", "publish a visual to AppSource", or asks to scaffold, build, debug, package, certify, or publish a .pbiviz developer visual.

インストール方法を見る

含まれるファイル(7)

  • SKILL.md5.8 KB
  • examples/capabilities-objects.json855 B
  • examples/vscode-mcp.json122 B
  • references/certification-publishing.md2.3 KB
  • references/community-examples.md2.1 KB
  • references/mcp-server.md2.3 KB
  • references/pbiviz-toolchain.md4.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Power BI Custom Visuals (pbiviz)

Build distributable Power BI developer visuals: TypeScript/D3 visuals packaged as a .pbiviz file, written against the powerbi-visuals-api and built with the pbiviz CLI (powerbi-visuals-tools). This skill covers the full loop: scaffold, develop, live-preview, package, certify, and publish.

Pick the right tool first

This plugin holds five visual approaches. Choose before building:

deneb-visuals:    no-code Vega / Vega-Lite specs inside a report; no packaging, no TypeScript
python-visuals:   matplotlib / seaborn script visuals (static image, computes at render)
r-visuals:        ggplot2 script visuals (static image); R's stats ecosystem
svg-visuals:      SVG drawn by a DAX measure (ImageUrl); inline in tables/cards, no visual sandbox
powerbi-custom-visuals (this skill): a real .pbiviz developer visual, reusable across
                  reports and shareable on AppSource; full interactivity, formatting pane, certification

Reach for this skill when the need is a reusable, interactive, distributable visual with its own formatting pane. For a one-off chart in a single report, a sibling skill is usually faster and lighter.

Prerequisites

  • Node.js 20.19 or later (the powerbi-visuals-tools engine minimum)
  • pbiviz CLI: run via npx -y powerbi-visuals-tools <command>, or install it globally
  • Developer mode for live preview: enable the developer visual in Power BI Desktop, or turn on developer mode in the Power BI service

Core workflow

  1. Scaffold: pbiviz new <VisualName> creates the project (src/visual.ts, capabilities.json, pbiviz.json, tsconfig.json, package.json, style/, assets/)
  2. Implement the visual class in src/visual.ts. Implement the IVisual interface; the class name must equal visualClassName in pbiviz.json. Core methods: constructor (set up DOM and services), update (render on data/size/settings change), getFormattingModel (populate the format pane), destroy (cleanup)
  3. Declare data and formatting in capabilities.json: dataRoles (the field wells), dataViewMappings (how roles map to the dataView), and objects (format-pane properties)
  4. Build the formatting model with powerbi-visuals-utils-formattingmodel (FormattingSettingsService, cards, slices). A card name matches a capabilities.json object; a slice name matches a property
  5. Live-preview: pbiviz start, then add the developer visual to a report and iterate against real data
  6. Package: pbiviz package produces the .pbiviz under dist/; import it into a report

Full command flags, the project layout, the IVisual lifecycle, and formatting-model patterns are in references/pbiviz-toolchain.md.

Use the bundled pbiviz MCP server

This plugin ships a .mcp.json that starts the pbiviz MCP server (npx -y powerbi-visuals-tools mcp). It grounds development in current, correct API usage instead of guessed code. Prefer its tools while building:

get_available_apis:    look up data, formatting, interaction, and utility APIs with examples
get_best_practices:    API-version management, performance, security, accessibility, testing
add_feature:           list features available to add (bookmarks, tooltips, drill-down, selection, localization)
implement_feature:     step-by-step instructions, code templates, and config changes for a feature
list_visual_info:      extract a project's GUID, version, author, data roles, dependencies
check_vulnerabilities: scan dependencies and source for risky patterns (eval, innerHTML)
prepare_certification: verify required files, configuration, capabilities, and assets pre-submission

Setup, client config, and per-tool detail are in references/mcp-server.md.

Certify and publish

Certification unlocks export to PowerPoint and email subscriptions, and signals a reviewed visual. Key gates: a lowercase certification branch matching the package, eslint-plugin-powerbi-visuals passing, no eval/fetch/XMLHttpRequest, a clean npm audit, and the latest API. Audit with pbiviz package --certification-audit. Publishing goes through Partner Center to AppSource. R-based visuals cannot be certified.

Requirements and the submission flow are in references/certification-publishing.md.

Learn from shipped visuals

Microsoft publishes the full source of official and certified visuals. Start from the tutorials (circlecard, sampleBarChart) and read a production visual close to the target (gantt, sankey, sunburst, timeline, ChicletSlicer) for real patterns. A curated list with what each one teaches is in references/community-examples.md.

Additional resources

Reference files

  • references/pbiviz-toolchain.md ... CLI commands, project structure, IVisual lifecycle, capabilities.json, formatting model, key npm packages
  • references/mcp-server.md ... the bundled pbiviz MCP: setup and its tools
  • references/certification-publishing.md ... certification requirements and AppSource publishing
  • references/community-examples.md ... official and certified example visuals worth reading

Examples

  • examples/vscode-mcp.json ... standalone .vscode/mcp.json for a visual project outside this plugin
  • examples/capabilities-objects.json ... a capabilities.json objects block wired to a formatting card

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Automatically invoke this skill whenever the user asks about Fabric tenant settings or Power BI tenant settings or auditing tenant settings. You can use this skill if the user mentions "Fabric administration".

日本語の概要は準備中です。原文の説明を表示しています。

data-goblin/power-bi-agentic-development1,0352026年10月11日 更新

bpa-rules

無料

Interactive BPA rule generation for Power BI semantic models; guided discovery, model investigation, and expert rule authoring. Automatically invoke when the user mentions "BPA rule", "Best Practice Analyzer", or asks to "create a BPA rule", "audit BPA rules", "recommend BPA rules", "set up BPA for my team", "check model for best practices", "validate BPA rules", "improve a BPA expression".

日本語の概要は準備中です。原文の説明を表示しています。

data-goblin/power-bi-agentic-development1,0352026年10月11日 更新

Writing and executing C# scripts and macros against Power BI semantic models using Tabular Editor 2/3. Automatically invoke when the user mentions "C# script", "Tabular Editor script", "TOM scripting", "MacroActions.json", "XMLA", or asks to "automate model changes", "bulk update measures", "create calculation groups", "write a macro", "format DAX expressions", "manage model metadata".

日本語の概要は準備中です。原文の説明を表示しています。

data-goblin/power-bi-agentic-development1,0352026年10月11日 更新

TOM and ADOMD.NET guidance via PowerShell for connecting to Power BI Desktop's local Analysis Services instance. Covers model enumeration, DAX queries, metadata modification, annotations, calendar definitions, field parameters, query tracing, DAX library package management (daxlib.org), and the Desktop Bridge for reloading and screenshotting the report canvas. Automatically invoke when the user mentions "Power BI Desktop", "Analysis Services port", "TOM", "ADOMD", "daxlib", "DAX library", "DAX UDF package", or asks to "connect to PBI Desktop", "query PBI Desktop with DAX", "modify PBI Desktop model", "add a measure to PBI", "capture visual queries", "create a field parameter", "validate DAX", "intercept DAX queries", "install daxlib", "add DAX SVG", "add IBCS", "reload the report canvas", "screenshot a report page", "Desktop Bridge", or to work with the model and report in Power BI Desktop together.

日本語の概要は準備中です。原文の説明を表示しています。

data-goblin/power-bi-agentic-development1,0352026年10月11日 更新

Step-by-step workflow for creating complete Power BI reports from scratch using pbir CLI. Covers model discovery, report creation, page layout, theme setup, visual placement, field binding, filtering, formatting, validation, and publishing. Automatically invoke when the user asks to "create a new report", "build a report from scratch", "make a dashboard", "set up a report with KPIs", "create an executive dashboard", "add pages and visuals to a new report".

日本語の概要は準備中です。原文の説明を表示しています。

data-goblin/power-bi-agentic-development1,0352026年10月11日 更新

dax

無料

DAX performance optimization for semantic models. Automatically invoke when the user asks to "optimize DAX", "fix slow DAX", "DAX performance", "tune a measure", "debug a measure", "DAX anti-patterns", or mentions slow queries, server timings, or DAX authoring.

日本語の概要は準備中です。原文の説明を表示しています。

data-goblin/power-bi-agentic-development1,0352026年10月11日 更新

data-goblin のスキルをすべて見る

このスキルの問題を報告する