jakubkrehel / make-interfaces-feel-better
★ 2,200A skill package that teaches your agent 1 capability — every one documented and browsable below, no GitHub required · by jakubkrehel.
Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.
Make Interfaces Feel Better
An Agent Skill based on the article Details that make interfaces feel better.
This skill teaches AI coding assistants (Claude Code, Codex, etc.) the small design engineering details that compound into a great interface.
What it covers
- Text wrapping (
text-wrap: balance/pretty) - Concentric border radius for nested elements
- Contextual icon animations with opacity, scale, and blur
- Font smoothing on macOS
- Tabular numbers for dynamic values
- Interruptible animations (CSS transitions vs keyframes)
- Enter animations with split and stagger
- Subtle exit animations
- Optical vs geometric alignment
- Shadows instead of borders
- Image outlines for depth
Installation
npx skills add jakubkrehel/make-interfaces-feel-betterUsage
Once installed, Claude will automatically apply these principles when building UI components, reviewing frontend code, or implementing animations.
You can also invoke it manually:
/make-interfaces-feel-betterLicense
MIT
Install the whole package (1 skills):
npx skills add https://github.com/jakubkrehel/make-interfaces-feel-betterOr install a single skill:
npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill <name>Pick the skill name from the Skills tab — each entry there installs independently.