add-webview

Name: add-webview
Availability: InStock
Author: GitKraken

Generate webview boilerplate with protocol definitions, provider classes, and Lit registration.

9.9k|1.8k|Updated Aug 8, 2016

Search Tags:#typescript #code generation #boilerplate #ipc #webview #lit

Ready to run

npx skills add https://github.com/gitkraken/vscode-gitlens --skill add-webview

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: add-webview
Source: https://github.com/gitkraken/vscode-gitlens/tree/main/.claude/skills/add-webview
Command: npx skills add https://github.com/gitkraken/vscode-gitlens --skill add-webview

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the creation of new webview components within the project, including all necessary boilerplate code for protocols, providers, and app registration.

Core Features & Use Cases

Boilerplate Generation: Creates all essential files for a new webview, including protocol definitions, provider classes, registration logic, and basic Lit app structure.
IPC Integration: Sets up the Inter-Process Communication (IPC) protocol for seamless communication between the host and the webview.
Use Case: When developing a new feature that requires a custom UI panel or sidebar in VS Code, use this Skill to quickly generate the foundational code, allowing you to focus on the specific UI and logic.

Quick Start

Use the add-webview skill to create a new webview named 'myFeature'.

Frequently Asked Questions about add-webview

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

FAQPage Schema

How do I generate webview boilerplate in a VS Code extension?▼

This Skill scaffolds webview boilerplate for VS Code extensions by generating protocol definitions, provider classes, and Lit app registration so you can focus on custom UI logic.

How do I set up IPC protocol integration for a custom VS Code sidebar?▼

Setting up IPC protocol integration for a custom VS Code sidebar is handled automatically during boilerplate generation, establishing seamless communication between the host extension and the webview.

Can I scaffold both sidebar views and editor panels for VS Code webviews?▼

Yes, you can scaffold both sidebar views and editor panels for VS Code webviews. The boilerplate generation supports both 'view' and 'panel' webview types with Lit app registration.

What is the fastest way to create a Lit webview component in TypeScript?▼

The fastest way to create a Lit webview component in TypeScript is using this boilerplate generator, which outputs the essential files for protocols, providers, and basic Lit app structure.

Do I need to manually configure webview providers when adding a custom UI panel?▼

No, you do not need to manually configure webview providers when adding a custom UI panel. The Skill automates the creation of provider classes and registration logic for rapid development.