# Ui Feel

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-sukirman1901-frontend-expert-ui-feel`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sukirman1901](https://agentstack.voostack.com/s/sukirman1901)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** https://github.com/sukirman1901/frontend-expert/tree/main/skills/ui-feel
- **Website:** https://github.com/sukirman1901/frontend-expert

## Install

```sh
agentstack add skill-sukirman1901-frontend-expert-ui-feel
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI Feel

## Overview

Great interfaces compound from small craft details. After tokens + structure + anti-slop, apply this skill so the UI doesn’t just look correct — it **feels** right.

Adapted from [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better) (MIT) for this pack.

## When to use

- Finishing `/ui` builds (after `anti-ai-slop`)
- `/polish` / “rapihin detail” / “feels off” / “make it feel better”
- Design audits that go beyond slop into craft
- Hover, press, enter/exit, icon swap micro-interactions

## When to skip

- Pure token/theme pick with no UI surface
- Backend-only or copy-only edits
- User asked for a one-line fix unrelated to feel

## Pack fit

| Skill | Job |
|-------|-----|
| `anti-ai-slop` | Kill generic AI aesthetic |
| **`ui-feel`** | Micro craft that compounds into polish |
| `motion` | Larger animation systems (Framer/GSAP timelines) |
| `accessibility` | Labels, keyboard, contrast (hit areas overlap here) |

**Conflict rules (this pack wins):**

- Prefer **subtle layered transparent shadows** — not heavy multi-layer card stacks (`anti-ai-slop`)
- Image outlines are **optional** (media cards / product shots), not mandatory on every ``
- Keep project fonts; only add smoothing / wrap / tabular-nums
- Icons stay **[Reicon](https://reicon.dev)** unless project already standardized another lib

## Core principles (quick)

1. **Concentric radius** — `outer = inner + padding`
2. **Optical > geometric** alignment for icons in controls
3. **Subtle shadows over hard borders** between sections (when depth is needed)
4. **Interruptible** — CSS transitions for hover/toggle; keyframes for one-shot only
5. **Split + stagger** enters (~100ms); soft exits (small `translateY`, not full height)
6. **Icon swaps** — opacity + scale `0.25→1` + blur `4px→0` (spring bounce `0` if Motion)
7. **Font smoothing** on root (`antialiased`)
8. **`tabular-nums`** for dynamic numbers
9. **`text-wrap: balance`** headings · **`pretty`** short body
10. **Scale on press** — exactly `0.96` (never below `0.95`); disable when distracting
11. **`initial={false}`** on `AnimatePresence` for default-state UI (skip load flash)
12. **Never `transition: all`** — name properties
13. **`will-change` sparingly** — only transform/opacity/filter when first-frame stutter
14. **Hit area** — 44×44 touch/mobile; ≥40×40 dense desktop; no overlapping hit targets
15. **Type ladder** — ≤2 families; one h1/page; h1→body via tokens; body ~60–75ch when long-form (see judgment Typography ladder)
16. **Mobile craft** — thumb-reachable primary actions; full-width CTAs ` | `active:scale-[0.96] transition-transform` |
```

## Checklist

- [ ] Nested radii are concentric
- [ ] Icons optically centered
- [ ] Depth via subtle transparent shadows where borders feel harsh
- [ ] Enter split/staggered; exits soft
- [ ] Dynamic numbers use `tabular-nums`
- [ ] Root font smoothing applied (or already present)
- [ ] Headings `text-balance`; short copy `text-pretty` where useful
- [ ] Press feedback `scale(0.96)` where appropriate
- [ ] No `transition: all` / Tailwind bare `transition`
- [ ] Hit areas meet 44/40 guidance without overlap
- [ ] Image outlines only where they help (pure black/white at 10% opacity)
- [ ] Typography ladder: one h1, sequential levels, token roles
- [ ] Mobile craft: full-width primary <768, safe-area, thumb-reachable CTAs

## Depth

Full examples: `references/ui-feel.md`.  
Related: `references/motion.md`, `references/anti-patterns.md`, `references/responsive.md`, `references/ux-foundations.md`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** [sukirman1901/frontend-expert](https://github.com/sukirman1901/frontend-expert)
- **License:** MIT
- **Homepage:** https://github.com/sukirman1901/frontend-expert

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sukirman1901-frontend-expert-ui-feel
- Seller: https://agentstack.voostack.com/s/sukirman1901
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.