VS Code Theme and Accessibility Styling
Build consistent, focus-visible, high-contrast VS Code interfaces with theme tokens.
The skill provides guidance only for theming and accessibility styling, with no network, credential, destructive, or external side effects, so its scope is low privilege. It does not specify user confirmation, rollback, data-flow disclosure, or dependency-security handling, so it is not full marks.
The sections and examples are broadly coherent across color registration, CSS, widgets, focus, and high-contrast paths. However, there are no skill-specific tests, failure diagnostics, or edge-input validation, and the rule that borders must use variables is in tension with hardcoded 1px examples; static calibration limits this to 7.
The name, description, and intended scenarios are clear for color registration, widget styling, focus indicators, and high-contrast themes. Non-fit boundaries, input/output contracts, negative triggers, Chinese-language support, and mainland-China environment fit are not documented, so points are deducted.
The document has readable sections, tables, examples, and key-file references; repository context supplies MIT licensing and Microsoft maintenance/update provenance. The skill itself lacks versioning, changelog, dependency/install notes, FAQs, explicit limitations, and a clear maintenance path, and it depends on an unavailable ux-css-layout skill.
The color-registration, CSS-variable, widget-style, focus-trapping, and high-contrast examples are directly useful for the core task. They are not shown to compile or produce verified results, and some rules conflict with examples, so manual review remains necessary and the score stays below the static ceiling.
Specific source files, color identifiers, and API names make parts of the guidance auditable. There is no skill-specific test suite, CI evidence, or third-party reproduction, and the supplied workflows do not directly cover this skill’s key paths, so evidence is limited.
- The document prohibits hardcoded border widths, yet several examples still use 1px; verify the actual design-token and source conventions before implementation.
- The skill depends on ux-css-layout and auto-injected instructions that were not supplied, so size, spacing, radius, and font guidance may not be independently actionable.
- No skill-specific test evidence is provided for high-contrast behavior, focus trapping, or color registration; validate these paths across target components and supported themes.
What does this skill do, and when should you use it?
This is the single Agent Skill defined by .github/skills/ux-theming/SKILL.md in the microsoft/vscode repository. It focuses on VS Code theme colors, CSS custom properties, widget styling, focus indicators, and high-contrast support. It guides developers toward the relevant TypeScript and CSS files, theme tokens, focus behavior, and high-contrast overrides. It is a good fit for changes to VS Code workbench or widget appearance where theme consistency and accessibility compliance matter.
Guides an agent through relevant source files including src/vs/platform/theme/common/colorUtils.ts, the color category files, src/vs/platform/theme/browser/defaultStyles.ts, and src/vs/workbench/browser/media/style.css; demonstrates registering light, dark, hcDark, and hcLight defaults with registerColor(); specifies use of --vscode-* custom properties and colorUtils.ts conversion helpers in CSS; describes default widget style objects and override factories for buttons, inputs, lists, menus, and other controls; and gives rules for focusBorder focus styling, modal focus cycling, high-contrast borders, and replacing hardcoded visual values.
- A VS Code frontend developer adds a workbench widget and needs registered background, foreground, and border colors across light, dark, and high-contrast themes.
- A maintainer updates button, input, list, menu, or find-widget styling and wants to preserve the existing default style and theme-token patterns.
- An accessibility engineer reviews a component that must use focusBorder, support programmatic focus indication, and retain visible borders in high-contrast mode.
- A code reviewer finds hardcoded colors, shadows, radii, or font values in CSS and needs them replaced with VS Code design tokens or CSS variables.
What are this skill's strengths and limitations?
- Covers the main theming tasks: color registration, CSS variables, default widget styles, focus indicators, and high-contrast themes.
- Provides concrete source paths, code examples, and token names for implementation in the VS Code codebase.
- Requires all four theme defaults and explicitly discourages hardcoded colors, shadows, and borders.
- The open-source repository uses the MIT license.
- Its scope is only ux-theming; it does not provide the capabilities of the repository's other 60 skills.
- The source provides no standalone installation command, scripts, test suite, or automated validation steps.
- The guidance is tied to VS Code internal source paths and theme tokens rather than being a general-purpose web design-system guide.
- The source does not document runtime environments or platform validation beyond the repository context.
How do you install this skill?
The Skill is located at https://github.com/microsoft/vscode in .github/skills/ux-theming/SKILL.md. The source does not provide a separate installation command; use requires making the directory containing this file available to an Agent Skills-compatible client. The repository as a whole is licensed under MIT.
How do you use this skill?
In a workspace containing the VS Code source, invoke it with a request such as: "Register complete VS Code theme colors for this new widget, use the default widget styles, and check focus and high-contrast support." The agent should use the SKILL.md rules to inspect the listed source paths and apply --vscode-* variables, focusBorder, contrastBorder, and high-contrast selectors. The source does not specify a dedicated command, script, or automated validation workflow.