Guidance for building panels inside a VS Code extension, including panels shown as web pages and related interfaces. It defines how the panel’s TypeScript, CSS, and messages are organized.

Use it when adding or changing VS Code webview panels, panel features, or panel architecture shared across an extension, terminal interface, MCP, and command-line tools.

It helps developers find the right panel files and keep communication between the extension and its web interface consistent.

ext-panels — Skill for Claude Code and Codex by joshsmithxrm: Guidance for building panels inside a VS Code extension…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/joshsmithxrm/power-platform-developer-suite/ext-panels

Any agent

npx skills add joshsmithxrm/power-platform-developer-suite --skill ext-panels

Clone the repo

git clone --depth 1 https://github.com/joshsmithxrm/power-platform-developer-suite

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/joshsmithxrm/power-platform-developer-suite/ext-panels.svg)](https://agentmods.dev/skills/joshsmithxrm/power-platform-developer-suite/ext-panels)

Your own site

<a href="https://agentmods.dev/skills/joshsmithxrm/power-platform-developer-suite/ext-panels"><img src="https://agentmods.dev/badge/skills/joshsmithxrm/power-platform-developer-suite/ext-panels.svg" alt="Measured on agentmods" height="20"></a>

Per session 43 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 6,136 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00043	$0.06136
Opus 5	$0.00022	$0.03068
Sonnet 5	$0.00009	$0.01227
Haiku 4.5	$0.00004	$0.00614

Measured 5d ago against content hash 8eaec8b05e5f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

ext-panels scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/ext-panels/SKILL.md · 555 lines

How it starts

The opening of the file, as written. The whole thing — 555 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Webview Panel Development

The Rules

All webview logic lives in TypeScript files under src/panels/webview/, bundled by esbuild as IIFE for browser.
All CSS lives in external .css files under src/panels/styles/, bundled by esbuild.
All messages are typed with discriminated unions in src/panels/webview/shared/message-types.ts. Both host and webview switches use assertNever for exhaustive checking.

VS Code silently drops inline <script> tags exceeding ~32KB. External scripts have no size limit.

Panel Discovery

Do NOT rely on the listing below as the source of truth for which panels exist. Discover panels dynamically:

Host panels: glob src/PPDS.Extension/src/panels/*Panel.ts (excludes WebviewPanelBase)
Webview entries: glob src/PPDS.Extension/src/panels/webview/*-panel.ts
Styles: glob src/PPDS.Extension/src/panels/styles/*-panel.css

The listing below is a reference for architecture understanding, not an authoritative registry.

Architecture

src/panels/
  QueryPanel.ts                    ← host-side panel (extends WebviewPanelBase<TIn, TOut>)
  SolutionsPanel.ts                ← host-side panel
  ImportJobsPanel.ts               ← host-side panel
  ConnectionReferencesPanel.ts     ← host-side panel
  EnvironmentVariablesPanel.ts     ← host-side panel
  MetadataBrowserPanel.ts          ← host-side panel
  PluginTracesPanel.ts             ← host-side panel
  WebResourcesPanel.ts             ← host-side panel
  PluginsPanel.ts                  ← host-side panel (plugin registration)
  WebviewPanelBase.ts              ← abstract base: lifecycle, env picker, Maker URL, clipboard
  environmentPicker.ts             ← shared HTML generator + QuickPick helper
  monacoUtils.ts                   ← detectLanguage, mapCompletionKind, mapCompletionItems
  querySelectionUtils.ts           ← getSelectionRect, isSingleCell, sanitizeValue, buildTsv
  webviewUtils.ts                  ← shared webview helper utilities (getNonce)
  monaco-entry.ts                  ← Monaco editor browser entry (IIFE bundle)
  monaco-worker.ts                 ← Monaco editor worker entry

  webview/                         ← browser-side TypeScript (tsconfig.webview.json)
    query-panel.ts                 ← Query Panel webview entry point
    solutions-panel.ts             ← Solutions Panel webview entry point
    import-jobs-panel.ts           ← Import Jobs Panel webview entry point
    connection-references-panel.ts ← Connection References Panel webview entry point
    environment-variables-panel.ts ← Environment Variables Panel webview entry point
    metadata-browser-panel.ts      ← Metadata Browser Panel webview entry point
    plugin-traces-panel.ts         ← Plugin Traces Panel webview entry point
    web-resources-panel.ts         ← Web Resources Panel webview entry point
    plugins-panel.ts               ← Plugin Registration Panel webview entry point
    shared/
      message-types.ts             ← discriminated unions for ALL panel messages
      dom-utils.ts                 ← escapeHtml, escapeAttr, cssEscape, formatDate, sanitizeValue
      error-handler.ts             ← centralized webview error handler (onerror, unhandledrejection)
      filter-bar.ts                ← generic FilterBar<T> — debounced text filtering with count
      data-table.ts                ← reusable DataTable<T> — sorting, selection, status formatting
      solution-filter.ts           ← SolutionFilter component — solution picker with persistence
      selection-utils.ts           ← getSelectionRect, isSingleCell, sanitizeValue, buildTsv
      selection-manager.ts           ← row/item selection state management
      vscode-api.ts                ← typed getVsCodeApi<T>() wrapper
      assert-never.ts              ← exhaustive switch helper

  styles/                          ← CSS files (esbuild bundles @import)
    shared.css                     ← common styles (toolbar, status bar, spinner, env picker)
    query-panel.css                ← @import './shared.css' + Query Panel specific
    solutions-panel.css            ← @import './shared.css' + Solutions Panel specific
    import-jobs-panel.css          ← @import './shared.css' + Import Jobs specific
    connection-references-panel.css ← @import './shared.css' + Connection References specific
    environment-variables-panel.css ← @import './shared.css' + Environment Variables specific
    metadata-browser-panel.css     ← @import './shared.css' + Metadata Browser specific
    plugin-traces-panel.css        ← @import './shared.css' + Plugin Traces specific
    web-resources-panel.css        ← @import './shared.css' + Web Resources specific
    plugins-panel.css              ← @import './shared.css' + Plugin Registration specific

esbuild.js                         ← builds host + webview TS + CSS entry points
dist/
  query-panel.js                   ← built webview bundle (IIFE)
  query-panel.css                  ← built CSS bundle
  solutions-panel.js / .css        ← same pattern
  monaco-editor.js / .css          ← Monaco bundle
  editor.worker.js                 ← Monaco worker

Read the full file on GitHub · 555 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

5d ago First seen · 555 lines · 43 tokens per session scan A 8eaec8b05e5f

Subscribe to this mod's changes

ext-panels is a skill published in the GitHub repository joshsmithxrm/power-platform-developer-suite (7 stars, last pushed 5d ago), licensed MIT. It adds 43 tokens to every session and 6,136 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Frontend cli dataverse dotnet dynamics365 mcp power-platform

dynamics365-expert

Expert in Dynamics 365 platform, model-driven apps, canvas apps, Power Automate flows, Dataverse, plugins, and custom workflows. Use when the user mentions Microsoft platforms, ERP, CRM, business apps, the Power Platform, or Dataverse, or when the task involves Dynamics 365 Applications, Dataverse Platform…

personamanagmentlayer/pcl · 80 tokens

PowerAppsControl

Drive the PowerAppsControl MCP server to UX-test a Power App end to end: open and verify an app URL, let the user choose a mode (smoke test = in-depth read-only exploration that produces a repeatable natural-language test plan; or run my test plan), then run it in a recorded session and produce a video + HTML report…

ilyafainberg/PowerAppsControl · 177 tokens

xrm-mcp

Skip steps you already have answers for. If you ran listtables or describetable earlier in the session, reuse those results.

jukkan/xrm-mcp · 0 tokens

run-integration-tests

Build, pack, and run .NET MAUI integration tests locally. Validates templates, samples, and end-to-end scenarios using the local workload.

dotnet/maui · 35 tokens

run-helix-tests

Submit and monitor .NET MAUI unit tests on Helix infrastructure. Supports running XAML, Resizetizer, Core, Essentials, and other unit test projects on distributed Helix queues.

dotnet/maui · 45 tokens

refresh-arm-sdk-release

WORKFLOW SKILL — Prepares Azure.ResourceManager SDK refresh pull requests in azure-sdk-for-net. WHEN: "prepare sdk refresh", "refresh Azure.ResourceManager package", "update ARM SDK from autorest tag", "refresh changelog dependencies". INVOKES: git and GitHub pull request tools for branch, commit, push, and PR…

Azure/azure-sdk-for-net · 91 tokens