Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
Design engineering principles for making interfaces feel polished.
Install Make Interfaces Feel Better
$ npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install samuelclay/NewsBlur make-interfaces-feel-better --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/samuelclay/NewsBlur.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/make-interfaces-feel-better .claude/skills/make-interfaces-feel-better && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "make-interfaces-feel-better" agent skill from https://github.com/samuelclay/NewsBlur/tree/main/.claude/skills/make-interfaces-feel-better into .claude/skills/make-interfaces-feel-better/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-interfaces-feel-better", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/samuelclay/NewsBlur/tree/main/.claude/skills/make-interfaces-feel-betterType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install samuelclay/NewsBlur make-interfaces-feel-better --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/samuelclay/NewsBlur.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/make-interfaces-feel-better .agents/skills/make-interfaces-feel-better && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "make-interfaces-feel-better" agent skill from https://github.com/samuelclay/NewsBlur/tree/main/.claude/skills/make-interfaces-feel-better into .agents/skills/make-interfaces-feel-better/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-interfaces-feel-better", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install samuelclay/NewsBlur make-interfaces-feel-better --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/samuelclay/NewsBlur.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/make-interfaces-feel-better .cursor/skills/make-interfaces-feel-better && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "make-interfaces-feel-better" agent skill from https://github.com/samuelclay/NewsBlur/tree/main/.claude/skills/make-interfaces-feel-better into .cursor/skills/make-interfaces-feel-better/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-interfaces-feel-better", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/samuelclay/NewsBlur.git --path .claude/skills/make-interfaces-feel-better--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install samuelclay/NewsBlur make-interfaces-feel-better --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/samuelclay/NewsBlur.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/make-interfaces-feel-better .gemini/skills/make-interfaces-feel-better && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "make-interfaces-feel-better" agent skill from https://github.com/samuelclay/NewsBlur/tree/main/.claude/skills/make-interfaces-feel-better into .gemini/skills/make-interfaces-feel-better/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-interfaces-feel-better", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install samuelclay/NewsBlur make-interfaces-feel-betterInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/samuelclay/NewsBlur.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/make-interfaces-feel-better .github/skills/make-interfaces-feel-better && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "make-interfaces-feel-better" agent skill from https://github.com/samuelclay/NewsBlur/tree/main/.claude/skills/make-interfaces-feel-better into .github/skills/make-interfaces-feel-better/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-interfaces-feel-better", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install samuelclay/NewsBlur make-interfaces-feel-better --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/samuelclay/NewsBlur.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/make-interfaces-feel-better .opencode/skills/make-interfaces-feel-better && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "make-interfaces-feel-better" agent skill from https://github.com/samuelclay/NewsBlur/tree/main/.claude/skills/make-interfaces-feel-better into .opencode/skills/make-interfaces-feel-better/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "make-interfaces-feel-better", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
make-interfaces-feel-better- GitHub stars
- 7.6k
- Used in
- 10 other repos
- Token cost
- ~1.5k tokens
- SKILL.md length
- 704 words
- Files
- 5
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design engineering principles for making interfaces feel polished.
- Works in 12 steps: Concentric Border Radius → Optical Over Geometric Alignment → Shadows Over Borders → …
- Building UI components
- SKILL.md covers Quick Reference, Core Principles, Common Mistakes and Review Checklist, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Make Interfaces Feel Better is an agent skill from samuelclay/NewsBlur. Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. 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.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `animations.md`, `performance.md` and `surfaces.md`).
It sits in Frontend & Design, covering Web animation and motion, Typography and UI design. The repository describes itself as: NewsBlur is a personal news reader that brings people together to talk about the world. A new sound of an old instrument. The licence is MIT.
When your agent uses it
- Building UI components
- Reviewing frontend code
- Implementing animations
- Micro-interactions
Example prompts
- “make it feel better”
- “feels off”
- “/make-interfaces-feel-better”
Workflow steps
12 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit c51f6da. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Make Interfaces Feel Better loads about 1.5k tokens when it runs. Until then it costs about 121 tokens; SKILL.md has 704 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from samuelclay/NewsBlur at commit c51f6da, republished under its MIT licence (© samuelclay). 704 words, ~1,528 tokens.
Download SKILL.mdSave it as
.claude/skills/make-interfaces-feel-better/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- 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, micro-interactions, enter/exit animations, or any visual detail work. 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.
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.
Quick Reference
| Category | When to Use |
|---|---|
| Typography | Text wrapping, font smoothing, tabular numbers |
| Surfaces | Border radius, optical alignment, shadows, image outlines, hit areas |
| Animations | Interruptible animations, enter/exit transitions, icon animations, scale on press |
| Performance | Transition specificity, will-change usage |
Core Principles
1. Concentric Border Radius
Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off.
2. Optical Over Geometric Alignment
When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment.
3. Shadows Over Borders
Layer multiple transparent box-shadow values for natural depth. Shadows adapt to any background; solid borders don't.
4. Interruptible Animations
Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once.
5. Split and Stagger Enter Animations
Don't animate a single container. Break content into semantic chunks and stagger each with ~100ms delay.
6. Subtle Exit Animations
Use a small fixed translateY instead of full height. Exits should be softer than enters.
7. Contextual Icon Animations
Animate icons with opacity, scale, and blur instead of toggling visibility. Use exactly these values: scale from 0.25 to 1, opacity from 0 to 1, blur from 4px to 0px. If the project has motion or framer-motion in package.json, use transition: { type: "spring", duration: 0.3, bounce: 0 } — bounce must always be 0. If no motion library is installed, keep both icons in the DOM (one absolute-positioned) and cross-fade with CSS transitions using cubic-bezier(0.2, 0, 0, 1) — this gives both enter and exit animations without any dependency.
8. Font Smoothing
Apply -webkit-font-smoothing: antialiased to the root layout on macOS for crisper text.
9. Tabular Numbers
Use font-variant-numeric: tabular-nums for any dynamically updating numbers to prevent layout shift.
10. Text Wrapping
Use text-wrap: balance on headings. Use text-wrap: pretty for body text to avoid orphans.
11. Image Outlines
Add a subtle 1px outline with low opacity to images for consistent depth.
12. Scale on Press
A subtle scale(0.96) on click gives buttons tactile feedback. Always use 0.96. Never use a value smaller than 0.95 — anything below feels exaggerated. Add a static prop to disable it when motion would be distracting.
13. Skip Animation on Page Load
Use initial={false} on AnimatePresence to prevent enter animations on first render. Verify it doesn't break intentional entrance animations.
Show full SKILL.md (280 more words)Show less
14. Never Use transition: all
Always specify exact properties: transition-property: scale, opacity. Tailwind's transition-transform covers transform, translate, scale, rotate.
15. Use will-change Sparingly
Only for transform, opacity, filter — properties the GPU can composite. Never use will-change: all. Only add when you notice first-frame stutter.
16. Minimum Hit Area
Interactive elements need at least 40×40px hit area. Extend with a pseudo-element if the visible element is smaller. Never let hit areas of two elements overlap.
Common Mistakes
| Mistake | Fix |
|---|---|
| Same border radius on parent and child | Calculate outerRadius = innerRadius + padding |
| Icons look off-center | Adjust optically with padding or fix SVG directly |
| Hard borders between sections | Use layered box-shadow with transparency |
| Jarring enter/exit animations | Split, stagger, and keep exits subtle |
| Numbers cause layout shift | Apply tabular-nums |
| Heavy text on macOS | Apply antialiased to root |
| Animation plays on page load | Add initial={false} to AnimatePresence |
transition: all on elements | Specify exact properties |
| First-frame animation stutter | Add will-change: transform (sparingly) |
| Tiny hit areas on small controls | Extend with pseudo-element to 40×40px |
Review Checklist
- Nested rounded elements use concentric border radius
- Icons are optically centered, not just geometrically
- Shadows used instead of borders where appropriate
- Enter animations are split and staggered
- Exit animations are subtle
- Dynamic numbers use tabular-nums
- Font smoothing is applied
- Headings use text-wrap: balance
- Images have subtle outlines
- Buttons use scale on press where appropriate
- AnimatePresence uses
initial={false}for default-state elements - No
transition: all— only specific properties -
will-changeonly on transform/opacity/filter, neverall - Interactive elements have at least 40×40px hit area
Reference Files
- typography.md — Text wrapping, font smoothing, tabular numbers
- surfaces.md — Border radius, optical alignment, shadows, image outlines
- animations.md — Interruptible animations, enter/exit transitions, icon animations, scale on press
- performance.md — Transition specificity,
will-changeusage
© samuelclay, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files in .claude/skills/make-interfaces-feel-better of samuelclay/NewsBlur.
- SKILL.md
- animations.md
- performance.md
- surfaces.md
- typography.md
Open the folder on GitHubat commit c51f6da
Used in 10 other repositories
We found 12 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 10 other GitHub owners. This page covers the copy in samuelclay/NewsBlur, which our catalogue first saw on October 7, 2026.
- kortix-ai/sunaapps/web/.agents/skills/make-interfaces-feel-better
- nperez0111/bookhive.agents/skills/make-interfaces-feel-better
- VladSez/easy-invoice-pdf.agents/skills/make-interfaces-feel-better
- simstudioai/sim.agents/skills/make-interfaces-feel-better
- julianromli/ai-skillsskills/make-interfaces-feel-better
- vvedantb/eva.agents/skills/make-interfaces-feel-better.claude/skills/make-interfaces-feel-better
- poteto/noodle.agents/skills/make-interfaces-feel-better
- try-works/role-model.agents/skills/make-interfaces-feel-better
- theexperiencecompany/gaia.agents/skills/make-interfaces-feel-better.claude/skills/make-interfaces-feel-better
- LucasBassetti/godui.agents/skills/make-interfaces-feel-better
Compare with similar skills
Make Interfaces Feel Better next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Make Interfaces Feel Better this skillsamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| Baseline UIibelick/ui-skills | 9.5k | 8 repos | ~855 | Automated safety check: Pass | MIT | |
| Apple Liquid Glass Designnaplesblue/apple-design-skill | 267 | — | ~2.3k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxOhh-889/skyroc | 795 | 6 repos | ~14k | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxsaoudi-h/solar-icons | 184 | 18 repos | ~11k | Automated safety check: Notes | Custom licence |
Similar skills
Apple Liquid Glass Design
naplesblue/apple-design-skill
Sets design rules for web interfaces that should feel like current Apple design: unified surfaces, restrained type and glass only where layers overlap.
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence for web, mobile, and desktop. An agent skill from Ohh-889/skyroc.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
- Official
Frontend Design
anthropics/skills
Pushes the agent toward distinctive visual design for new or reworked UI: a clear aesthetic direction, deliberate typography and choices rooted in the subject.
More from samuelclay/NewsBlur
Commit PR
samuelclay/NewsBlur
A skill your agent uses when the user runs /commit-pr, says "commit and push", "open a PR", "ship this", asks to update an existing PR with new changes, or asks to resolve PR review comments in the…
Newsblur CLI
samuelclay/NewsBlur
Manage your NewsBlur from the terminal. An agent skill from samuelclay/NewsBlur.
Investigate Forum
samuelclay/NewsBlur
Triage the NewsBlur support forum (forum.newsblur.com). An agent skill from samuelclay/NewsBlur.
Blog Post
samuelclay/NewsBlur
Write a blog post for a new feature based on the current branch changes
Related
Categories
Questions about Make Interfaces Feel Better
What does Make Interfaces Feel Better do?
Design engineering principles for making interfaces feel polished. Make Interfaces Feel Better is an agent skill from samuelclay/NewsBlur. Design engineering principles for making interfaces feel polished.
When should I use Make Interfaces Feel Better?
Make Interfaces Feel Better fits situations like: building UI components; reviewing frontend code; implementing animations; micro-interactions.
How do I install Make Interfaces Feel Better in Claude Code?
Run `npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a claude-code`. Or copy the skill folder (.claude/skills/make-interfaces-feel-better in samuelclay/NewsBlur) into .claude/skills/make-interfaces-feel-better in your project. Claude Code loads it when a task matches its description.
How do I install Make Interfaces Feel Better in Codex?
Run `npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a codex`. Or copy the skill folder (.claude/skills/make-interfaces-feel-better in samuelclay/NewsBlur) into .agents/skills/make-interfaces-feel-better in your project. Codex loads it when a task matches its description.
Can I use Make Interfaces Feel Better in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add samuelclay/NewsBlur --skill make-interfaces-feel-better -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/make-interfaces-feel-better, .gemini/skills/make-interfaces-feel-better, .github/skills/make-interfaces-feel-better and .opencode/skills/make-interfaces-feel-better in your project.
What does Make Interfaces Feel Better need to run?
SKILL.md names no scripts, command-line tools or credentials: Make Interfaces Feel Better is instructions for the agent only.
Does Make Interfaces Feel Better access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Make Interfaces Feel Better safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Make Interfaces Feel Better use?
Make Interfaces Feel Better is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Make Interfaces Feel Better use?
About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Make Interfaces Feel Better?
Skills that share tags, products or a category with Make Interfaces Feel Better: Baseline UI (ibelick/ui-skills, 9.5k stars), Apple Liquid Glass Design (naplesblue/apple-design-skill, 267 stars), UI UX Pro Max (Ohh-889/skyroc, 795 stars) and Impeccable (bestofjs/bestofjs, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Make Interfaces Feel Better?
samuelclay (a GitHub user) maintains it in samuelclay/NewsBlur, which has 7,645 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 7, 2026.
Source: samuelclay/NewsBlur on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.