make-interfaces-feel-betterby Jakub Krehel

Make Interfaces Feel Better Skill.

A Claude Code and Codex skill for UX research: design-engineering principles for hover, shadow, border, icon, type, and microinteraction polish.

UX & Research

Download OpenDesign View usage guide

jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md

--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format

Front matter and section headings read from the upstream file on 2026-09-14 · 11,798 characters in full

01 What it does

What the make-interfaces-feel-better Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Design-engineering principles for making interfaces feel polished, written for anyone building UI components or reviewing frontend code: hover states, shadows, borders, typography, icons, micro-interactions and enter/exit animations.

It carries nineteen numbered core principles with hard defaults — concentric border radius, optical alignment, layered box-shadows instead of fake-elevation borders, interruptible CSS transitions, stagger around 100ms, antialiased text, tabular numbers, pure black or white image outlines, scale(0.96) on press, 44×44px hit areas and icon stroke weight matched to text. Two review modes, quick and full, produce a Severity/Location/Before/After/Why table grouped by principle, capped at 5 or 15 findings, ending in Block, Needs changes or Approve.

What it produces

A review report that states up front what was inspected and never implies an uninspected surface was covered.
Findings grouped by principle inside a Severity, Location, Before, After, Why table that lists every change made or proposed rather than a subset.
A Considered but Rejected table with 1–3 real candidates in quick mode and 2–5 in full mode, each with the reason it was dropped.
A verification section listing the exact commands or interactions run and their observed results, followed by the verdict.

See the example prompt ↗

How It Works

01
Express Fixes in the Project's Own Styling System
Before proposing or writing any fix, identify how the project already styles things and phrase the change in that system — Tailwind in a Tailwind project, plain CSS in a CSS project, or the established CSS-in-JS approach.
02
Slow the Interface Down
When reviewing, replay motion at 10% speed in the browser's Animations panel, because what looks off at 10% speed is what is subtly wrong at full speed.
03
Default to Full Mode
Full is used whenever no review mode is supplied; quick has to be asked for explicitly.
04
Write Findings in a Fixed Table Format
Group findings by principle in a markdown table with Severity, Location, Before, After and Why columns; location cites path/to/file:line.
05
Account for All Five Categories
The scope table must carry all five Quick Reference categories, and an uninspected surface must never be implied as reviewed.
06
Close with Verification and a Verdict
The verdict is Block when a HIGH finding remains, Needs changes when only MEDIUM or LOW findings remain, and Approve only when nothing actionable is left.

02 Find your fit

When to Use the make-interfaces-feel-better Skill

Use the make-interfaces-feel-better skill in Claude Code or Codex when the job is UX research of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Building or reviewing UI components where visual detail work matters: animations, hover states, shadows, borders, typography, icons, micro-interactions and enter/exit transitions.
A fast pass over the primary user path and highest-traffic states, reporting only HIGH and MEDIUM issues.
A thorough audit of an entire requested scope across typography, surfaces, animations, icons and performance.
Projects that already have a styling convention, so polish fixes land in Tailwind, plain CSS or CSS-in-JS as appropriate.

Know the Boundaries

It will not add a second styling system to a project just to deliver a polish fix.
It refuses custom animation on high-frequency interactions, since the attention cost repeats on every trigger.
It does not stagger routine interactions, only infrequent staged entrances.
Borders kept only to fake elevation should be replaced by layered transparent box-shadow values; structural and state borders stay.

What to Provide

package.jsonNeeded to decide the icon animation path: check whether motion or framer-motion is installed, and match the established import path.
Source files or exact screensFindings cite path/to/file:line; when the artifact has no source files, the exact screen and component are cited instead.
Mode, scope and framework contextState the mode, exact scope, framework, styling conventions and any review boundary so the report can show what was actually inspected.

03 Inside the skill

