color-registry

Derives deterministic VS Code window colors from project slots and role rungs.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill color-registry-gmolike
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: color-registry
Source: https://github.com/gmolike/Claude-Template/tree/main/.claude/skills/color-registry
Command: npx skills add https://github.com/gmolike/Claude-Template --skill color-registry-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? VS Code windows across multiple projects and roles often look identical, carry broken low-contrast colors, or drift between title bar and status bar. This Skill provides a registry of currently set window colors plus a deterministic assignment plan so every project-role combination gets a consistent, WCAG-compliant color without bookkeeping. ## Core Features & Use Cases - Deterministic color derivation: Computes oklch-based hex colors from a project slot (hue) and role rung (lightness), reproducible on any machine via the colorRegistry module. - Registry with audit trail: Documents every existing *.code-workspace and .vscode/settings.json color block with its expected value, actual value, and contrast ratio. - Pitfall guidance: Covers VS Code hex-only parsing (oklch renders red), HSL luminance failures, Peacock conflicts, native title bar behavior, and color-vision-deficiency constraints. - Use Case: When creating a new web.code-workspace for a project, look up the project slot and role rung, run the deriveColor command, and write the four workbench.colorCustomizations keys with the resulting hex value. ## Quick Start Ask the assistant to derive and apply the correct window color for a given project and role, for example: set the window colors for the web workspace of Claude-Template using the color registry.

Frequently Asked Questions about color-registry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I assign a color to a new VS Code workspace file?

Look up the project slot in the project table and the role rung in the role table, then run the deriveColor function from colorRegistry.ts via npx tsx. Write the resulting hex into the four workbench.colorCustomizations keys with #ffffff foregrounds.

Why does my VS Code title bar turn red when I set a color?

VS Code only accepts hex color values; any oklch(), hsl(), rgb() value or color name silently falls back to #ff0000 with no error message. Always convert oklch working values to hex before writing them into settings files.

Can I use HSL instead of oklch to compute window colors?

No. HSL lightness does not correspond to perceived luminance: measured contrast against white varies from 8.59:1 down to 1.07:1 across the hue circle, failing WCAG. oklch keeps luminance stable so all derived colors pass contrast checks.

Does this work with the Peacock extension installed?

Existing Peacock blocks in .vscode/settings.json are never overwritten or modified. The Skill reports the conflict with the file path and found value, and a human decides whether Peacock should yield.

Why is my status bar colored but the title bar stays gray?

The setting window.titleBarStyle: "native" makes the operating system draw the title bar, so no titleBar.* customization applies. This is why both status bar and title bar keys are set, so the status bar carries the color alone under native framing.

How many projects can get distinct window colors?

The hue channel supports exactly 12 slots at 30-degree intervals. Measured distinguishability collapses beyond that, so after slot 11 the channel is reported as full rather than adding a thirteenth hue.