スキル

make-interfaces-feel-better:細部チェックリストと照合してから手触りを直す

エージェントにインターフェースの手触りを磨かせたい人向け。公式 npx で入れたあと、まず読み取り専用で照合し、モーション、ホバー、ヒット領域の問題を確認してからコードを変える。

公式ソース · make-interfaces-feel-better

インストール

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

誰向けか

この案内は、インターフェースはもう使えるのに「あと少し手触りが足りない」と感じ、細部に集中したスキルでエージェントに照合させたい人向け。公式は、インターフェースをより使いやすくする細部への注目として書いている。リポジトリは

https://github.com/jakubkrehel/make-interfaces-feel-better

スキル本文は

https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md

材料はアニメーション、フォント組版、アイコン、ホバー状態、光学揃え、同心の角丸、影、ヒット領域などを覆うと書く。プレビューできるインターフェースがあり、これらの点だけ磨きたいときに合う。インターフェースがなく、エージェントに視覚システム一式をゼロから作らせたい人には合わない。現材料は必須クライアントを名指ししない。特定製品だけが入れられると推測しない。

リポジトリは MIT ライセンスで公開。説明は

https://github.com/jakubkrehel/make-interfaces-feel-better#MIT-1-ov-file

3分で最初の試行を終える

公式推奨の経路はこの1本だけ。

前提:このマシンで npx が動き、ワークスペースに開けるインターフェースコードまたはプレビューがある。実行前に、今のプロジェクトがスキルを書き込む場所か確認する。

インストール場所は npx skills add が扱う。材料は対象フォルダを書いていない。出ていないパスを足さない。スキルファイルの公式位置は上の SKILL.md。

コピーして実行:

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

成功の合図:コマンドが正常終了し、エージェントがアニメーション、ホバー状態、ヒット領域などの項目を引用できる。まず読み取り専用で照合する。既存ページを指定し、手触りの問題候補だけを挙げさせ、ファイル変更は明示的に禁じる。スキル内の分類で(「見た目が悪い」と曖昧に言わず)指摘できれば、載っている。

スタイル変更はリポジトリを動かす。直すファイルと範囲を確認する前に書き込みを許可しない。

利用事例

事例一:先にホバー状態とヒット領域を見る。スキルが覆う hover states と hit areas に対応。ボタンやリンクは押せるが、押しにくいか反応がないと感じるときに合う。まず問題リストだけ求める。成功時、意見はホバーと押せる範囲に落ち、ページ全体の作り直しではない。材料に最小ヒット領域サイズや具体的な CSS はない。

事例二:組版、光学揃え、同心の角丸を照合する。typography、optical alignment、concentric border radius に対応。レイアウトは決まっており、字間、揃え、角丸が同心かだけ直したいときに合う。現インターフェースの1枚またはコンポーネントを示し、この3項だけ評させる。成功時、提案がこれらの分類に合い、別のデザイン一式を始めない。材料に数値仕様はない。欠けている部分はここで止める。

利用上の境界

現材料が証明するのはこの npx インストールコマンドと上記テーマ集合だけ。他のスキル名、コマンド、デザイントoken を作らない。タイトルの「and more」は展開されていない。書いていないテーマを既存チェックリスト扱いしない。

材料は言語やフレームワークを定めていない。例から特定スタックだけと推測しない。アニメーション、影、角丸の変更は既存の見た目に影響し得る。先に照合してから直す。詳細は公式リポジトリに従う:

https://github.com/jakubkrehel/make-interfaces-feel-better