U Skills & Agents
← All Skills
Coding v3845620 By Jakub Krehel

Make Interfaces Feel Better

A third-party skill based on Jakub Krehel's article 'Details that make interfaces feel better'. It encodes 16 concrete principles Claude applies when building UI or reviewing frontend code: concentric border radius (outer radius equals inner plus padding), optical over geometric alignment, layered transparent shadows instead of borders, interruptible animations via CSS transitions rather than keyframes, split-and-stagger enter animations (~100ms delays), subtle exit animations, font smoothing, tabular numerals to stop layout shift on changing values, and text-wrapping strategies (balance for headings, pretty for body). It also ships a list of 10 common mistakes with fixes and a 14-point review checklist covering nested radius consistency, animation properties, minimum 40x40px hit areas, and avoiding patterns like transition: all. Use it when implementing components, micro-interactions, hover states, shadows, borders, typography, or enter/exit animations.

frontenddesignanimationcssuitypography
Install

Install the skill

This is a multi-file skill pinned at commit 3845620. The SKILL.md is an index: it links to sibling files (typography.md, surfaces.md, animations.md, performance.md) for the detailed guidance, so install the whole skill directory, not just SKILL.md, or those relative links won't resolve.

  1. 1

    Get the whole skill directory at the pinned commit

    Clone the repo and check out the pinned commit, keeping SKILL.md alongside its typography.md, surfaces.md, animations.md, and performance.md files. Use a full clone (not --depth 1) so the pinned SHA is present even after the upstream default branch advances.

    git clone https://github.com/jakubkrehel/make-interfaces-feel-better
cd make-interfaces-feel-better
git checkout 384562064fcdd99778fcbafd8729626fe6aab02f
# skill lives in: skills/make-interfaces-feel-better/
# (separate lines so this works in bash and Windows PowerShell alike)
  2. 2

    Package the folder as a ZIP

    claude.ai and Claude Desktop upload a skill as a ZIP whose root is the skill folder (SKILL.md and its sibling .md files sit inside that folder). Zip it from the parent directory so the layout is correct. macOS ships zip; on a minimal Linux host install it first (e.g. sudo apt install zip); on Windows use the PowerShell Compress-Archive line, which needs no extra tool.

    # macOS / Linux
cd skills
zip -r make-interfaces-feel-better.zip make-interfaces-feel-better

# Windows (PowerShell)
Compress-Archive -Path skills\make-interfaces-feel-better -DestinationPath make-interfaces-feel-better.zip
  3. 3

    Upload it to Claude

    In Claude, go to Customize → Skills, choose Upload a skill, and select make-interfaces-feel-better.zip. (Claude Code users can instead drop the folder into .claude/skills/.)

  4. 4

    Use it

    Ask Claude to build or review a UI component and it applies the principles and runs the review checklist.

View the skill directory
Toolkit

What's in this toolkit

This is a toolkit of multiple skills, each with its own SKILL.md. Open the source on GitHub (pinned to the reviewed commit) to read the instructions for the skills you install.

Make Interfaces Feel Better

A third-party skill by Jakub Krehel, based on his article “Details that make interfaces feel better”. The pinned skill directory is the source of truth; this entry is a short summary.

It is a multi-file skill: SKILL.md is an index that links to typography.md, surfaces.md, animations.md, and performance.md for the detailed guidance, so install the whole directory at the pinned commit. Together they give Claude a set of design-engineering principles plus a common-mistakes list and a review checklist, so it applies the same polish (concentric radius, optical alignment, shadows over borders, interruptible and staggered animations, font smoothing, tabular numerals, text wrapping) whether it is building a component or reviewing frontend code.