Make Interfaces Feel Better
Details that make interfaces feel better — 小さなデザインエンジニアリング判断の Agent Skill
Make Interfaces Feel Better は、Details that make interfaces feel better をもとにした Agent Skill。UI コンポーネント実装、フロントエンドレビュー、アニメーション調整のとき、エージェントが「それっぽいが少しズレている」箇所を具体的な CSS / Tailwind パターンで直せるようにする。
単一の巨大ルールブックではなく、SKILL.md が入口で、タイポグラフィ・サーフェス・アニメーション・パフォーマンスの 4 参照ファイルに詳細が分割されている。
配布は npx skills add が中心。インストール後は UI 作業時に自動適用され、手動ではスラッシュコマンドでも呼べる。
npx skills add jakubkrehel/make-interfaces-feel-better
/make-interfaces-feel-betterトリガー例: UI polish、design details、「make it feel better」、「feels off」、stagger animations、border radius、optical alignment、tabular numbers、image outlines、box shadows など。
| ファイル | 扱う領域 | 主なトピック |
|---|---|---|
SKILL.md | 入口・原則一覧 | 16 原則、Common Mistakes、Review Checklist、出力形式 |
typography.md | 文字組み | text-wrap: balance/pretty、font smoothing、tabular-nums |
surfaces.md | 面・深度 | 同心 border-radius、光学配置、shadow-as-border、image outline、hit area |
animations.md | 動き | interruptible transition、stagger enter、exit、icon cross-fade、scale on press |
performance.md | GPU / transition | transition: all 禁止、will-change の使い分け |
1. 同心 border-radius
外半径 = 内半径 + padding。ネストした角丸の不一致は「なんか変」の典型。
2. 光学配置
幾何中心ではなく見た目の中心。アイコン付きボタンや再生三角は手動調整。
3. 影で深度
カードやボタンの縁は透明な box-shadow レイヤー。区切り線は border のまま。
4. 割り込み可能な animation
hover / toggle は CSS transition。keyframes は一度きりの enter 向け。
5. Split & stagger enter
大きな 1 コンテナではなく意味単位に分け、約 100ms ずつ遅延。
6. 控えめな exit
固定 translateY(-12px) 程度。enter より短く、視線を奪わない。
7. 文脈アイコン animation
scale 0.25→1、opacity、blur 4px→0。spring の bounce は常に 0。
8–10. タイポ 3 点
macOS で antialiased、動的数値に tabular-nums、見出しは balance / 本文は pretty。
11. 画像 outline
ライト rgba(0,0,0,0.1)、ダーク rgba(255,255,255,0.1) のみ。slate/zinc 系禁止。
12. Press scale
常に scale(0.96)。0.95 未満は大げさ。static で無効化可。
13. 初回 load で animate しない
AnimatePresence initial={false} — ただし意図的 hero enter は例外。
14–15. Performance
transition: all 禁止。プロパティを列挙。will-change は stutter 確認後のみ。
16. Hit area
最小 40×40px。見た目が小さければ疑似要素で拡張。重なりは避ける。
| シナリオ | 指定 | 理由 |
|---|---|---|
| 見出し・短いタイトル | text-wrap: balance | 行長を均等化（6 行以下が対象） |
| 段落・UI テキスト | text-wrap: pretty | 末尾の orphan を避ける（長さ制限なし） |
| 長文・コード | デフォルト | balance は長文で無視される |
Font smoothing & tabular numbers
macOS では html { -webkit-font-smoothing: antialiased; } を root に 1 回。カウンタ・価格・タイマーなど更新される数字は font-variant-numeric: tabular-nums（Tailwind: tabular-nums）で桁幅を固定し、layout shift を防ぐ。
カードやボタンの「縁」には、3 層の透明 shadow 変数（1px ring + lift + ambient）を使う。ダークモードでは白 1px ring に簡略化。リスト区切りやフォーム outline は border を維持する。
| 影を使う | border を使う |
|---|---|
| カード、ドロップダウン、浮き上がるボタン | リスト区切り、テーブル罫線、入力 outline |
| 背景色が混在する UI | レイアウト上の separator |
画像は outline + outline-offset: -1px で layout に影響させず縁取り。色は pure black / pure white の 10% opacity のみ。
| CSS transition | CSS keyframes | |
|---|---|---|
| 割り込み | 可 — 最新 state へ再補間 | 不可 — 先頭からやり直し |
| 用途 | hover、toggle、drawer | 初回 enter、loading シーケンス |
Icon cross-fade（Motion なし）
package.json に motion / framer-motion が無い場合、両アイコンを DOM に残し absolute で重ね、cubic-bezier(0.2, 0, 0, 1) で opacity / scale / blur を cross-fade する。値は scale 0.25、blur 4px を厳守。
Enter / exit のタイミング
- Enter: 意味块ごとに opacity + translateY(12px) + blur(4px)、stagger ~100ms
- Exit: translateY(-12px) 程度、150ms 前後 — enter より短く
- Press:
active:scale-[0.96]+transition-transform
transition: all および Tailwind の bare transition は禁止。変化するプロパティだけ列挙する（例: transition-[scale,opacity,filter]）。
| プロパティ | GPU 合成 | will-change |
|---|---|---|
transform, opacity, filter | Yes | 初回 stutter が見えたときのみ |
width, background-color | No | 効果薄 — 付けない |
will-change: all は禁止。レイヤー増加でメモリコストが上がるため、先回りで全要素に付けない。
変更提案は必ず Markdown 表形式。Before / After 列を持ち、原則ごとに見出しを付けてグループ化する。変更が無い原則は表ごと省略する。
| Before | After |
|---|---|
rounded-xl on card + inner button (p-2) | card rounded-2xl (12+8), inner rounded-lg |
<span>{count}</span> | className="tabular-nums" on counter |
scale(0.9) on press | scale(0.96) — 0.95 未満は大げさ |
Review Checklist（14 項目）は SKILL.md 末尾。ネスト角丸、光学配置、shadow、stagger enter、tabular-nums、hit area などを機械的に確認する。