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.

How joshsmithxrm/power-platform-developer-suite configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to joshsmithxrm/power-platform-developer-suite. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/joshsmithxrm/power-platform-developer-suite/main/.claude/skills/ext-panels/SKILL.md

Clone the repo

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

Made for: Claude Code.

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/github.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/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<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="Reviewed on agentmods" width="80" 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. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector warn 7 Sept 2026

SkillSpector: 4 findings, up to high

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

high Prompt Injection · line 147
Hidden instructions were detected in comments or invisible text. These could contain malicious directives. Manual review is recommended.

Fix: Audit all comments and invisible characters. Remove any instructions that direct the agent to perform unauthorized actions. Use plain, reviewable content.
high Rogue Agent · line 554
Skill modifies its own code, configuration, or behavior at runtime. Self-modification enables an agent to escalate privileges, disable safety constraints, or install persistent backdoors.

Fix: Prevent the skill from modifying its own code, SKILL.md, or configuration files. Treat skill files as read-only at runtime.
high Rogue Agent · line 554
Skill modifies its own code, configuration, or behavior at runtime. Self-modification enables an agent to escalate privileges, disable safety constraints, or install persistent backdoors.

Fix: Prevent the skill from modifying its own code, SKILL.md, or configuration files. Treat skill files as read-only at runtime.
medium Output Handling · line 14
Output size or generation rate is not bounded. Unbounded output enables denial-of-service through resource exhaustion, log flooding, or context-window stuffing.

Fix: Set explicit limits on output length, generation count, and rate. Use max_tokens and truncation to prevent unbounded output.

How audits are shown

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.5	$0.00017	$0.02454
Sonnet 5.5	$0.00009	$0.01227
Haiku 4.5	$0.00004	$0.00614

Measured 1mo ago against content hash 8eaec8b05e5f, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 1mo 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.

1mo 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 4d ago), licensed MIT. It adds 43 tokens to every session and 6,136 once invoked, about $0.0002 per session on Opus 5.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

csharp-dotnet

Use when writing, reviewing, testing, or shipping C# / .NET code — ASP.NET Core APIs (minimal APIs vs controllers), EF Core data access, async correctness, solution layout in .cs/.csproj/.sln. NOT a Java/Spring backend (that is spring-boot), NOT a Node/TypeScript backend (that is nestjs), NOT framework-neutral REST…

ericrisco/rsc-harness · 89 tokens

release

Prepare and publish Perigon.CLI patch releases, including versioning, release notes, bilingual docs, validation, and the nuget-branch CI handoff.

AterDev/Perigon.CLI · 34 tokens

docs

Use for Perigon documentation work across this workspace, especially Perigon.docs/Content/docs/Perigon bilingual and versioned docs, syncing zh-CN and en-US content, updating docs from Perigon.CLI, Perigon.template, and Perigon.Modules changes, and deciding whether to revise existing pages or add new documentation.

AterDev/Perigon.CLI · 67 tokens

blazor

Use for Blazor Server development with Fluent UI Blazor, Razor components, layouts, pages, scoped UI services, culture switching, localization, forms, loading/empty/error states, and Studio-style dashboard workflows.

AterDev/Perigon.CLI · 45 tokens

cli

Use for .NET command-line tool development with Spectre.Console/Spectre.Console.Cli, Microsoft.Extensions.Hosting, dependency injection, localized help text, command settings, aliases, examples, terminal output, exit codes, and stdio-safe command paths.

AterDev/Perigon.CLI · 52 tokens

power-platform-developer-suite: Skill for Claude Code