Menu

#320 by GitHub stars

jakubkrehel/make-interfaces-feel-better

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 revie

Claude CodeCodexEngineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

skills/make-interfaces-feel-better/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Instructions only → After Instructions only

35545ea1512a → 35545ea1512a

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Instructions only

First observation → 35545ea1512a

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 35545ea1512ad59fa463e6b1f95ca9c052981fe6

git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git .hotskills/jakubkrehel-make-interfaces-feel-better && git -C .hotskills/jakubkrehel-make-interfaces-feel-better checkout --detach 35545ea1512ad59fa463e6b1f95ca9c052981fe6 # Copy each selected skill directory from .hotskills/jakubkrehel-make-interfaces-feel-better into .claude/skills/<skill-name>/
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git .hotskills/jakubkrehel-make-interfaces-feel-better && git -C .hotskills/jakubkrehel-make-interfaces-feel-better checkout --detach 35545ea1512ad59fa463e6b1f95ca9c052981fe6 # Copy each selected skill directory from .hotskills/jakubkrehel-make-interfaces-feel-better into .agents/skills/<skill-name>/
3.9kGitHub stars
44stars in 7 days
1skill in this repository
0commits in 30 days

Heat

5.5
  • Star growth, last 7 daysAhead of 86% of tracked repositories
  • Star growth, last 24 hoursAhead of 83% of tracked repositories
  • Rank movement, last 7 daysAhead of 38% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 6, 20263,924

Individual skills in this repository

How it works

make-interfaces-feel-better

When your agent uses it

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.

What it loads into context

Frontmatter

124 tokens

Always available to the agent

SKILL.md

2,753 tokens

When the skill is activated

Reference documents

7,516 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. Quick Reference
  2. Core Principles
  3. Common Mistakes
  4. Review Output Format

Files

  • SKILL.mdcore11,818 bytes
  • SKILL.mdcore11,818 bytes
  • agents/openai.yamlasset130 bytes
  • animations.mddoc12,711 bytes
  • icons.mddoc2,277 bytes
  • performance.mddoc3,046 bytes
  • surfaces.mddoc7,239 bytes
  • typography.mddoc4,690 bytes
Read SKILL.md

# Details that make interfaces feel better

Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code. Before suggesting or writing a fix, identify the project's existing styling system and express the change in that system: Tailwind in a Tailwind project, plain CSS in a CSS project, or the established CSS-in-JS approach. Never introduce a second styling system just to apply a polish fix.

When reviewing, slow the interface down: replay motion at 10% speed in the browser's Animations panel and walk every state: hover, focus, active, loading, empty. What feels off at 10% speed is what's subtly wrong at full speed.

## Quick Reference

| Category | When to Use |
| --- | --- |
| [Typography](typography.md) | Text wrapping, font smoothing, tabular numbers |
| [Surfaces](surfaces.md) | Border radius, optical alignment, shadows, image outlines, hit areas |
| [Animations](animations.md) | Interruptible animations, enter/exit transitions, icon animations, scale on press, motion restraint |
| [Icons](icons.md) | Icon stroke weight, states via `currentColor`, outline vs fill, sizing, RTL flipping |
View the complete source on GitHub

Skills included

  • make-interfaces-feel-better

Repository facts

License
MIT
Created
Mar 13, 2026
Last pushed
Aug 29, 2026
Forks
167
Open issues
0
Project activity
Slowing

Rank over the last 12 weeks

Now #320 · best #274 · down 26 in 30 days

  1. #309 on Oct 29
  2. #311 on Oct 30
  3. #317 on Oct 31
  4. #316 from Nov 1 to Nov 2
  5. #319 on Nov 3
  6. #320 since Nov 4
