ui-mobile

ui-mobile skill の概要

ui-mobile skill は何のためのものか

ui-mobile skill は、実際のアプリで動くモバイルUIを作るための実践ガイドです。とくに React Native やその周辺のモバイルコードベースで有効です。UI Design において、見た目の整え方だけでなく、タッチターゲット、コントラスト、モバイル特有の操作パターンを、より速く安全に判断したいコントリビューター向けに作られています。

どんな人に向いているか

iOS/Android 向けの画面を設計・見直ししている人、モバイルコンポーネントライブラリをレビューする人、あるいはラフなプロダクト案をモバイル対応のUIへ落とし込む人に ui-mobile skill は向いています。一般的なデザイン指示では見落としやすいアクセシビリティや操作の細部について、プロンプトで指定できる基準が必要なときに特に役立ちます。

何が違うのか

この repo は、重要なところではかなり意見を持っています。最小タッチサイズ、WCAG のコントラスト要件、視認できるインタラクションルールは「推奨」ではなく「制約」として扱われます。だから ui-mobile は、見栄えはいいが使いにくいモバイルUIを出してしまうリスクが大きいときの導入判断に向いています。

ui-mobile skill の使い方

インストールして有効化する

プロジェクトの skill manager で ui-mobile skill をインストールし、完了させたいモバイルUIタスクに向けて使います。ui-mobile のインストールが特に価値を持つのは、たとえば「このフォームを親指操作向けに再設計して」や「このボタン群をアクセシビリティ観点でレビューして」のように、タスクが具体的な場合です。

適切な入力の形で渡す

よい入力には、プラットフォーム、画面の文脈、コンポーネント種別、制約条件が含まれます。たとえば「この mobile UI をよくして」ではなく、「この React Native の checkout 画面を片手操作向けに改善し、ブランドカラーはコントラストが保てる範囲で維持し、タッチターゲットや視認性の問題があれば修正して」といった形です。ここまで具体的にすると、ui-mobile skill は一般論ではなく、実際に使える UI Design の指針を出しやすくなります。

先に読むべきファイルを確認する

まず SKILL.md を開いて、強制されるルールを把握します。そのうえで、リポジトリ内で使われているプロンプトや関連ガイドがあれば確認してください。この repository はファイル構成がかなりシンプルなので、SKILL.md が ui-mobile の主な正本です。補助スクリプトや参照フォルダに頼る前提はありません。

制約をワークフローに組み込む

レイアウトを詰める前に、タッチターゲットサイズとコントラストを合否判定のチェック項目として扱ってください。コード生成を依頼する場合は、プラットフォームとコンポーネント種別を明示したうえで、最小ヒット領域、読みやすい文字、見える状態変化を満たしているか確認するよう求めます。ui-mobile skill を使う強いプロンプトは、UI そのものだけでなく、各モバイル制約をどう満たしたかの理由まで尋ねるものです。

ui-mobile skill のFAQ

ui-mobile は React Native 専用ですか？

いいえ。skill の中心は React Native ですが、ルール自体は iOS/Android のUI作業全般に有効です。Flutter や別のモバイルフレームワークを使っている場合でも、ui-mobile skill はアクセシビリティや操作の判断に役立ちますが、出力は自分の framework に合わせて調整する必要があります。

どんなときにこの skill を使うべきではありませんか？

タスクが desktop-first である、コンテンツのみを扱う、あるいはインタラクティブなモバイルUIと無関係である場合は、ui-mobile を使わないでください。モバイルの使いやすさに関する制約を入れずに、純粋にブランド探索だけをしたい場合にも、あまり向いていません。

通常のプロンプトより優れていますか？

モバイルの使い勝手が崩れるリスクがあるなら、たいていはそうです。通常のプロンプトでも見た目としては十分な案が出ることがありますが、ui-mobile skill は、実運用で重要な制約、つまり手が届くコントロール、読みやすい文字、モバイル特有の表示ルールへとモデルを寄せていきます。

初心者でも使いやすいですか？

はい。画面と課題を説明できるなら使えます。初心者が最も効果を得やすいのは、1つのコンポーネントか1画面ずつ依頼し、現在のUI、対象デバイスの挙動、固定されているデザイントークンを含めるやり方です。

ui-mobile skill をより良く使う方法

いちばん厳しい要件から伝える

最も効果が大きいのは、失敗しやすい点を最初に言うことです。ui-mobile では、タッチターゲットサイズ、コントラスト、詰まりやすいレイアウトがその対象になりがちです。「デザインは維持しつつ、すべての tap target を少なくとも 44x44 にし、テキストは WCAG AA を満たすようにして」と伝えると、出力は格段に実用的になります。

プラットフォーム固有の文脈を入れる

モバイルUIは iOS と Android で挙動が異なるため、対象を明示したほうが skill はうまく働きます。「iOS の account actions 用 bottom sheet」と指定するほうが、「mobile modal」とだけ伝えるよりも ui-mobile の結果はよくなります。spacing、safe areas、期待される操作がはっきりするからです。

出力だけでなくチェックも求める

ui-mobile の良い結果には、自己レビューの工程が含まれます。「すべての interactive element が最小タッチサイズを満たしているか確認して」「コントラスト上のリスクを挙げて」「keyboard や system UI の背後に隠れる可能性がある要素を指摘して」といった短い検証リストを求めてください。見た目は整っていても脆いデザインを受け入れてしまう確率を下げられます。

抽象的な改善ではなく、具体的な失敗点に絞って反復する

最初の案が惜しいけれど十分ではないなら、具体的な欠点を返します。「secondary button が小さすぎる」「icon label のコントラストが低い」「片手ではフォームが使いにくい」といった具合です。そうすると ui-mobile skill は、「mobile usability を改善して」ともう一度頼むより、はるかに良い修正対象を持てます。