mobile-app-ui-design について
明確な階層と余白、自然な動き、状況に応じた個別化、反応性のあるマイクロインタラクションに重点を置くモバイルUIデザインスキルです。インタラクションと仕上がりを重視するモバイル画面の制作に向いています。
主な機能
- 01意図的な視覚階層と余白
- 02自然な動きとトランジション
- 03状況に応じたインターフェース設計
- 04反応性のあるマイクロインタラクション
活用シーン
- 01仕上がりを重視したモバイルアプリ画面の設計
- 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
判断ツリー
-
スキル全体がすでにインストールされていますか?
- グローバル:
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 に進みます
- グローバル:
-
適用範囲を検出してから、インストールします:
[ -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 -yClaude Code: 会話を離れずにコマンドを実行するには、
!で始まるコマンドをチャットメッセージとして送信してください。
注意
- ライセンス: リポジトリに LICENSE ファイルがありません
インストール後の呼び出し
- スキル名:
mobile-app-ui-design - トリガー:「モバイル UI」、「mobile-app-ui-design」、「生き生きとしたインターフェース」、「滑らかなモバイル体験」
概要
一流アプリの視覚的・インタラクションパターンをモデルにした、クラフト重視のモバイル UI デザインスキルです。意図が感じられる(目的に沿った階層と余白)、滑らかな(自然な動きとトランジション)、パーソナルな(コンテキストとユーザーに合わせた)、生き生きとした(応答性の高いマイクロインタラクション)インターフェースの作成を支援します。クラフトの品質を最優先する場合に使用してください。
使用しない場合
- クロスプラットフォームのガイドラインやプラットフォームのルール —
mobile-app-designを使用してください - プラットフォーム固有の HIG 準拠 —
apple-hig-skillsを使用してください - 洗練されたプラットフォーム統合 —
sleek-design-mobile-appsを使用してください
コメント
Markdown 対応