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.
What it does
Make Interfaces Feel Better as an installable Claude skill: Jakub Krehel's 16 rules for concentric radius, optical alignment, shadows, and animation polish.
How to use this
Once it is installed, this skill picks itself up. You do not need to name it.
- Created by
- Jakub Krehel
- Category
- Engineering
- Source
- View source
Run this on Skills and Agents
You can run the skill on Skills and Agents by creating an account. You don't need to install anything. We provide the model and tokens. Your connected tools and company brain are ready to use.
Skills give you best practices and templates to get the most out of your AI
Add this skill
Pick where you want it. Nothing to configure after.
These install links go live once the signup flow ships. Until then, ask Claude, ChatGPT, or Gemini to fetch this skill's file directly from GitHub.
Not sure which? See the install guide.
Share this skill
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.
Third-party, by Jakub Krehel
June 10, 2026
Install the skill
This is a multi-file skill. 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. On Claude Code that is one command (step 1). claude.ai and Claude Desktop take a ZIP upload instead, so use steps 2 through 4 for those.
- 1
Claude Code: run one command
The skills CLI pulls the whole skill directory, so the sibling files resolve. Note that this installs from the repo's default branch, which is the current version rather than the commit 3845620 we reviewed. If you want the exact reviewed commit, skip this and use the manual route below.
npx skills add jakubkrehel/make-interfaces-feel-better - 2
claude.ai or Claude Desktop: get the skill directory at the pinned commit
Clone the repo and check out the pinned commit, keeping
SKILL.mdalongside itstypography.md,surfaces.md,animations.md, andperformance.mdfiles. 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) - 3
claude.ai or Claude Desktop: 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 PowerShellCompress-Archiveline, 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 - 4
claude.ai or Claude Desktop: upload the ZIP
In Claude, go to Customize → Skills, choose Upload a skill, and select
make-interfaces-feel-better.zip. - 5
Use it
Ask Claude to build or review a UI component and it applies the principles and runs the review checklist.
Your skill is downloading.
Create a free account and the platform does the rest:
- Get an email the moment this skill updates
- See every skill and agent you've installed, in one place
- Get your next recommendation based on what you actually use
No credit card. Takes about a minute.
What's in this toolkit
This is a toolkit of multiple skills, each with its own SKILL.md. Open the source on GitHub to read the instructions for the skills you install.
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.