Visual Studio Code is a code editor that supports editing, navigating, understanding, debugging, and extending software projects. Developers use it for the edit-build-debug cycle, and the catalogue add-ons provide skills, instructions, and agents for working within the editor.
Borrowing it
Nothing to install: this file belongs to microsoft/vscode. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/microsoft/vscode/main/.github/skills/ux-theming/SKILL.mdgit clone --depth 1 https://github.com/microsoft/vscodeWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/microsoft/vscode/ux-theming)<a href="https://agentmods.dev/skills/microsoft/vscode/ux-theming"><img src="https://agentmods.dev/badge/skills/microsoft/vscode/ux-theming/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/microsoft/vscode/ux-theming"><img src="https://agentmods.dev/badge/skills/microsoft/vscode/ux-theming.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00044 | $0.01737 |
| Opus 5.5 | $0.00018 | $0.00695 |
| Sonnet 5.5 | $0.00009 | $0.00347 |
| Haiku 4.5 | $0.00004 | $0.00174 |
Grade A, and why
ux-theming scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 158 lines — stays where its author put it; the contents beside it link to each section on GitHub.
This skill covers color registration, CSS variable usage, widget style patterns, focus indicators, and high-contrast theme requirements.
1. Registering Colors
File: src/vs/platform/theme/common/colorUtils.ts
export const myWidgetBackground = registerColor('myWidget.background',
{ light: '#ffffff', dark: '#252526', hcDark: Color.black, hcLight: Color.white },
nls.localize('myWidgetBackground', "Background color of My Widget."));
Rules:
- Provide defaults for all four theme types:
light,dark,hcDark,hcLight. - HC themes must use solid colors (avoid transparency) and set explicit borders via
contrastBorder. - Use color transforms for derived colors:
transparent(),darken(),lighten(),oneOf(). - Reference existing colors when possible instead of hardcoding hex values.
2. Color Categories
| File | Colors |
|---|---|
src/vs/platform/theme/common/colors/baseColors.ts |
foreground, focusBorder, contrastBorder, text links |
src/vs/platform/theme/common/colors/editorColors.ts |
Editor widgets, find match, errors/warnings |
src/vs/platform/theme/common/colors/inputColors.ts |
Input, toggle, validation |
src/vs/platform/theme/common/colors/listColors.ts |
List/tree selection, focus, hover, drop |
src/vs/platform/theme/common/colors/miscColors.ts |
Badge, scrollbar, progress bar, sash |
src/vs/workbench/common/theme.ts |
Tabs, sidebar, status bar, panels, editor groups, banner |
3. Using Colors in CSS
Colors are injected as CSS custom properties on .monaco-workbench:
Color ID: editor.background
CSS variable: --vscode-editor-background
Usage: var(--vscode-editor-background)
Conversion functions in colorUtils.ts:
asCssVariable(colorId)→'var(--vscode-editor-background)'asCssVariableName(colorId)→'--vscode-editor-background'
In CSS files, reference directly:
.my-widget {
background-color: var(--vscode-editor-background);
color: var(--vscode-foreground);
border: 1px solid var(--vscode-contrastBorder);
}
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago Changed · -5 lines 21a34559cd9e
- 1mo ago First seen · 163 lines · 44 tokens per session scan A 2579f2ee488e
ux-theming is a skill published in the GitHub repository microsoft/vscode (194,219 stars, last pushed today), licensed MIT. It adds 44 tokens to every session and 1,737 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
styling-sidebar-products
How products and pages appear in the PostHog sidebar: which category they sit in, which icon and color they get, and which groups share a color gradient. Use when adding a product or data management page to the sidebar (treeItemsProducts or treeItemsMetadata in a products//manifest.tsx), giving an entry a new icon or…
quill-code
Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. Use when changing quill components/primitives/tokens, when a quill change must be tested inside the Code app, or when the user mentions quill, the design system, the .local-quill tarball, or the…
elements
Use this skill by default for any UI-related work or with NVIDIA Elements (nve-), including creating, editing, reviewing, or debugging HTML, CSS, layout, theming, components, applications, prototypes, Claude Artifacts, Codex Sites pages, and standalone UI artifacts.
cyrene-diagram
A design guide for making static SVG learning cards: small diagrams or reference cards rendered as images. It explains when to use a card instead of Mermaid, a text-based diagram format, and sets layout, color, size, and safety rules.
design-iterator
Iteratively refines UI design through N screenshot-analyze-improve cycles. Use PROACTIVELY when design changes aren't coming together after 1-2 attempts, or when user requests iterative refinement.
figma-design-sync
Detects and fixes visual differences between a web implementation and its Figma design. Use iteratively when syncing implementation to match Figma specs.