New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Make Interfaces Feel Better

by affaan-m in affaan-m/ECC

Apply concrete design-engineering details that make interfaces feel polished.

MITAuto-check passedFrontend & Design

Install Make Interfaces Feel Better

skills CLI
$ npx skills add affaan-m/ECC --skill make-interfaces-feel-better -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install affaan-m/ECC make-interfaces-feel-better --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/make-interfaces-feel-better .claude/skills/make-interfaces-feel-better && rm -rf skills-src

Use ~/.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/

Facts

Skill name
make-interfaces-feel-better
GitHub stars
276k
Used in
1 other repo
Token cost
~1.2k tokens
SKILL.md length
555 words
Files
1
Skills in repo
683
Repo updated
First seen
Licence
MIT

At a glance

Apply concrete design-engineering details that make interfaces feel polished.

  • Improving UI spacing
  • SKILL.md covers When to Use, Core Principles, Review Output and Checklist
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Interaction states

What it does

Make Interfaces Feel Better is an agent skill from affaan-m/ECC. Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Typography. The repository describes itself as: The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond. The licence is MIT.

When your agent uses it

  • Improving UI spacing
  • Interaction states

Example prompts

  • “/make-interfaces-feel-better”

What it can do on your machine

Read from SKILL.md and the folder at commit 4eb71d9. 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 (its code samples are css).

    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.2k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 555 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~61
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

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 affaan-m/ECC at commit 4eb71d9, republished under its MIT licence (© affaan-m). 555 words, ~1,199 tokens.

