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

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

78%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.

Highly actionable reference content with executable examples and precise, codebase-specific values throughout. The main weaknesses are the absent bundle structure — the large design-token section is inlined rather than split into a reference file — and the lack of an explicit verification step despite referencing stylelint hygiene constraints.

Suggestions

Move §10's full size/radius/font/codicon/stroke tables into a references/ file (e.g. references/design-tokens.md), keeping only the decision logic and the pointer to the auto-injected instructions file in SKILL.md.

Add an explicit verification step after CSS edits, e.g. "run hygiene/stylelint to confirm referenced --vscode-* vars exist in vscode-known-variables.json", turning the implicit constraint into a workflow checkpoint.

Trim duplicated rationale (e.g. the repeated snap-map and tie-rounding rules across §10 subsections) so the section reads as decision logic rather than a second copy of the token spec.

Dimension	Reasoning	Score
Conciseness	Dense tables, exact values, and code with almost no basic-concept padding, but §10 fully restates the auto-injected `.github/instructions/design-tokens.instructions.md` (its own note says to keep it in sync), which is redundant duplication.	4 / 5
Actionability	Copy-paste-ready TypeScript/CSS (IView implementation, three-property ellipsis combo), exact file paths, snap maps with tie-breaking rules, and WRONG/CORRECT flex examples covering the common cases (tree rows, part titles, buttons).	5 / 5
Workflow Clarity	Per-task decision logic is well-sequenced (the four-step responsive-component checklist in §8, scrollbar class-selection table, !important escalation rules), but no explicit validate/verify checkpoint such as "run stylelint/hygiene after edits" — it is only implied via the known-variables JSON note.	4 / 5
Progressive Disclosure	No bundle files exist and all ~400 lines are inline in SKILL.md; §10's full token tables are content that clearly belongs in a references/ file, even though the ten numbered sections and anchor link keep navigation easy.	3 / 5
	Total	16 / 20 Passed

Description

92%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: comprehensive and concrete on capabilities, with an explicit and natural-sounding 'Use when' trigger clause, tightly scoped to VS Code CSS. The only gap is a handful of missing trigger synonyms (stylesheet, .css, overflow, ellipsis).

Dimension	Reasoning	Score
Specificity	Enumerates eight concrete coverage areas ("file organization, class naming, standard sizes, SplitView/Grid layout, scrollable content, responsive layout, and text overflow/ellipsis patterns") with no vague filler — comprehensive for a conventions skill.	5 / 5
Completeness	Explicitly answers both what (the enumerated convention areas) and when ("Use when writing CSS, building layouts, or fixing text truncation issues") with concrete trigger phrases.	5 / 5
Trigger Term Quality	"writing CSS", "building layouts", and "fixing text truncation issues" are natural user phrasings, but common synonyms like "stylesheet", ".css file", "ellipsis", or "overflow" are missing.	4 / 5
Distinctiveness Conflict Risk	Scoped to "VS Code CSS" with codebase-specific artifacts (SplitView, Grid, codicon) — a clear niche unlikely to trigger for general web-CSS skills.	5 / 5
	Total	19 / 20 Passed

Validation

100%

Warnings & errors only

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-css-layout/SKILL.md
Commit: b0258bc

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.