用途
Extension UI 用于构建专业、精致的 Chrome 扩展界面，覆盖 popup、sidepanel、options 页面以及内容脚本注入的 UI。该技能强调直接执行工作流，而不仅是解释说明。
主要能力
- 检测项目上下文：读取 package.json 判断使用 React、Vue、Svelte 还是原生方案；检查已有的 popup、sidepanel、options、content script 等 UI 文件；检查是否已配置 Tailwind、shadcn 或 DaisyUI；识别扩展类型（仅 popup、sidepanel、完整 options 页面）。
- 分析现有 UI：读取组件文件了解布局、间距与颜色使用；检查暗色模式支持（prefers-color-scheme 或 class="dark"）；检查无障碍情况，包括语义化 HTML、aria-label、焦点管理；检查是否符合 Chrome 设计语言；报告优点、待改进项与优先修复项。
- 推荐 UI 技术栈：React 推荐 shadcn/ui + Tailwind；React 极简方案推荐仅 Tailwind + 自定义紧凑主题；Vue 推荐 DaisyUI + Tailwind；Svelte 推荐 Tailwind + svelte-headlessui；原生方案推荐使用 CSS 变量的自定义 CSS。
- 实施改进：按优先级应用修复，依次为暗色模式支持、正确的尺寸约束、小面积界面的排版与间距、无障碍修复（键盘导航、aria、焦点）、加载/错误/空状态、动画（细微、快速、有目的）。
使用方式
该技能以工作流形式执行：先检测上下文，再分析现有 UI，然后推荐技术栈，最后按优先级实施改进。技能附带参考文档，包括扩展 UI 尺寸约束、设计系统搭建、UX 模式、无障碍检查清单。
界面尺寸约束
- Popup：最大 800x600px，点击外部会关闭，不可调整大小。
- Sidepanel：宽 320-400px，全高，持久显示。
- Options 页面：完整标签页，标准网页。
- 内容脚本 UI：注入式，通过 shadow DOM 实现 CSS 隔离。
暗色模式
技能要求始终实现暗色模式，因为扩展会同时存在于浅色和深色浏览器主题中。示例使用 CSS 变量，并通过 @media (prefers-color-scheme: dark) 切换，用户偏好覆盖存储在 chrome.storage.sync 中。
排版与配色
小面积界面建议使用系统字体栈，不加载自定义字体；popup 基础字号 13-14px，行高 1.4-1.5，字重 400/500/600。配色对齐 Chrome 风格，例如主色 #1a73e8、浅色表面 #ffffff、深色表面 #1f2937、边框 #dadce0 / #374151、主文本 #202124 / #f9fafb、次要文本 #5f6368 / #9ca3af，成功 #34a853、错误 #d93025、警告 #fbbc04。
动画与无障碍
动画时长 100-200ms，进入用 ease-out、退出用 ease-in，仅使用 transform 和 opacity，并尊重 prefers-reduced-motion。无障碍检查包括：Tab 顺序合理、所有交互元素可达；仅图标按钮有 aria-label；颜色对比度至少 4.5:1；焦点可见；使用语义化 HTML。
适用场景
适用于需要创建或改进 Chrome 扩展界面的开发者，尤其是希望统一设计系统、补齐暗色模式、优化小尺寸界面排版、提升无障碍与 UX 完整度的项目。
限制
资料未提供该技能的具体安装命令、收费方式、价格、平台支持范围或实际效果数据，这些信息暂未提供。