Download SKILL.mdSave it as .claude/skills/make-interfaces-feel-better/SKILL.md (or your agent's skills folder).
name
make-interfaces-feel-better
description
Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
metadata.origin
community

Make Interfaces Feel Better

Use this skill for the small design-engineering details that compound into a more polished interface.

Source: salvaged from stale community PR #1659 by linus707.

When to Use

  • The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
  • You are building controls, cards, lists, dashboards, navigation, forms, or toolbars.
  • A component needs hover, active, focus, enter, exit, loading, or empty states.
  • A frontend review needs specific before/after recommendations.

Core Principles

Concentric Radius

For nearby nested rounded surfaces:

text
outer radius = inner radius + padding

If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship.

Optical Alignment

Geometric centering is not always visual centering. Icon buttons, play triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the SVG when possible; otherwise adjust with a pixel-level margin or padding change.

Shadows And Borders

Use borders for separation and focus rings. Use layered shadows when a card, button, dropdown, or popover needs depth. Shadows should be transparent and subtle enough to work across backgrounds.

Text Wrapping
  • Use text-wrap: balance on headings and short titles.
  • Use text-wrap: pretty on short-to-medium body text, captions, descriptions, and list items.
  • Avoid both on long prose, code, and preformatted content.
  • Use font-variant-numeric: tabular-nums for counters, timers, prices, tables, and other updating numbers.
Font Smoothing

On macOS, apply antialiased font smoothing at the root layout when the project does not already do so:

css
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
Image Outlines

Images often need a subtle inset outline so their edges do not blur into the surface.

css
img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Use neutral black or white alpha outlines. Do not tint image outlines with the brand palette.

Motion

Use CSS transitions for interactive state changes because they can retarget when the user changes intent mid-motion. Reserve keyframes for staged one-shot entrances or loading sequences.

Good motion defaults:

  • Enter: combine opacity, small translateY, and optionally blur.
  • Exit: shorter and quieter than enter, usually 150ms.
  • Press: scale(0.96) for tactile buttons, with a way to disable it when the movement distracts.
  • Icon swaps: cross-fade with opacity, scale, and blur instead of instant visibility toggles.
Show full SKILL.md (209 more words)Show less
Transition Scope

Never use transition: all. Specify the changed properties:

css
.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Use will-change only for first-frame stutter on compositor-friendly properties such as transform, opacity, and filter. Never use will-change: all.

Hit Areas

Interactive controls should have at least a 40x40px hit area, ideally 44x44px where the layout allows it. Expand with a pseudo-element when the visible icon is smaller, but do not let expanded hit areas overlap.

Review Output

When reviewing a UI polish pass, report concrete changes in before/after rows:

PrincipleBeforeAfter
Concentric radiusSame radius on parent and childParent radius accounts for padding
Tabular numbersCounter shifts as digits changeCounter uses tabular-nums
Transition scopetransition: allExplicit transition properties

Include file paths and properties when they are not obvious from the snippets. Omit principles that you checked but did not change.

Checklist

  • Nested rounded elements are optically coherent.
  • Icons are visually centered.
  • Buttons, cards, and popovers use borders or shadows for the right reason.
  • Headings and short text avoid awkward wrapping.
  • Dynamic numbers use tabular numerals.
  • Images have neutral outlines where needed.
  • Enter and exit animations are split, subtle, and interruptible where appropriate.
  • Buttons have tactile active states without exaggerated motion.
  • transition: all and will-change: all are absent.
  • Small controls still have usable hit areas.

© affaan-m, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/make-interfaces-feel-better of affaan-m/ECC.

Open the folder on GitHubat commit 4eb71d9

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in affaan-m/ECC, which our catalogue first saw on October 7, 2026.

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.

Make Interfaces Feel Better compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Make Interfaces Feel Better this skillaffaan-m/ECC276k1 repos~1.2kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • 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…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • 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.

    9.6k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from affaan-m/ECC

All 683 skills in this repo

  • Skill Stocktake

    affaan-m/ECC

    Audits your installed Claude skills and commands for quality, with a quick mode for recently changed skills and a full mode that evaluates all of them through subagents.

    276k GitHub starsUsed in 5 repos~3.1k tokens
    Auto-check passed

  • VideoDB Video Search and Editing

    affaan-m/ECC

    Ingests, indexes, searches, edits and monitors video, audio and live streams through the VideoDB Python SDK, returning stream links, clips and timestamps.

    276k GitHub starsUsed in 3 repos~3.5k tokens
    Auto-check: notes

  • Docs Governance

    affaan-m/ECC

    Route broad documentation-governance requests to existing ECC skills and run an opt-in, read-only audit of mapped documentation roles, links, ADR indexes, and evidence references.

    276k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Rules Distillation

    affaan-m/ECC

    Scans installed skills for principles that recur across them and proposes rule-file changes: append, revise, add a section, create a file or leave as covered.

    276k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed

  • Master Agreement Generator

    affaan-m/ECC

    Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.

    276k GitHub stars~2.9k tokensUpdated yesterday
    Auto-check passed

  • Skill Compliance Checker

    affaan-m/ECC

    Measures whether agents actually follow a skill, rule or agent definition by generating scenarios at three strictness levels and scoring tool-call traces.

    276k GitHub starsUsed in 1 repo~623 tokens
    Auto-check passed

Categories

Questions about Make Interfaces Feel Better

What does Make Interfaces Feel Better do?

Apply concrete design-engineering details that make interfaces feel polished. Make Interfaces Feel Better is an agent skill from affaan-m/ECC. Apply concrete design-engineering details that make interfaces feel polished.

When should I use Make Interfaces Feel Better?

Make Interfaces Feel Better fits situations like: improving UI spacing; interaction states.

How do I install Make Interfaces Feel Better in Claude Code?

Run `npx skills add affaan-m/ECC --skill make-interfaces-feel-better -a claude-code`. Or copy the skill folder (skills/make-interfaces-feel-better in affaan-m/ECC) 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 affaan-m/ECC --skill make-interfaces-feel-better -a codex`. Or copy the skill folder (skills/make-interfaces-feel-better in affaan-m/ECC) 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 affaan-m/ECC --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.2k tokens (SKILL.md is roughly 4.8k 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: Impeccable (bestofjs/bestofjs, 3.1k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Design System (Ohh-889/skyroc, 795 stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k 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?

affaan-m (a GitHub user) maintains it in affaan-m/ECC, which has 276,111 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 10, 2026.

Source: affaan-m/ECC on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.