VS Code Webview UI

Overview

This skill assists in developing the React application that powers VS Code webview surfaces. It covers the webview-ui workspace, which is bundled with Vite and communicates with the extension host via the bridge/vscode helper.

Project Structure

The webview-ui package follows this structure:

webview-ui/
├── src/
│   ├── components/        # Shared visual components reused across features
│   │   └── ui/            # shadcn/ui component library
│   ├── hooks/             # Shared React hooks
│   ├── features/
│   │   └── {feature}/
│   │       ├── index.tsx  # Feature entry component rendered from routing