skills.rest
misty-step
misty-stepOFFICIAL
Explore all skills by this author →
WebsiteGitHub

make-interfaces-feel-better

Codify design principles for UI polish across typography, surfaces, motion, and accessibility.

13|3|Updated Mar 2, 2026
Search Tags:#typography#accessibility#motion#visual-design#border-radius#ui-polish#surfaces
One-click install
npx skills add https://github.com/misty-step/harness-kit --skill make-interfaces-feel-better-misty-step
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: make-interfaces-feel-better
Source: https://github.com/misty-step/harness-kit/tree/main/skills/.external/jakub-make-interfaces-feel-better
Command: npx skills add https://github.com/misty-step/harness-kit --skill make-interfaces-feel-better-misty-step

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Interfaces frequently feel inconsistent or rough due to overlooked micro-details. This Skill codifies design principles to help teams consistently apply polish across typography, surfaces, motion, and accessibility.

Core Features & Use Cases

  • Concentric border radius rules to ensure nested elements feel cohesive.
  • Optical alignment and type scale decisions to improve visual balance.
  • Shadows over borders to create depth that adapts to any background.
  • Interruptible animations and split, staggered enter/exit motions for smooth interactions.
  • Contextual icon animations and font smoothing, tabular numbers to maintain consistency.
  • Image outlines and minimum hit areas to improve usability and accessibility.

Quick Start

Review the documented principles and apply the recommended UI details (typography, surfaces, animations, and accessibility) to improve an existing interface.

Frequently Asked Questions about make-interfaces-feel-better

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

FAQPage Schema
How do I make UI interfaces feel polished and smooth?▼

Improve interface polish by applying exact rules for concentric border radii, optical alignment, shadows over borders, and interruptible motion to enhance perceived visual quality consistently.

What is the correct border radius for nested UI elements?▼

Nested UI elements require concentric border radius rules, where inner elements have a smaller radius calculated to visually nest cohesively within their outer parent surfaces.

Why should I use shadows instead of borders for UI depth?▼

Shadows create depth that adapts to any background, unlike borders which can clash with varying surface colors. This approach ensures consistent visual separation across your interface.

How do I align UI text optically for better visual balance?▼

Optically align text by applying specific type scale decisions and optical centering rules rather than mathematical centering, correcting visual imbalances caused by typography metrics.

Can I use these UI polish principles for marketing sites and dashboards?▼

Yes, these UI polish principles are applicable to frontend UI development, design reviews, and animation work across web apps, dashboards, and marketing sites.

Related Skills

Explore More Design & Creative Skills→
woxiangyangzhimaowoxiangyangzhimao
3

make-interfaces-feel-better

Review CSS and HTML UI details for spacing, typography, and motion.

Community
Intermediate
gsd-buildgsd-build
7.8k

make-interfaces-feel-better

Codify design-for-feel guidelines for surfaces, typography, motion, and interaction.

Official
Intermediate
mikkermikker
102

make-interfaces-feel-better

Apply principled design guidelines to improve perceived UI quality.

Community
Intermediate
Objective-ArtsObjective-Arts

visual

Define minimalist visual design rules for shadows, colors, border-radius, and typography.

Official
Intermediate