CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

ux-theming

VS Code theming, color tokens, widget styles, focus indicators, and high-contrast theme support. Use when registering colors, styling widgets with theme tokens, or ensuring HC/focus compliance.

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

82%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A high-quality reference skill: every section delivers repo-specific knowledge (real paths, exact variable names, named style objects) with copy-paste examples and a genuinely useful flagged-vs-correct review table. The main headroom is removing duplicated file-path listings and adding a light verification step for theme changes.

Suggestions

Consolidate file-path duplication: the Key Files table repeats five paths already cited in section bodies — either drop the table or remove in-section File: lines, keeping one authoritative location.

Add a short validation note (e.g., 'verify the widget in light, dark, hcDark, and hcLight themes; check focus ring visibility') so the register→style→focus→HC progression closes with an explicit checkpoint.

Consider moving the color-categories table and/or the hardcoded-values correction table into a references/ file, keeping SKILL.md as a leaner overview with clearly signaled links.

DimensionReasoningScore

Conciseness

Dense and repo-specific throughout — no explanation of concepts Claude already knows, just file paths, rules, and code. Not 5 because of trimmable duplication: the Key Files table repeats five paths already given in section bodies (e.g., `colorUtils.ts` in §1, `defaultStyles.ts` in §4, `style.css` in §5), and the HC-defaults rule appears in both §1 ("Provide defaults for all four theme types") and §6 ("Always provide hcDark and hcLight defaults"). Not 3 because there is no padded or unnecessary explanation anywhere.

4 / 5

Actionability

Fully executable, copy-paste-ready guidance covering the common cases: a complete `registerColor(...)` call, `asCssVariable` conversion functions, direct CSS usage of `var(--vscode-...)`, `new Button(container, defaultButtonStyles)` and the `getButtonStyles({...})` override, exact focus-outline CSS, and a flagged-vs-correct correction table. Specific real file paths anchor every section.

5 / 5

Workflow Clarity

The numbered sections form a coherent progression (register color → use in CSS → widget styles → focus → HC rules → review rules) and each instruction is unambiguous, matching 'clear sequence with most checkpoints present; minor validation gaps'. Not 5 because there is no explicit validation step (e.g., 'verify the widget renders in light/dark/hcDark/hcLight' or a test command); not 3 because this is a rules/reference skill where checkpoints are less applicable, and each section's single action is concrete and complete.

4 / 5

Progressive Disclosure

Well-organized single-file skill with clear section headers, and the size-token material is deliberately delegated with a clearly signaled one-level-deep pointer ("Those live in the ux-css-layout skill (§10...)" and the auto-injected instructions file) instead of being duplicated. Not 5 because at ~155 lines some reference material (the color-categories table, the hardcoded-values table) could live in separate reference files, and the opening line is a thin overview; not 3 because structure is good, nothing is buried, and content placement is appropriate.

4 / 5

Total

17

/

20

Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: third-person, compact, with an explicit 'Use when...' clause carrying three concrete triggers and a specific capability list. Slight headroom remains in keyword synonyms (dark mode, CSS variables) and in distinguishing itself from adjacent design-token skills.

DimensionReasoningScore

Specificity

Quotes several concrete capabilities — "VS Code theming, color tokens, widget styles, focus indicators, and high-contrast theme support" plus gerund actions "registering colors, styling widgets with theme tokens, or ensuring HC/focus compliance" — matching the anchor 'lists several specific actions; minor gaps in coverage'. Not 5 because coverage has gaps (e.g., dark/light theme defaults, CSS variable usage, review for hardcoded values are core skill sections not surfaced); not 3 because more than 1-2 concrete actions are explicitly named.

4 / 5

Completeness

Explicitly answers both: what — "VS Code theming, color tokens, widget styles, focus indicators, and high-contrast theme support"; when — "Use when registering colors, styling widgets with theme tokens, or ensuring HC/focus compliance", with three concrete trigger phrases. Matches the anchor 'clearly and explicitly answers both what AND when with concrete trigger phrases'.

5 / 5

Trigger Term Quality

Natural terms are well covered: "theming", "color tokens", "widget styles", "focus indicators", "high-contrast", "registering colors", "HC/focus compliance" — users would plausibly say these. Not 5 because common synonyms/variants like "dark mode", "light/dark theme", "custom colors", or "CSS variables" are missing; not 3 since the included keywords are natural and plentiful rather than jargon-only.

4 / 5

Distinctiveness Conflict Risk

"VS Code theming" carves a clear niche, but the general token/styling language ("styling widgets with theme tokens") has minor overlap risk with a closely related design-token/CSS skill (the body itself points to a sibling ux-css-layout skill for tokens). Matches 'mostly distinct; minor overlap risk with closely related skills'. Not 5 given that adjacent-skill overlap; not 3 because the VS Code + color/focus/HC framing is far more specific than generic domain claims.

4 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

posit-dev/positron

Path

.github/skills/ux-theming/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.