74 earlier periods
  1. #292 on Aug 2
  2. #285 on Aug 7
  3. #287 on Aug 8
  4. #284 on Aug 9
  5. #292 on Aug 10
  6. #287 on Aug 11
  7. #288 on Aug 12
  8. #293 on Aug 13
  9. #291 on Aug 14
  10. #290 on Aug 15
  11. #295 on Aug 16
  12. #290 on Aug 17
  13. #297 on Aug 18
  14. #296 on Aug 19
  15. #294 from Aug 20 to Aug 21
  16. #290 on Aug 22
  17. #296 on Aug 23
  18. #298 on Aug 24
  19. #299 on Aug 25
  20. #298 on Aug 26
  21. #295 on Aug 27
  22. #296 from Aug 28 to Aug 29
  23. #290 on Aug 30
  24. #297 on Aug 31
  25. #302 on Sep 1
  26. #299 on Sep 2
  27. #293 on Sep 3
  28. #278 on Sep 4
  29. #277 on Sep 5
  30. #274 on Sep 6
  31. #280 on Sep 7
  32. #279 from Sep 8 to Sep 9
  33. #278 on Sep 10
  34. #274 on Sep 11
  35. #279 from Sep 12 to Sep 13
  36. #283 on Sep 14
  37. #284 on Sep 15
  38. #282 on Sep 16
  39. #279 on Sep 17
  40. #283 on Sep 18
  41. #278 on Sep 19
  42. #283 on Sep 20
  43. #284 on Sep 21
  44. #287 on Sep 22
  45. #288 on Sep 23
  46. #287 on Sep 24
  47. #284 on Sep 25
  48. #282 on Sep 26
  49. #288 on Sep 27
  50. #293 from Sep 28 to Sep 29
  51. #291 on Sep 30
  52. #289 on Oct 1
  53. #293 on Oct 2
  54. #286 on Oct 3
  55. #284 on Oct 4
  56. #292 on Oct 5
  57. #291 on Oct 6
  58. #294 on Oct 7
  59. #293 on Oct 8
  60. #296 on Oct 9
  61. #291 on Oct 10
  62. #299 on Oct 12
  63. #297 on Oct 13
  64. #298 on Oct 14
  65. #299 on Oct 15
  66. #300 from Oct 16 to Oct 18
  67. #299 on Oct 19
  68. #300 on Oct 20
  69. #304 on Oct 21
  70. #302 on Oct 22
  71. #299 on Oct 23
  72. #301 on Oct 24
  73. #306 on Oct 25
  74. #307 on Oct 28

Before you install

Instructions only

Automated signals, not a guarantee

Checked Nov 2, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 1 note
  • skills/make-interfaces-feel-better/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • No broad tool permissions
  • No dangerous shell commands
  • No network access
  • No hidden or obfuscated text
  • No instruction overrides
  • No executable scripts
  • No access to secrets
  • No requests to vote in Hot

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

No combined signals at this commit.

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeNativePath CLAUDE.md.claude/skills/<skill-name>/
CodexNativeManifest AGENTS.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md skills/make-interfaces-feel-better/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md skills/make-interfaces-feel-better/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md skills/make-interfaces-feel-better/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md skills/make-interfaces-feel-better/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

mattpocock/skills

Skills for Real Engineers. Straight from my .agents directory.

316kGitHub stars

obra/superpowers

An agentic skills framework & software development methodology that works.

313.3kGitHub stars

NousResearch/hermes-agent

The agent that grows with you

261kGitHub stars

multica-ai/andrej-karpathy-skills

Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions,…

230kGitHub stars

anthropics/skills

Public repository for Agent Skills

187.9kGitHub stars

DietrichGebert/ponytail

Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.

185.5kGitHub stars

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

jakubkrehel/make-interfaces-feel-better: #320 on hotskills, 3.9k stars

[![jakubkrehel/make-interfaces-feel-better on hotskills](https://hotskills.dev/badge/jakubkrehel-make-interfaces-feel-better.svg)](https://hotskills.dev/skill/jakubkrehel-make-interfaces-feel-better/)