skills.rest
jimeh
jimehCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-philosophy

Applies a Values-Principles-Moves vocabulary to review and fix VS Code UI design decisions.

Updated Apr 14, 2026
Search Tags:#typography#feedback#design system#design tokens#ui review#vs code#spacing
One-click install
npx skills add https://github.com/jimeh/hucode --skill design-philosophy-jimeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-philosophy
Source: https://github.com/jimeh/hucode/tree/main/.github/skills/design-philosophy
Command: npx skills add https://github.com/jimeh/hucode --skill design-philosophy-jimeh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI feedback often stalls at raw pixel values ("make it 6px") that fix one spot and drift out of sync. This Skill provides a shared design vocabulary—Values, Principles, and Moves—so designers, engineers, and agents can name the rule behind a visual problem and land the fix everywhere it applies. ## Core Features & Use Cases - Three-layer reasoning framework: Translate a "this feels off" observation into a named value (Calm, Focused, Consistent, Delightful), the principle it breaks, and the concrete move that restores it. - Concrete design tokens and ramps: Reference elevation tiers (Control 4px / Inner 6px / Outer 8px), the spacing ramp, type roles with two weights, 16px/12px icon sizes, one-stroke borders, and theme-based color tokens. - Feedback phrasebook: Convert pixel-level complaints into principled statements (e.g., "this overlay is rounded at the control tier") for design reviews and code review comments. - Use Case: When reviewing a busy settings panel, identify that it breaks "Quiet at rest" and "One thing leads," then demote secondary text to a quieter type role and reveal chrome only on hover. ## Quick Start Ask the AI to review a UI surface or screenshot using the VS Code design philosophy and describe any issues in terms of values, principles, and moves.

Frequently Asked Questions about design-philosophy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I give actionable UI design feedback in code review?▼

Lead with the feeling (which value is missing: Calm, Focused, Consistent, or Delightful), name the surface, state the principle it breaks, then suggest the move that fixes it. Only mention pixel numbers last, as symptoms rather than the fix itself.

What corner radius should I use for VS Code UI surfaces?▼

Radius is chosen by elevation tier, not taste: Control tier is 4px for interactive elements, Inner tier is 6px for containers inside surfaces, and Outer tier is 8px for floating overlays like menus and dialogs. Pills use the fully round circle token.

What icon sizes does the VS Code design system allow?▼

Codicons come in exactly two sizes: 16px base for standalone or primary actions, and 12px compact for dense rows and inline glyphs. A 14px icon is always a bug, and compact icons should use the matching *Compact glyph variant.

Can I use font-weight 500 in VS Code UI text?▼

No, the type ramp has exactly two weights: regular (400) and semiBold (600). A 500 weight is off the ramp and should snap to semiBold. Emphasis comes from the same type role at semiBold, not a bigger size.

Should UI labels use sentence case or title case in VS Code?▼

The design philosophy prefers sentence case for calmer, more readable labels, but it conflicts with the repo-wide guideline mandating title case. Until reconciled, follow title case for shipped non-experimental UI and sentence case only in surfaces adopting the modern UI direction.

When is animation appropriate in VS Code UI design?▼

Motion must do a job: guide the eye, confirm an action, orient the user, or smooth a jump. Keep it subtle, short, and interruptible, honor prefers-reduced-motion, and cut any transition that is purely decorative.

Related Skills

Explore More Design & Creative Skills→
lucidlabs-hqlucidlabs-hq
2

visual-verify

Capture interactive states and visual snapshots of a running frontend with agent-browser.

Official
Advanced
ancolemanancoleman
503

theming-components

Manage design tokens and switch themes with CSS custom properties.

Community
Advanced
KyaniteLabsKyaniteLabs
3

color-system

Generate OKLCH color ramps and semantic token systems with WCAG 2.x contrast verification.

Official
Advanced
mckissingermckissinger
1

app-design-directions

Create a structured workflow for exploring and selecting application interface design directions.

Community
Advanced