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.

72

Quality

90%

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

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.

An unusually actionable instruction skill: concrete tokens, values, and decision rules throughout, with a clear and consistently modeled diagnostic workflow. Its weaknesses are length and layout — significant rhetorical repetition and reference material (phrasebook, feedback protocol, worked examples) inlined in SKILL.md rather than split into one-level-deep reference files.

Suggestions

Consolidate the 'lead with the feeling, not the pixel' guidance, which is repeated in the intro, 'How to read this', the Moves preamble, and the feedback section, into a single statement, and trim the 'Why these four?' rationale section to a few lines — a 30-40% length reduction is achievable without losing instruction value.

Move the phrasebook table, the worked examples, and the 'Giving and receiving feedback' protocol into references/ files (e.g., PHRASEBOOK.md, FEEDBACK.md), keeping SKILL.md as the Values→Principles→Moves overview with clearly signaled one-level-deep pointers.

Make the external detail self-contained or explicitly marked: either bundle the design-token reference as a references/ file inside the skill, or state in SKILL.md that paths like baseSizes.ts and design-tokens.instructions.md live in the repository outside the skill bundle, so navigation does not depend on unverifiable relative paths.

DimensionReasoningScore

Conciseness

Mostly efficient — no filler explaining basics Claude already knows — but the core 'lead with the feeling, not the pixel' message is restated four times (intro, 'How to read this', the Moves preamble, and the feedback section), and the ~25-line 'Why these four?' section is essayistic rationale rather than instruction. Fits 'mostly efficient but includes some unnecessary explanation or could be tightened' better than 'minor instances that could be trimmed' (4), since a 30-40% cut is achievable without losing guidance.

3 / 5

Actionability

Fully concrete for an instruction-only skill: named tokens (`--vscode-cornerRadius-small/medium/large/circle`, `--vscode-strokeThickness`), exact values (4/6/8px tiers, the enumerated spacing ramp, 16/12px icon sizes, 400/600 weights, `heading1-3`/`body1-2`/`label1-3` roles), a per-move decision rule, and a do/don't phrasebook covering the common cases. Every move tells the reader exactly which value to pick and how to phrase the bug.

5 / 5

Workflow Clarity

The diagnostic sequence is explicit and repeated consistently: 'name the feeling, find the principle, then reach for the move' (bottom-up reading), a numbered 5-step feedback order (feeling → surface → principle → move → number), five worked examples modeling the sequence end-to-end, and an explicit conflict-resolution rule for the sentence-case/title-case contradiction. There are no validation checkpoints because nothing destructive or batch is performed, so the rubric's validation cap does not apply.

5 / 5

Progressive Disclosure

Internal structure is good (clear sections, anchor links from principles to moves), but everything — the phrasebook table, the feedback protocol, and the worked examples — is inlined in a ~320-line single-file skill with no bundled reference files, and the only external pointers (`baseSizes.ts`, `design-tokens.instructions.md`) are repo-relative paths outside the bundle that cannot be verified from the skill itself. This fits 'some structure but content that should be separate is inline' rather than 'most content appropriately placed' (4).

3 / 5

Total

16

/

20

Passed

Description

100%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 model description: it states precisely what the skill provides (a Values→Principles→Moves vocabulary), when to reach for it (design/build/review/feedback on any visual surface, specific attribute decisions, translating vague observations), and does so in natural trigger language with no padding. No changes needed.

DimensionReasoningScore

Specificity

Quotes multiple specific concrete actions and decision points — 'designing, building, reviewing, or giving feedback on any visual surface', 'deciding a radius, spacing, type role, icon size, border, color, or motion', 'translating a "this feels off" observation into a concrete, principled fix' — comprehensively covering this skill's domain. Anti-drift check: this is not 'several specific actions with minor gaps' (4); the enumerated attribute decisions leave no obvious coverage hole for a design-vocabulary skill.

5 / 5

Completeness

Both halves are explicit: the 'what' is 'a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels', and the 'when' is a full 'Use when...' clause with three concrete trigger conditions. This mirrors the anchor-5 example structure (what + 'Use when...' with concrete triggers).

5 / 5

Trigger Term Quality

Comprehensive natural-language coverage: users would actually say 'designing', 'reviewing', 'giving feedback', 'radius', 'spacing', 'icon size', 'border', 'color', 'motion', and especially 'this feels off' — the colloquial phrase this skill exists to handle. Synonyms are subsumed (padding → spacing, font → type role), matching the 'comprehensive coverage including synonyms' anchor better than 'a few natural terms missing' (4).

5 / 5

Distinctiveness Conflict Risk

Clear niche — the VS Code design philosophy — anchored by distinct triggers ('type role', 'elevation' vocabulary, 'this feels off') that no generic design, chart, or coding skill would claim. It is written in third person with no over-claims, so no specificity penalty applies.

5 / 5

Total

20

/

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

microsoft/vscode

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.