mcpField
M
make-interfaces-better

make-interfaces-better

github.com/podoデザイン・UI29175 回インストール1 日前に更新
リポジトリ

make-interfaces-better について

make-interfaces-betterは、Jakub Krehelのデザインエンジニアリング原則を用いてUIを磨くスキルです。マイクロインタラクション、タイポグラフィ、視覚的階層、モーションのタイミング、余白の細部を扱います。

主な機能

  1. 01マイクロインタラクションとホバー状態の調整
  2. 02タイポグラフィと視覚的階層の改善
  3. 03モーションのタイミングとトランジションの調整
  4. 04余白やUIの細部の調整

活用シーン

  1. 01基本機能を実装したUIをさらに磨く
  2. 02トランジションと余白のリズムを整える

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill make-interfaces-better

インストール後、Claude Code で/make-interfaces-betterを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

make-interfaces-better

カタログ用スタブ — スキルの完全版:jakubkrehel/make-interfaces-feel-better

判断ツリー

  1. 完全版のスキルはすでにインストールされていますか? この場所にあるスキルに、まだ das: ブロックがあるか確認します:

    • グローバル:grep -q "^das:" ~/.agents/skills/make-interfaces-better/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • プロジェクト:grep -q "^das:" .agents/skills/make-interfaces-better/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • das: ブロックがない → 完全版のスキルがインストール済みです。呼び出して続行します
    • das: ブロックがある → 手順 2 に進みます
  2. スコープを検出してから、インストールします:

    スコープを検出するには:

    [ -e ~/.agents/skills/make-interfaces-better ] && echo "global" || echo "project"
    

    グローバル(-g を付けてインストール):

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

    プロジェクト(-g を付けずにインストール):

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

    Claude Code: 会話から離れずにコマンドを実行するには、どちらかのコマンドの先頭に ! を付けてチャットメッセージとして送信します。

インストール後の呼び出し

  • スキル名:make-interfaces-better
  • トリガーフレーズ:「make interfaces better」、「interface polish」、「micro-interactions」、「polished UI」

内容

Jakub Krehel のデザインエンジニアリングの原則を適用して、インターフェースを単に機能的なだけでなく、本当に洗練されたものに仕上げます。マイクロインタラクション、的確なタイポグラフィの選択、視覚的階層の調整、モーションのタイミング、そして巧みに作り込まれた UI とありきたりな出力を区別する細やかな工夫(ホバー状態、トランジション、余白のリズム)を扱います。oklch.fyi と Interfaces 出版物のクリエイターによるものです。

コメント