mcpField
M
mobile-app-ui-design

mobile-app-ui-design

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

mobile-app-ui-design について

明確な階層と余白、自然な動き、状況に応じた個別化、反応性のあるマイクロインタラクションに重点を置くモバイルUIデザインスキルです。インタラクションと仕上がりを重視するモバイル画面の制作に向いています。

主な機能

  1. 01意図的な視覚階層と余白
  2. 02自然な動きとトランジション
  3. 03状況に応じたインターフェース設計
  4. 04反応性のあるマイクロインタラクション

活用シーン

  1. 01仕上がりを重視したモバイルアプリ画面の設計
  2. 02モバイル画面への動きと操作の追加

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill mobile-app-ui-design

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

同梱ファイルstub.yaml

詳細

mobile-app-ui-design

カタログのスタブ — スキルの全内容:ceorkm/mobile-app-ui-design

判断ツリー

  1. スキル全体がすでにインストールされていますか?

    • グローバル:f=~/.agents/skills/mobile-app-ui-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト:f=.agents/skills/mobile-app-ui-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルは mobile-app-ui-design としてインストールされています。これを呼び出して続行してください
    • pointer → ステップ 2 に進みます
  2. 適用範囲を検出してから、インストールします:

    [ -e ~/.agents/skills/mobile-app-ui-design ] && echo "global" || echo "project"
    

    グローバル:

    npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -g -y
    

    プロジェクト:

    npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -y
    

    Claude Code: 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信してください。

注意

  • ライセンス: リポジトリに LICENSE ファイルがありません

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

  • スキル名:mobile-app-ui-design
  • トリガー:「モバイル UI」、「mobile-app-ui-design」、「生き生きとしたインターフェース」、「滑らかなモバイル体験」

概要

一流アプリの視覚的・インタラクションパターンをモデルにした、クラフト重視のモバイル UI デザインスキルです。意図が感じられる(目的に沿った階層と余白)、滑らかな(自然な動きとトランジション)、パーソナルな(コンテキストとユーザーに合わせた)、生き生きとした(応答性の高いマイクロインタラクション)インターフェースの作成を支援します。クラフトの品質を最優先する場合に使用してください。

使用しない場合

  • クロスプラットフォームのガイドラインやプラットフォームのルール — mobile-app-design を使用してください
  • プラットフォーム固有の HIG 準拠 — apple-hig-skills を使用してください
  • 洗練されたプラットフォーム統合 — sleek-design-mobile-apps を使用してください

コメント