Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skill is principles and rules; it executes and installs nothing on its own
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/make-interfaces-feel-betterDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .claude/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .claude/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .agents/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .agents/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .github/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .github/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .agents/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .agents/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .agents/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .agents/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .devin/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .devin/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .cline/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .cline/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .roo/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .roo/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 35545ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .agents/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .agents/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .agents/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .agents/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubkrehel/make-interfaces-feel-better.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/make-interfaces-feel-better/
git -C "$tmp" checkout 35545ea1512ad59fa463e6b1f95ca9c052981fe6
mkdir -p .agents/skills
cp -R "$tmp/skills/make-interfaces-feel-better" .agents/skills/make-interfaces-feel-betterCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skill: npx skills add jakubkrehel/make-interfaces-feel-better. Then ask for an interface review or polish.
Other ways from the author
npx skills add jakubkrehel/make-interfaces-feel-betterThe installer auto-detects the agent and its skills directory.
This is third-party code. Review the repository files before installing.
What it does
The skill gives an agent a set of interface engineering principles that add up to a polished feel. It covers concentric border radii, optical over geometric alignment, shadows for depth and borders for structure, interruptible animations, staggered entrances and soft exits, icon animation through opacity, scale and blur, tabular numbers, text wrapping, hit areas of at least 44 by 44 pixels and icon rules via currentColor. Before making a change the agent identifies the project's existing styling system and expresses the fix in it, without mixing in a second one. There are two modes: quick along the primary path and full across the whole scope, with a report by severity, code location and before and after variants.
Who it is for. For frontend developers and designers who polish an interface until it feels right.
Good fit when
- The interface works but feels off and you want to know why
- You need to clean up animations, radii, shadows and typography
- You need a component review of small details with findings and fixes
- You need consistent icons and icon states
Not a fit when
- You need logic or backend work rather than interface appearance
- You need a full redesign and architecture rather than detail polish
Example request
Review this component and tell me which small details make it feel offLimitations
The skill provides principles and rules, not a ready component library, and assumes a web stack: CSS, Tailwind, and for some animation techniques motion or framer-motion. It does not install dependencies or design a whole system; it works within the styling system the project already uses.
How to disable. Remove the make-interfaces-feel-better folder from the agent's skills directory, for example ~/.claude/skills.
Security check
- The skill is principles and rules; it executes and installs nothing on its own
README in short
The README presents a skill about the small details that make an interface feel good, with a link to the author's article. The skill covers animations, typography, icons, hover states, optical alignment, concentric radii, shadows and hit areas. Installation is a single npx skills command. The SKILL.md itself lists principles with concrete values and topic files: typography, surfaces, animations, icons and performance. It also documents the review report format with quick and full modes, severity ratings and a before and after table.
SKILL.md
--- name: make-interfaces-feel-better description: >- 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. --- # 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.
FAQ
Does the skill change code by itself?
It proposes fixes with code locations and before and after variants, expressed in the styling system the project already uses. Applying the changes is up to the agent and you.
Does it fit projects without an animation library?
Yes. If motion or framer-motion is not installed, the skill offers plain CSS variants via transitions and cross-fades.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys