mcpField
M
mobile-onboarding

mobile-onboarding

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

mobile-onboarding について

1枚のHTMLページに3画面のモバイルオンボーディングを作成するスキルです。アプリと対象ユーザーに合わせて構成し、最後の画面にサインインまたは続行の選択肢を設けます。

主な機能

  1. 011ページに3つのスマートフォン画面
  2. 02ヒーロー画像またはアイコン
  3. 03見出しと補足テキスト
  4. 04ページ表示と主要CTA
  5. 05最後にサインインまたは続行画面

活用シーン

  1. 01モバイルアプリの導入画面案
  2. 023段階のウェルカムフローの提示
  3. 03サインイン画面のコンセプト作成

インストール

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

$npx skills add https://github.com/mphinance/alpha-skills --skill mobile-onboarding

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

同梱ファイルexample.htmlREADME.md

詳細

モバイルオンボーディングスキル

単一の HTML ページに、3 画面のモバイルオンボーディングフローを作成します。

ワークフロー

  1. DESIGN.md を読みます。
  2. アプリと対象ユーザーを特定します。
  3. レイアウト：スマートフォンのフレームを 3 つ横並びにします。各スマートフォンには以下を含めます。
    • ステータスバー（時刻、バッテリー、電波状況）。
    • ヒーローアートまたはアイコン。
    • 見出しと補足の段落。
    • 3 つのドットによるページネーション。
    • メインの CTA（全幅のピル型ボタン）。
    • 右上の「スキップ」または代替アクション。
  4. 最後のスマートフォンは、サインイン／続行方法を選ぶ画面にします。
  5. 存在感のあるタイポグラフィ、穏やかなグラデーション、アクセシブルなコントラストを使用します。

出力仕様

<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>

コメント

Markdown 対応