这个 Skill 能做什么，适合哪些场景？
这是 microsoft/vscode 仓库中 .github/skills/ux-theming/SKILL.md 定义的单项 Agent Skill，专注于 VS Code 的主题颜色、CSS 变量、组件样式、焦点指示器和高对比度支持。它指导开发者在指定的 TypeScript 和 CSS 文件中注册颜色、引用主题令牌并覆盖控件样式。内容还规定了焦点陷阱、高对比度边框、阴影处理以及避免硬编码视觉值的做法。它适合需要修改 VS Code 工作台或控件外观、同时保持主题和无障碍一致性的工程任务。
指导代理检查或修改 src/vs/platform/theme/common/colorUtils.ts、颜色分类文件、src/vs/platform/theme/browser/defaultStyles.ts 和 src/vs/workbench/browser/media/style.css 等源码文件；示范使用 registerColor() 注册 light、dark、hcDark、hcLight 四类默认值；指导在 CSS 中使用 --vscode-* 自定义属性和 colorUtils.ts 的转换函数；指导通过默认样式对象和覆盖工厂配置按钮、输入框、列表、菜单等控件；指导添加 focusBorder 焦点样式、模态对话框焦点循环以及高对比度主题覆盖。
- VS Code 前端开发者新增一个工作台控件，需要注册背景、前景和边框颜色并适配明亮、暗色及高对比度主题。
- 维护者修改按钮、输入框、列表、菜单或查找控件的视觉样式，希望沿用 VS Code 的默认样式和主题令牌。
- 无障碍开发者审查一个组件，要求它使用 focusBorder、支持程序化焦点，并在高对比度模式下保留清晰边框。
- 代码审查者发现 CSS 中存在硬编码颜色、阴影、圆角或字体值，需要将其替换为 VS Code 设计令牌或 CSS 变量。
如何安装这个 Skill？
- 文档要求避免硬编码边框宽度，但多个示例仍使用1px；实施前应以实际设计令牌和现有源码规则核对。
- 技能依赖ux-css-layout和自动注入指令，但本次材料未提供这些内容；相关尺寸、间距、圆角和字体规则可能无法独立执行。
- 未提供高对比度、焦点陷阱或主题注册的专属测试证据；应在目标组件和支持的主题组合中进行人工及自动验证。
- 本地文件系统
该 Skill 位于 https://github.com/microsoft/vscode 的 .github/skills/ux-theming/SKILL.md。源材料没有提供单独的安装命令；使用时需要把该文件所在的技能目录提供给兼容 Agent Skills 的客户端。该仓库整体采用 MIT 许可证。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/microsoft/vscode.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.github/skills/ux-theming" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- 为这个新控件注册完整的 VS Code 主题颜色，使用默认 widget styles，并检查焦点和高对比度支持。
在包含 VS Code 源码的工作区中触发它，例如："为这个新控件注册完整的 VS Code 主题颜色，使用默认 widget styles，并检查焦点和高对比度支持。" 让代理依据 SKILL.md 检查相关源码路径，使用 --vscode-* 变量、focusBorder、contrastBorder 和高对比度选择器完成修改。源材料没有规定专用命令、脚本或自动化验证流程。
这个 Skill 有哪些优点和局限？
- 覆盖颜色注册、CSS 变量、控件默认样式、焦点指示器和高对比度主题等关键主题工作。
- 提供具体源码路径、代码示例和可直接采用的令牌名称，便于在 VS Code 源码中落地。
- 明确要求提供四类主题默认值，并禁止在颜色、阴影和边框等场景硬编码视觉值。
- MIT 许可证适用于该开源仓库。
- 范围仅限 ux-theming；它不代表仓库中其他 60 个技能的能力。
- 源材料未提供独立安装命令、脚本、测试套件或自动化验证步骤。
- 该指南针对 VS Code 内部源码路径和主题令牌，不能直接视为通用 Web 设计系统指南。
- 源材料没有说明除 VS Code 源码工作区之外的运行环境或平台验证情况。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| VS Code 主题与无障碍样式指南 本页 ✓ Microsoft · 官方 | 51 · 谨慎使用 | ★ 194k | 11 天前 | MIT |
| Theme Factory（主题工厂） | 59 · 推荐 | ★ 3.1k | 8 个月前 | MIT |
| Color Expert 颜色科学专家技能 | 64 · 推荐 | ★ 609 | 18 天前 | CC-BY-4.0 |
| Apple Liquid Glass 设计技能 | 58 · 推荐 | ★ 273 | 3 个月前 | NOASSERTION |
| VS Code 设计哲学 ✓ Microsoft · 官方 | 58 · 推荐 | ★ 194k | 11 天前 | MIT |
FollowSkills 如何评估这个 Skill？
技能仅提供主题和无障碍样式指导，没有网络、凭据、破坏性操作或外部副作用，符合低权限范围；但未说明用户确认、变更回滚、数据流或依赖安全，因此未满分。
章节结构和示例基本一致，覆盖颜色、CSS、控件、焦点和高对比度路径；但未提供该技能专属测试、失败诊断或边界输入验证，且“边框必须使用变量”与示例中的硬编码1px存在张力，静态评估限制为7分。
名称、描述和适用场景清楚，覆盖颜色注册、控件样式、焦点及高对比度主题；但未明确非适用范围、输入输出契约、触发排除条件、中文支持或中国大陆环境适配，因此扣分。
文档分节、表格、代码示例和关键文件索引较清晰，仓库提供MIT许可证及Microsoft维护和更新背景；但技能本身没有版本、变更记录、安装依赖、FAQ、限制披露或明确维护路径，且依赖另一个未提供的ux-css-layout技能。
提供了可直接参考的注册颜色、CSS变量、控件样式、焦点陷阱和高对比度模式示例，能够覆盖核心主题任务；但未验证示例可编译或产生正确结果，部分规则与示例不完全一致，仍需人工核对，因此不超过静态上限7分。
引用了具体源文件、颜色标识和API名称，具备一定可审计性；但没有针对该技能的测试套件、CI证据或第三方复现结果，且相关工作流与该技能关键路径无直接覆盖，故仅给有限分数。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →