What does this skill do, and when should you use it?
This skill from the VS Code repository provides a three-layer vocabulary: Values, Principles, and Moves. It helps designers and engineers identify the intended feeling of a surface, name the rule it violates, and select a concrete design mechanism. The guidance covers hierarchy, spacing, typography, icons, borders, theme colors, interaction reveals, and motion. It is a strong fit for teams seeking a shared UI review language, but it is not an executable design tool and the supplied materials document no standalone installation command or automated test suite.
It evaluates UI issues through four values—Calm, Focused, Consistent, and Delightful—and seven principles, then maps them to decisions about elevation tiers, spacing, type roles, icon sizes, strokes, theme tokens, and reveal-on-intent behaviors. It also supplies worked examples, feedback phrasing, and references to VS Code design-token files so feedback can be expressed in terms of roles and rules rather than isolated pixel values.
- A designer reviewing a settings page, sidebar, or dialog needs to explain why the surface feels cramped, flat, or visually noisy.
- A frontend engineer choosing a radius, spacing value, type role, or Codicon size needs a shared rule instead of a taste-based decision.
- A team reviewing a screenshot or mockup needs to turn “this feels off” into a value, surface, principle, and concrete move.
- A team maintaining light, dark, and high-contrast themes needs to check that colors come from VS Code theme tokens rather than hardcoded values.
- A designer evaluating an animation or reveal needs to determine whether it guides, confirms, or orients the user instead of adding decoration.
How do you install this skill?
- The sentence-case guidance conflicts with the repository's current UI-label convention; users should confirm scope and reconcile the rules before applying it.
- The skill references several repository files whose contents were not supplied; token, typography, or casing assumptions should be rechecked when those files change.
- This is a design-reasoning vocabulary, not an automatic implementation or validation tool; human design and engineering review remains necessary.
The skill is located at .github/skills/design-philosophy/SKILL.md in https://github.com/microsoft/vscode. The supplied README and SKILL.md do not document a standalone installation command, copy procedure, or package for this individual skill; adoption therefore means supplying that file as Agent Skill content to a compatible client. The repository is MIT-licensed, but it contains other skills whose capabilities should not be attributed to this one.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/microsoft/vscode.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.github/skills/design-philosophy" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Make .github/skills/design-philosophy/SKILL.md available as skill context in an Agent Skills-compatible client, then provide a concrete UI review request. For example: Review this settings panel. Identify the missing value first, name the violated principle, and propose the corresponding design move. For a screenshot or surface review, include the surface name, theme mode, and whether reduced motion is relevant. The skill recommends the order: feeling, surface, principle, move, and only then a numeric value if useful.
What are this skill's strengths and limitations?
- Offers a complete path from design intent to evaluative rules and implementation mechanics.
- Defines specific guidance for spacing, radii, type weights, icon sizes, borders, colors, and interaction reveals.
- Encourages named tokens and semantic roles, which helps prevent visual drift.
- Includes worked examples and reusable language for actionable design feedback.
- It provides guidance and review language rather than code changes, screenshot processing, or automated checks.
- The supplied materials show no standalone installation instructions, scripts, test suite, or runtime dependency.
- There is a documented casing conflict: the modern UI guidance favors sentence case, while the repository-wide coding guideline requires title-style capitalization for shipped, non-experimental UI.
- Its radius, spacing, and typography rules are designed around VS Code's system and may require remapping in another product.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| VS Code Design Philosophy this page ✓ Microsoft · Official | 58 · Recommended | ★ 194k | 11d ago | MIT |
| Stitch Design System Manager | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Figma Design System Rules Builder ✓ OpenAI · Official | 50 · Use with care | ★ 28k | 4mo ago | — |
| Stitch Frontend Design Extractor | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| TypeUI Design Fundamentals | 70 · Strongly recommended | ★ 2k | 3mo ago | NOASSERTION |
How did FollowSkills review this skill?
The skill provides design reasoning and documentation guidance only: it does not execute code, access data, add dependencies, or create external side effects. Repository evidence supplies MIT licensing and Microsoft provenance. It does not specify user confirmation, rollback, handling of sensitive design data, or a concrete source-verification process, so full marks are not justified.
The Values→Principles→Moves structure, decision rules, and worked examples make the normal usage path reasonably coherent. However, the documented casing conflict with repository coding guidance, references to supporting files not included in the supplied skill evidence, and absence of skill-specific tests or abnormal-input feedback reduce reliability under static calibration.
The trigger description covers designing, building, reviewing, and giving feedback on visual surfaces, with semantic guidance for many UI issues. Non-fit boundaries, input/output contracts, false-trigger conditions, and Chinese-language usage guidance are not explicit. The core function does not depend on overseas services, so no network-reachability deduction is applied.
The document uses layered information architecture and includes examples, terminology, decision rules, a known conflict, and implementation references. Repository evidence adds MIT licensing, Microsoft maintenance context, and version information. The skill lacks explicit versioning, changelog, named maintenance responsibility, update path, installation notes, and troubleshooting guidance, so points are deducted.
It can convert pixel-level feedback into reusable design language based on values, principles, and mechanics, and its examples are directly actionable for the core task. There is no evidence of representative output validation, cross-surface consistency verification, or comparative benefit over existing review methods; static calibration therefore limits the score to 7.
The skill contains auditable rules, token names, implementation references, and relatively clear separation between guidance and examples. It provides no skill-specific test suite, third-party reproduction record, or independent corroboration, and the supplied CI/test material does not cover this skill's key paths, so only the static-review ceiling is warranted.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →