Skills
.Work. You
Rest

ux-theming

Community

Build accessible, theme-aware VS Code UI.

Software Engineering#theming#vscode#css variables#focus indicators#high contrast#widget styling
AuthorTHRISHAL12345
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you create VS Code workbench and widget styling that stays visually consistent across light, dark, and high-contrast themes while meeting focus and accessibility requirements.

Core Features & Use Cases

  • Theme Token Registration: Define new colors with proper defaults for light, dark, hcDark, and hcLight themes.
  • CSS Variable Styling: Apply VS Code theme variables in CSS for backgrounds, borders, text, and focus states.
  • Widget Styling Patterns: Use the correct default style objects and override factories for buttons, inputs, dialogs, lists, and other controls.
  • High-Contrast Compliance: Remove hardcoded visual values, use contrast borders, and ensure focus indicators remain visible in HC modes.
  • Use Case: A developer adding a custom sidebar panel can register its colors, style its controls with theme tokens, and keep it usable for keyboard and high-contrast users.

Quick Start

Use the ux-theming skill to register theme-aware colors and style my custom VS Code widget so it follows focus, contrast, and high-contrast rules.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ux-theming
Download link: https://github.com/THRISHAL12345/Project_X/archive/main.zip#ux-theming

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 545,000+ vetted skills library on demand.