From partme-ai-full-stack-skills
Adds Webview panels to VS Code extensions for custom HTML content like forms, charts, dashboards, and rich previews when standard UI elements are insufficient.
npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skillsThis skill uses the workspace's default tool permissions.
Use this skill when the user needs a custom UI (forms, charts, complex layouts) that cannot be achieved with standard VS Code UI elements.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Use this skill when the user needs a custom UI (forms, charts, complex layouts) that cannot be achieved with standard VS Code UI elements.
vscode-feature-command) that will open the webview.import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
let currentPanel: vscode.WebviewPanel | undefined = undefined;
context.subscriptions.push(
vscode.commands.registerCommand('extension.showWebview', () => {
const columnToShowIn = vscode.window.activeTextEditor
? vscode.window.activeTextEditor.viewColumn
: undefined;
if (currentPanel) {
// If we already have a panel, show it in the target column
currentPanel.reveal(columnToShowIn);
} else {
// Otherwise, create a new panel
currentPanel = vscode.window.createWebviewPanel(
'catCoding', // Identifies the type of the webview. Used internally
'Cat Coding', // Title of the panel displayed to the user
columnToShowIn || vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableScripts: true // Enable JS in the webview
}
);
currentPanel.webview.html = getWebviewContent();
// Reset when the current panel is closed
currentPanel.onDidDispose(
() => {
currentPanel = undefined;
},
null,
context.subscriptions
);
}
})
);
}
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
<h1>Hello Webview</h1>
</body>
</html>`;
}
Always use vscode-resource: scheme for local content and Content Security Policy (CSP) in production.