skills.rest
gitkraken
gitkrakenOFFICIAL
Explore all skills by this author →
Website𝕏@gitkrakenGitHub

add-webview

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
One-click install
npx skills add https://github.com/gitkraken/vscode-gitlens --skill add-webview
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
retz8retz8

vscode-webview-expert

Implement secure VS Code WebView panels with CSP and messaging patterns.

Community
Advanced
Minara-AIMinara-AI
28

extension-dev

Compile and debug the cc-connect VSCode extension with TypeScript and React.

Official
Advanced
project-axproject-ax
5

ipc

Define IPC message framing and validate actions with Zod schemas.

Official
Advanced
umbracoumbraco
26

umbraco-package-view

Create custom UI panels for Umbraco backoffice packages with manifest and element files.

Official
Intermediate