Детали, от которых интерфейс приятнее

Установка

npx skillfoxx add skills/make-interfaces-feel-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a claude-code -y

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-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a cursor -y

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-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a github-copilot -y

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-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a codex -y

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-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a gemini-cli -y

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-better

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-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a cline -y

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-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a roo -y

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-better

npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better -a opencode -y

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-better

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-better

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-better

npx skills add jakubkrehel/make-interfaces-feel-better

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту набор принципов инженерии интерфейса, которые складываются в ощущение отполированного продукта. Он охватывает концентрические скругления, оптическое выравнивание вместо геометрического, тени для глубины и границы для структуры, прерываемые анимации, ступенчатое появление и мягкий уход элементов, анимацию иконок через прозрачность, масштаб и размытие, табличные цифры, перенос строк, области нажатия не меньше 44 на 44 пикселя и правила для иконок через currentColor. Перед правкой агент определяет, какая система стилей уже в проекте, и выражает изменение именно в ней, не подмешивая вторую. Есть два режима: быстрый по основному пути и полный по всей области, с отчетом по серьезности находок, местам в коде и вариантами до и после.

Для кого. Для фронтенд-разработчиков и дизайнеров, которые доводят интерфейс до состояния, когда он ощущается аккуратным.

Пример запроса к агенту

Посмотри этот компонент и подскажи, из-за каких мелких деталей он ощущается неаккуратным

Ограничения

Скилл дает принципы и правила, а не готовую библиотеку компонентов, и опирается на веб-стек: CSS, Tailwind, а для части приемов анимации motion или framer-motion. Он не устанавливает зависимости и не проектирует систему целиком, а работает в той системе стилей, что уже есть в проекте.

Как отключить. Удалите папку make-interfaces-feel-better из каталога скиллов агента, например из ~/.claude/skills.

Проверка безопасности

• Скилл состоит из принципов и правил, ничего не выполняет и не устанавливает сам

Коротко о README

README представляет скилл о мелких деталях, из которых складывается приятный интерфейс, со ссылкой на статью автора. Скилл покрывает анимации, типографику, иконки, состояния при наведении, оптическое выравнивание, концентрические скругления, тени и области нажатия. Установка идет одной командой через npx skills. Сам SKILL.md перечисляет принципы с конкретными значениями и вспомогательные файлы по темам: типографика, поверхности, анимации, иконки и производительность. Отдельно описан формат отчета ревью с режимами быстрый и полный, оценкой серьезности находок и таблицей до и после.

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.

Похожие