Rules the make-interfaces-feel-better Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Compute Concentric Radii
Nested corners must be concentric: outer radius equals inner radius plus padding.
Always Press at 0.96
The click scale is fixed at scale(0.96) and never below 0.95; anything smaller reads as exaggerated. A static prop disables it when motion would distract.
Image Outlines Stay Neutral Pure
The 1px low-opacity image outline must be pure black in light mode and pure white in dark mode — never a tinted neutral like slate or zinc, which picks up the surface color and reads as dirt.
Never Transition Everything
List exact properties, such as transition-property: scale, opacity. Tailwind's transition-transform covers transform, translate, scale and rotate.
Match Icon Stroke to Text Weight
1.5px stroke sits beside regular 400 text, 2px beside semibold 600. Keep one stroke weight per icon set and never mix icon libraries on one surface.
Use the Exact Icon Animation Values
Contextual icon swaps animate on scale, opacity and blur — not visibility — and those values are fixed rather than improvised.
Stagger Only Infrequent Entrances
Split a staged entrance into semantic chunks and stagger them by roughly 100ms instead of animating one container. Routine, high-frequency interactions must not be staggered.
Size Hit Areas Deliberately
Prefer a 44×44px hit area for touch or mobile, at least 40×40px in dense desktop interfaces, extending smaller visible elements with a pseudo-element.

04 Put it to work

Install make-interfaces-feel-better in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add make-interfaces-feel-better to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Generic skills CLI form for skills/make-interfaces-feel-better/SKILL.md; the repository may document its own path.

Give the Skill a First UX Research Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Review [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Walk every state of the interface — hover, focus, active, loading and empty — as part of the review.
List every check that was not run beside the verdict as Not verified, saying what remains.
When initial={false} is applied, confirm it does not break intentional entrance animations.
Do not pad the report to reach the finding cap, and omit principles with no findings.

In OpenDesign import make-interfaces-feel-better from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Jakub Krehel
Repository: github.com/jakubkrehel/make-interfaces-feel-better Branch main
Skill file: skills/make-interfaces-feel-better/SKILL.md Content checksum recorded at verification; commit 35545ea
License: MIT From LICENSE.
Repository stars: 3,433 GitHub snapshot taken 2026-09-14 for the whole jakubkrehel/make-interfaces-feel-better repository. Not a rating or usage count for make-interfaces-feel-better.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Quick ReferenceFive categories — typography, surfaces, animations, icons, performance — each mapped to when to use it.
Core PrinciplesNineteen numbered rules, from concentric border radius through motion restraint, with exact defaults.
Common MistakesTable pairing each frequent mistake with its fix, such as transition: all and tiny hit areas.
Review Output FormatModes, coverage, finding caps, severity definitions and the required report structure.
Scope and CoverageState mode, scope, framework and conventions; list all five categories with evidence inspected and result.
FindingsGroup by principle in a Severity, Location, Before, After, Why table covering every change.
ExampleWorked tables for concentric border radius, tabular numbers and scale on press.
Considered but RejectedTable of real borderline candidates that were rejected, with the reason given.
Verification and VerdictList commands or interactions run, flag unverified checks, then Block, Needs changes or Approve.

The Skill's Own Description

“- Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows, icons, icon stroke weight, icon states, motion restraint.”

Front-matter description from SKILL.md. The full file is about 11,798 characters. Read the full file on GitHub.

06 Before you install

Questions About the make-interfaces-feel-better Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I need a motion library for the contextual icon animations?

No. If no motion library is installed, the file keeps both icons in the DOM with one absolutely positioned and cross-fades them with CSS transitions, which gives both enter and exit animations without any dependency.

An entrance animation plays on page load — how is that handled?

The file prevents it with initial={false} on AnimatePresence, which stops enter animations on the first render, and then asks you to confirm it does not break intentional entrance animations.

Does a review cover performance as well as visuals?

Yes, performance is one of the five Quick Reference categories, focused on transition specificity and will-change usage. will-change is limited to transform, opacity and filter — the properties the GPU can composite — and will-change: all is never used.

Make Interfaces Feel Better

Run make-interfaces-feel-better on a Real UX Research Task.

Download OpenDesign, import make-interfaces-feel-better from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills