Skills

make-interfaces-feel-better: match a detail checklist before changing interface feel

For people who want an agent to refine interface feel; install with the official npx, do a read-only check first, then change code only after confirming motion, hover, and hit-area issues.

Official source · make-interfaces-feel-better

Install

npx skills add jakubkrehel/make-interfaces-feel-better

Who this is for

This guide is for people whose interface already works but still feels slightly off, and who want an agent to check against a skill focused on small details. Officially it is written as attention to the details that make an interface nicer to use. Repository:

https://github.com/jakubkrehel/make-interfaces-feel-better

Skill body:

https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md

The materials say it covers animation, typography, icons, hover states, optical alignment, concentric radii, shadows, hit areas, and similar points. It fits when you already have a previewable interface and only want to polish these. It does not fit anyone with no interface yet who wants an agent to invent a full visual system from scratch. Current materials do not name a required client; do not infer that only one product can install it.

The repository is released under the MIT license; notes are at

https://github.com/jakubkrehel/make-interfaces-feel-better#MIT-1-ov-file

Finish a first try in 3 minutes

Follow only the one official recommended path.

Precondition: this machine can run npx, and the workspace has interface code or a preview you can open. Before running, confirm the current project is where the skill should be written.

Install location: handled by npx skills add. The materials do not write a target folder; do not invent a path that never appeared. The official skill file location is the SKILL.md above.

Copy and run:

npx skills add jakubkrehel/make-interfaces-feel-better

Success: the command finishes normally, and the agent can cite items such as animation, hover states, or hit areas. First do a read-only check: name an existing page and ask it only to name possible feel issues; forbid file changes. If it points to problems by the skill’s categories (not a vague “it looks bad”), the skill is loaded.

Changing styles touches the repository. Do not authorize writes until the files and scope are confirmed.

Usage cases

Case 1: Inspect hover states and hit areas first. This matches hover states and hit areas covered by the skill. Fits when buttons or links already click but feel hard to hit or give no feedback. Ask only for a problem list. Success: comments land on hover and clickable range, not a full-page redesign. The materials give no minimum hit-area size or concrete CSS.

Case 2: Check typography, optical alignment, and concentric radii. This matches typography, optical alignment, concentric border radius. Fits when layout is already set and you only want to fix tracking, alignment, and whether radii are concentric. Show a current screenshot or point to a component and ask for comments on these three only. Success: suggestions match these classes, not a new design system. The materials give no numeric spec; stop where numbers are missing.

Usage limits

Current materials prove only this npx install command and the topic set above. Do not invent other skill names, commands, or design tokens. The “and more” in the title is not expanded; do not treat unwritten topics as an existing checklist.

The materials do not require a language or framework. Do not infer a single stack from examples. Changes to animation, shadows, and radii can affect existing visuals; check first, then change. For more, follow the official repository:

https://github.com/jakubkrehel/make-interfaces-feel-better