vscode-webview-expert
✓This skill provides expert-level guidance for implementing VS Code WebView features. Use when creating WebView panels, implementing secure CSP policies, handling Extension-WebView communication, managing WebView state persistence, optimizing WebView performance, or debugging WebView rendering issues. Covers security best practices, message protocols, and VS Code-specific WebView patterns.
Installation
SKILL.md
This skill enables expert-level implementation of VS Code WebView features. It provides comprehensive knowledge of WebView security requirements, communication patterns, state management, and performance optimization techniques specific to VS Code extensions.
| default-src | Fallback for other directives | 'none' | | script-src | JavaScript sources | 'nonce-${nonce}' | | style-src | Stylesheet sources | ${webview.cspSource} 'unsafe-inline' | | img-src | Image sources | ${webview.cspSource} https: data: | | font-src | Font sources | ${webview.cspSource} |
| connect-src | XHR/Fetch destinations | https: or specific origins | | frame-src | iframe sources | 'none' (unless needed) |
This skill provides expert-level guidance for implementing VS Code WebView features. Use when creating WebView panels, implementing secure CSP policies, handling Extension-WebView communication, managing WebView state persistence, optimizing WebView performance, or debugging WebView rendering issues. Covers security best practices, message protocols, and VS Code-specific WebView patterns. Source: s-hiraoku/vscode-sidebar-terminal.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/s-hiraoku/vscode-sidebar-terminal --skill vscode-webview-expert- Category
- !Security
- Verified
- ✓
- First Seen
- 2026-02-05
- Updated
- 2026-02-18
Quick answers
What is vscode-webview-expert?
This skill provides expert-level guidance for implementing VS Code WebView features. Use when creating WebView panels, implementing secure CSP policies, handling Extension-WebView communication, managing WebView state persistence, optimizing WebView performance, or debugging WebView rendering issues. Covers security best practices, message protocols, and VS Code-specific WebView patterns. Source: s-hiraoku/vscode-sidebar-terminal.
How do I install vscode-webview-expert?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/s-hiraoku/vscode-sidebar-terminal --skill vscode-webview-expert Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/s-hiraoku/vscode-sidebar-terminal
Details
- Category
- !Security
- Source
- skills.sh
- First Seen
- 2026-02-05