CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-philosophy

The VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels. Use when designing, building, reviewing, or giving feedback on any visual surface; when deciding a radius, spacing, type role, icon size, border, color, or motion; or when translating a "this feels off" observation into a concrete, principled fix.

70

Quality

88%

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

The canonical home for this skill is design-philosophy in microsoft/vscode

SKILL.md
Quality
Evals
Security

Quality

Content

77%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 delivers highly actionable, concrete design guidance — real token names, decision rules, a feedback phrasebook, and worked examples driven by a clear, unambiguous feeling→principle→move workflow. Its weaknesses are redundancy (the core rule is repeated several times with editorial framing) and a monolithic structure that inlines content a multi-file bundle would serve better, with references to files not present in the skill.

Suggestions

State the feeling→principle→move ordering once (e.g., in the three-layers section) and have later sections reference it instead of restating it; trim the "Why these four?" tensions discussion to the operative guidance.

Split the Moves tables, the phrasebook, and the feedback protocol into reference files under references/ so SKILL.md stays a navigable overview, matching the doc's own read-top-down/bottom-up guidance.

Either bundle the referenced files (baseSizes.ts, design-tokens.instructions.md, coding-guidelines.instructions.md) or remove/replace the dangling external paths so every link from SKILL.md resolves inside the skill.

DimensionReasoningScore

Conciseness

Most of the body is dense, proprietary content Claude does not already know (token ramps, elevation tiers, the phrasebook), but the "lead with the feeling, not the fix" rule is restated in four or more places (three-layers intro, values intro, moves intro, and the feedback section), and the "Why these four?" / tensions discussion is editorial persuasion rather than operational instruction. This fits anchor 3 ("mostly efficient but includes some unnecessary explanation or could be tightened") better than anchor 4, where over-explanation would be only minor.

3 / 5

Actionability

For an instruction-only skill the guidance is fully actionable: concrete decision rules with values ("500 is off the ramp — snap to `semiBold` (600)", "codicons are 16 or 12 only", the spacing ramp steps), named CSS tokens in tables, a don't-say/do-say phrasebook, and four worked examples covering common cases. The guidance is copy-paste ready for its task, matching anchor 5.

5 / 5

Workflow Clarity

The core process is unambiguous and sequenced: "name the feeling, find the principle it breaks, then reach for the move", reinforced by a numbered 5-step feedback order (feeling → surface → principle → move → number) and worked examples that demonstrate each step. No validation checkpoints are needed for this non-destructive judgment task, so the simple-skill exception applies and the single workflow is unambiguous.

5 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ are absent), yet the entire vocabulary — values, principles, moves tables, phrasebook, and feedback protocol — is inlined in a single ~330-line SKILL.md whose own text says to "read top-down when learning", material that would work well as separate reference files. Its external references (`baseSizes.ts`, `design-tokens.instructions.md`, `coding-guidelines.instructions.md`) point to paths outside the skill that are not bundled and cannot be verified. This fits anchor 3 ("content that should be separate is inline") rather than anchor 4 despite good internal anchor-based navigation.

3 / 5

Total

16

/

20

Passed

Description

96%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 states a clear, niche identity, explicitly answers both what and when with concrete trigger phrases, and includes natural user vocabulary like "this feels off". Its only weakness is that the decision-trigger nouns (radius, spacing, color, motion) overlap with generic UI/design skill triggers rather than being uniquely VS Code-specific.

Suggestions

Qualify the trigger scope so it fires for VS Code UI work specifically rather than any visual surface (e.g., "Use when designing or reviewing VS Code UI surfaces..."), reducing overlap with generic design/styling skills.

Consider adding a distinguishing noun or two that only this skill would claim (e.g., "design tokens", "elevation tiers") so the trigger vocabulary is as distinctive as the niche it names.

DimensionReasoningScore

Specificity

The description enumerates multiple concrete actions — "reasoning about UI in design terms", "deciding a radius, spacing, type role, icon size, border, color, or motion", and "translating a 'this feels off' observation into a concrete, principled fix" — covering the domain comprehensively. No material gaps exist, so it matches the anchor 5 example's breadth rather than the 'minor gaps' of anchor 4.

5 / 5

Completeness

It explicitly answers both questions: the what is "a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels", and the when is an explicit "Use when..." clause with three concrete trigger conditions. This mirrors the anchor 5 example structure exactly.

5 / 5

Trigger Term Quality

Natural trigger phrases a user would actually say are comprehensively covered: "designing, building, reviewing, or giving feedback on any visual surface", the concrete decision nouns (radius, spacing, icon size, color, motion), and the especially natural "this feels off". No common synonyms for this domain are missing, so anchor 5 fits better than the 'a few natural terms missing' of anchor 4.

5 / 5

Distinctiveness Conflict Risk

"The VS Code design philosophy" names a clear niche, but the trigger conditions — "any visual surface", "deciding a radius, spacing... color, or motion" — are vocabulary shared with generic frontend/design and styling skills, creating minor overlap risk. This fits anchor 4 ("mostly distinct; minor overlap risk with closely related skills") better than anchor 5's minimal-conflict profile.

4 / 5

Total

19

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 3 suspicious

Warning

Total

15

/

16

Passed

Repository

posit-dev/positron

Path

.github/skills/design-philosophy/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.