vscode-extension-uiux
VS Code Extension UI/UX Development
Build secure, beautiful, and accessible VS Code extensions following official guidelines.
Quick Reference
| UI Contribution | When to Use | Reference |
|---|---|---|
| Tree View | Hierarchical data, file explorers, outlines | tree-views.md |
| Webview | Custom UI beyond native API | webviews.md |
| Custom Editor | Replace default editor for file types | custom-editors.md |
| Sidebar View | Extension-specific panels | sidebars-panels.md |
Core Principles
1. Native First, Webview Last
Prefer VS Code's native APIs over webviews:
More from kcchien/skills
excalidraw
Create professional diagrams and visualizations using Excalidraw JSON format. Specialized for IT architecture diagrams, flowcharts, network topology, system design, microservices, ER diagrams, and state machines. Includes curated color palettes and visual styles. Use when working with .excalidraw files, or when user mentions diagrams, flowcharts, architecture visualization, or drawing. Delegates to subagents to prevent context exhaustion from verbose JSON.
5industrial-expert
>
4crisp-reading
>
2agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
2adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
1animate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
1