🎨 Design

better-ui

Name: better-ui
Author: jakubkrehel

by jakubkrehel1 month ago4.8k

Design engineering principles for making interfaces feel polished. Use when building UI components, implementing animations or hover states, or doing any visual detail work. Triggers on UI polish, "feels off", stagger animations, enter animations, theme switch transitions, border radius, optical alignment, image outlines, box shadows, icons, icon stroke weight, motion restraint.

Install

npx skills add https://github.com/jakubkrehel/skills --skill better-ui

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/jakubkrehel--skills--skills--better-ui/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@jakubkrehel

"In a recent article, I wrote about using skills to encode judgement and understanding into agents. I put together a set of skills that each focus on a..."