skills.rest
joshsmithxrm
joshsmithxrmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ext-panels

Standardize multi-surface VS Code panel design across Extension, TUI, MCP, and CLI environments.

5|1|Updated Dec 14, 2025
Search Tags:#vscode#architecture#extension#design-patterns#panels#webview
One-click install
npx skills add https://github.com/joshsmithxrm/power-platform-developer-suite --skill ext-panels
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ext-panels
Source: https://github.com/joshsmithxrm/power-platform-developer-suite/tree/main/.claude/skills/ext-panels
Command: npx skills add https://github.com/joshsmithxrm/power-platform-developer-suite --skill ext-panels

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often struggle with creating consistent VS Code panels that work across multiple surfaces (Extension, TUI, MCP, and CLI).

Core Features & Use Cases

  • Architecture patterns and file organization for panel development across surfaces
  • Dynamic panel discovery and standardized webview wiring
  • Guidelines for theming, keyboard shortcuts, and cross-surface parity

Quick Start

Follow the guidance to scaffold a new multi-surface panel by writing frontmatter, creating the host and webview code, and wiring esbuild entries.

Frequently Asked Questions about ext-panels

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the architecture patterns for building VS Code webview panels across multiple surfaces?▼

Architecture patterns for VS Code webview panels involve defining standardized file organization, dynamic panel discovery, and host/webview wiring to ensure consistency across Extension, TUI, MCP, and CLI environments.

How do I scaffold a new multi-surface webview panel in a VS Code extension?▼

To scaffold a multi-surface webview panel, you write required frontmatter, create the host and webview code, wire esbuild entries, and apply template conventions to ensure cross-surface parity and maintainability.

How does dynamic panel discovery work in multi-surface VS Code extensions?▼

Dynamic panel discovery works by standardizing the wiring between the extension host and the webview, allowing the extension to automatically identify and render panels across TUI, MCP, and CLI environments.

Can I use esbuild to integrate webview panels across CLI and MCP environments?▼

Yes, you can use esbuild integration to bundle webview panels, ensuring consistent styling, keyboard shortcuts, and cross-surface parity across Extension, TUI, MCP, and CLI environments.

What frontmatter and template conventions are required for VS Code panel development?▼

VS Code panel development requires enforcing specific frontmatter and template conventions to standardize environment theming, keyboard shortcuts, and host/webview wiring across all surfaces.

What is the best way to ensure consistent theming and keyboard shortcuts across VS Code panels?▼

The best way to ensure consistent theming and keyboard shortcuts across VS Code panels is to enforce environment theming and keyboard shortcut standards through standardized architecture patterns and template conventions.

Related Skills

Explore More Software Engineering Skills→
LuminairPrimeLuminairPrime

vscode-extension-builder-lawvable

Build and convert VS Code extensions with TypeScript, Vite, and esbuild.

Community
Advanced
guardian-intelligenceguardian-intelligence
1

gemini-cli

Orchestrate Gemini runtime agents, tools, and extensions from the command line.

Official
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
LetPeopleWorkLetPeopleWork
16

architecture-patterns

Document architecture decisions and patterns using ADR templates.

Official
Basic