CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

ux-css-layout

VS Code CSS conventions, file organization, class naming, standard sizes, SplitView/Grid layout, scrollable content, responsive layout, and text overflow/ellipsis patterns. Use when writing CSS, building layouts, or fixing text truncation issues.

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.

The body is a dense, highly actionable reference: almost every section delivers VS Code-specific values, token names, or copy-paste code, with clear decision tables for choosing between SplitView, Grid, and the scrollable-element variants. Minor improvements are possible — the standard-CSS flex min-width explanation is covered twice and could be condensed, and the Grid section is thin relative to SplitView.

DimensionReasoningScore

Conciseness

The body is dense with VS Code-specific facts Claude would not know (token names, exact px sizes, file paths, stylelint rules, snap maps), so most tokens earn their place; minor over-explanation of standard CSS — the flex "min-width: auto" gotcha appears both in §4's anti-pattern table and again as a full WRONG/CORRECT code block in §9 — could be trimmed, placing it above anchor 3 but below anchor 5's lean ideal.

4 / 5

Actionability

Nearly every section carries copy-paste-ready code: a complete SplitView setup with a full IView implementation, DomScrollableElement with the required scanDomNode() call, the exact three-property ellipsis CSS combo, fixed-vs-flexible row patterns, the setupDelayedHover() API call, and the ./scripts/test-documentation.sh command — matching anchor 5's fully executable, common-case coverage.

5 / 5

Workflow Clarity

Decision guidance is unambiguous (the three-class scrollable table, "For splitting views with draggable sashes" vs "For 2D layouts", and §8's numbered responsive-component steps 1–4), and no destructive/batch operations exist so the validation cap does not apply; however the Grid section is only two executable lines with no IView/layout detail, leaving minor gaps consistent with anchor 4.

4 / 5

Progressive Disclosure

Ten numbered sections, an internal anchor link from §3 to §10, a Key Files table, and a single clearly signaled one-level reference ("Canonical reference: .github/instructions/design-tokens.instructions.md (auto-injected for src/vs/**/*.css)") give good structure; no bundle files exist, and ~70 lines of §10 token tables inlined in a ~330-line single file could arguably live in a separate reference, keeping it below anchor 5's appropriately-split ideal.

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: it comprehensively enumerates the skill's concrete coverage areas, includes an explicit 'Use when...' clause with natural trigger phrases, and is unmistakably scoped to VS Code CSS work. Its only weaknesses are topic-style rather than action-verb phrasing and a few missing natural synonyms such as "styling" or ".css".

DimensionReasoningScore

Specificity

The description enumerates many concrete capability areas — "file organization, class naming, standard sizes, SplitView/Grid layout, scrollable content, responsive layout, and text overflow/ellipsis patterns" — but they are topic phrases rather than the verb-led concrete actions of the anchor-5 example, so it sits at anchor 4 with minor gaps.

4 / 5

Completeness

It explicitly answers both: "what" via the enumerated convention areas and "when" via the concrete trigger clause "Use when writing CSS, building layouts, or fixing text truncation issues", matching the anchor-5 example pattern; clearly above anchor 4's less-specific 'when'.

5 / 5

Trigger Term Quality

"Use when writing CSS, building layouts, or fixing text truncation issues" uses phrases a user would naturally say, and "ellipsis"/"responsive" are domain-natural; a few common synonyms (e.g. "styling", "text cut off", ".css" files) are missing, which keeps it below the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

"VS Code CSS conventions" plus "SplitView/Grid layout" and "scrollable content" carve a clear niche with distinct terminology, but the broad triggers "writing CSS" and "building layouts" could overlap a generic CSS/styling skill — minor overlap risk per anchor 4 rather than anchor 5's minimal risk.

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

microsoft/vscode

Path

.github/skills/ux-css-layout/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.