CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

62

Quality

73%

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

Fix and improve this skill with Tessl

tessl review fix ./.github/skills/design-philosophy/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

63%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 well-organized, genuinely actionable design-reasoning reference with concrete tokens, ramps, and a useful phrasebook. Its weaknesses are length/redundancy for a SKILL.md and a monolithic structure with no bundle files to offload the mechanical reference material.

Suggestions

Tighten conciseness: collapse the 'Why these four?' essay and the four worked examples into one or two, since the framework is already restated in the Values/Principles tables and the phrasebook.

Improve progressive disclosure: move the Moves mechanical toolbox (tokens, ramps, tiers, phrasebook) into a references/ file and keep SKILL.md as the Values→Principles overview with one-level-deep links, so the inline body shrinks toward an overview.

Verify or remove the out-of-bundle links (baseSizes.ts, design-tokens.instructions.md, coding-guidelines.instructions.md) — if they are not part of the skill bundle, either include them under references/ or note they are external repo paths so navigation is not misleading.

DimensionReasoningScore

Conciseness

The body runs ~330 lines and restates the framework multiple times — the Values/Principles table, the 'Why these four?' essay, four worked examples, and the phrasebook all re-explain principles already covered; it is mostly efficient per-section but visibly padded for a SKILL.md, so it sits at the midpoint rather than the lean 4-5.

3 / 5

Actionability

Concrete decision rules ('a value either lands on the ramp or it doesn't', 'codicons are 16px or 12px'), named tokens (--vscode-cornerRadius-small, --vscode-strokeThickness), an explicit spacing ramp (0,2,4,6,8,10,12,16,20,24,28,32,36,40), and a do/don't phrasebook give mostly executable guidance; it is not 5 because much guidance is evaluative phrasing rather than copy-paste-ready mechanics.

4 / 5

Workflow Clarity

A clear reasoning sequence is given — 'name the feeling, find the principle it breaks, then reach for the move' and the 5-step feedback order (feeling → surface → principle → move → number); it is not 5 because there are no validation/retry checkpoints, though none are strictly required for this non-destructive skill.

4 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ absent), yet the doc inlines the full Moves mechanical toolbox and the phrasebook that could live in separate files, and its only external links (baseSizes.ts, design-tokens.instructions.md, coding-guidelines.instructions.md) point outside the bundle and cannot be verified; structure within the file is good but content is monolithic, matching the 3 anchor.

3 / 5

Total

14

/

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, well-structured description: third-person voice, explicit 'what' and 'when', and natural trigger phrases including the colloquial 'this feels off'. It is scoped clearly to VS Code UI design with only minor overlap risk against generic design skills.

DimensionReasoningScore

Specificity

Quotes 'reasoning about UI in design terms instead of raw pixels' and lists concrete application actions ('deciding a radius, spacing, type role, icon size, border, color, or motion', 'translating a "this feels off" observation into a concrete, principled fix'); it names several specific surfaces but the core 'what' is a shared vocabulary rather than discrete operations, so it sits just below the comprehensive 5.

4 / 5

Completeness

Explicitly answers both — what ('The VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms') and when ('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') — with concrete trigger phrases; it is not a 4 because the 'when' is as explicit and specific as the 'what'.

5 / 5

Trigger Term Quality

Natural trigger phrases a user would say appear ('designing, building, reviewing, or giving feedback on any visual surface', 'this feels off', 'radius, spacing, type role, icon size'); good keyword coverage with the colloquial 'this feels off' anchor, but a few common synonyms a designer might voice are not exhaustively listed, keeping it at 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

Scoped to 'VS Code design philosophy' with distinct Values→Principles→Moves triggers, giving a clear niche; it is not a 5 because the broader UI/design-feedback framing could overlap with general design or brand-skills at the margin.

4 / 5

Total

17

/

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 3 suspicious

Warning

Total

15

/

16

Passed

Repository
microsoft/vscode
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.