菜单
Develop React applications for VS Code Webview surfaces. Use when working on the `webview-ui` package, creating features, components, or hooks for VS Code extensions. Includes project structure, coding guidelines, and testing instructions.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | vscode-webview-ui |
| description | Develop React applications for VS Code Webview surfaces. Use when working on the `webview-ui` package, creating features, components, or hooks for VS Code extensions. Includes project structure, coding guidelines, and testing instructions. |
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.
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
│ │ ├── components/# Feature-specific components
│ │ └── hooks/ # Feature-specific hooks
│ ├── bridge/ # Messaging helpers for VS Code <-> webview
│ └── index.tsx # Runtime router that mounts the selected feature
├── public/ # Static assets copied verbatim by Vite
├── vite.config.ts # Vite build configuration
└── README.md
src/components and src/hooks before introducing feature-local code.components/ or hooks/ directories to keep boundaries clear.src/app.css for base tokens) and avoid inline styles when reusable classes exist.vscode.postMessage and subscribe through window.addEventListener('message', …) inside React effects.ConfigManager utilities from the extension layer.tests/).npm run lint and npm run build before committing to ensure TypeScript and bundler checks pass.Create and maintain DBML files for systems that split data across a PrimaryDB and one or more ClientDB instances. Use when adding or updating DBML for multi-database schemas, tenant-specific client databases, cross-database analysis views, logical relationships based on business keys such as ProjectNo, or recommended dbml folder structures.
Switch oh-my-opencode.json model configurations between different modes using YAML-based mapping definitions
Cross-repository code review for multi-repo web applications. Use when reviewing changes across multiple repositories to detect inconsistencies in API contracts, type definitions, dependencies, or integration points that single-repo reviews might miss. Triggers on phrases like 'review across repositories', 'check multi-repo changes', 'cross-repo code review', or when working with VSCode workspaces containing multiple project folders.
Create a pull request from current development branch to origin/main (not upstream/main). Use when you need to merge a feature branch into the main branch of your fork and want to ensure the PR targets origin/main with English descriptions. Always confirms remote target with user before creation to prevent accidentally creating PRs to upstream repositories.
Create standardized business operation manuals, procedures, and documentation following corporate guidelines. Use this skill when the user needs to create or update business documents such as release procedures, work instructions, operation manuals, regulations, or standard operating procedures (SOPs). Triggers include requests like "業務マニュアル作成", "手順書を書いて", "operation manual", "create procedure document", or when standardized business documentation is needed.
Transform technical article drafts or source materials into human-like, high-quality Japanese technical articles. Use this skill when the user wants to generate, rewrite, or humanize technical articles (especially about TypeScript, JavaScript, React, or frontend topics) following specific human-writing patterns and style guidelines. Triggers include requests like "記事を人間風に", "tech article を生成", "humanize this article", or providing article source materials.