What problem does it solve? UI feedback often stalls at pixel-level nitpicks like "make this 6px," which fixes one spot while the underlying design rule stays broken everywhere else. This Skill provides a shared design vocabulary—Values, Principles, and Moves—so designers, engineers, and agents can name the rule a surface breaks and land the fix consistently across the codebase. ## Core Features & Use Cases - Three-layer reasoning framework: Translate a vague "this feels off" observation into a named value (Calm, Focused, Consistent, Delightful), the principle it violates, 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" instead of "border-radius should be 6." - 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 Review this dialog's styling using the design philosophy and tell me which principles it breaks and which moves would fix it.
