Skip to content
mcp/skillhub

Agent Skill

Make Interfaces Feel Better skill

make-interfaces-feel-betterjakubkrehel/make-interfaces-feel-betterskills/make-interfaces-feel-better/SKILL.md

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.

3.8kMIT

always on

117 tokname + description

once used

2,627 tokSKILL.md body

bundled files

629 KB

installs

73kskills.sh

Install the Make Interfaces Feel Better skill

Skills CLI (Claude Code, Codex, Cursor and others)

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

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/jakubkrehel/make-interfaces-feel-better.git /tmp/make-interfaces-feel-better
mkdir -p ~/.claude/skills
cp -R /tmp/make-interfaces-feel-better/skills/make-interfaces-feel-better ~/.claude/skills/make-interfaces-feel-better

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description117 tok
When the agent uses itThe SKILL.md instructions2,627 tok
Only if opened6 bundled files (29 KB)varies

Until it is used, make-interfaces-feel-better costs about 12× less than the median MCP server we measured (1,362 tokens on every turn). Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Details that make interfaces feel better
  • Quick Reference
  • Core Principles
  • 1. Concentric Border Radius
  • 2. Optical Over Geometric Alignment
  • 3. Shadows for Elevation, Borders for Structure
  • 4. Interruptible Animations
  • 5. Split and Stagger Enter Animations
  • 6. Subtle Exit Animations
  • 7. Contextual Icon Animations
  • 8. Font Smoothing
  • 9. Tabular Numbers
  • 10. Text Wrapping
  • 11. Image Outlines
  • 12. Scale on Press
  • 13. Skip Animation on Page Load
  • 14. Never Use transition: all
  • 15. Use will-change Sparingly
  • 16. Minimum Hit Area
  • 17. Match Icon Stroke to Text Weight
  • 18. One SVG, Recolored per State
  • 19. Motion Restraint
  • Common Mistakes
  • Review Output Format