用途：整理 vscode-documentdb 扩展里 React webview 的架构模式与约定，适用于新建或修改 webview（DocumentView、CollectionView）、在 src/webviews/ 下添加组件、处理 CollectionView 上下文与状态、集成 Monaco Editor 或 SlickGrid，以及调试事件处理器中的陈旧闭包问题。
主要能力与结构：所有 webview 通过 src/webviews/index.tsx 启动，外层为 VSCodeFluentProvider（来自 @microsoft/vscode-ext-webview-fluentui，负责适配 VS Code 主题），内层 WithWebviewContext 经 React Context 提供 vscodeApi；WebviewRegistry 将 webview 名称映射到 React 组件；扩展宿主配置通过 useConfiguration<T>() 读取。文件组织按 viewName 目录划分主组件、scss、context、controller、router、constants、components、hooks、types、utils。
状态与渲染：简单视图用本地 useState 与 props；复杂视图（CollectionView）用 Context 搭配 [state, setState] 元组，依赖前值时使用函数式更新。第三方组件（SlickGrid）在初始化时绑定事件处理器，需用 ref 保存最新数据以避免陈旧闭包。Monaco 需手动 layout()（resize 时防抖调用）并在卸载时 dispose()；MonacoAutoHeight 用于自适应高度的查询字段。Fluent UI v9 组件用于加载、工具栏、标签、下拉、徽章、消息条与骨架屏。样式按组件单独 scss，共享样式经 sharedStyles.scss 的 @extend，间距统一 10px，避免内联样式与负外边距。
限制与注意：文中未提供具体版本号、安装命令或收费信息；使用前需注意清理事件监听、Monaco 实例与 AbortController，避免 any 类型，面向用户的字符串需用 l10n.t()。相关主题（tRPC 消息传递、无障碍 ARIA）不在此技能内重复。